本文讲解如何在使用模板字符串（template literal）时，正确通过三元运算符为内联样式（如 color）动态赋值，避免因引号嵌套错误或字符串拼接不当导致 nan 或语法异常。
本文讲解如何在使用模板字符串（template literal）时，正确通过三元运算符为内联样式（如 color）动态赋值，避免因引号嵌套错误或字符串拼接不当导致 nan 或语法异常。
在基于 JavaScript 的前端表格库（如 Grid.js）中，常需根据数据状态动态控制元素样式。例如，将金额列中的文字颜色设为绿色（表示“已满额”）或红色（表示“未达标”）。但若错误使用字符串拼接与引号嵌套，极易引发 NaN 渲染、语法错误或样式失效。
原始代码的问题在于：
- 混用了传统字符串拼接（+）与模板字符串（反引号 `）；
- 三元表达式被错误地包裹在多余引号中，破坏了表达式结构；
- cell.amount ? "green" : "red" 被写成 " + cell.amount ? + " 'green' " : " 'red' "，导致 JS 尝试对字符串执行逻辑运算，最终返回 NaN。
✅ 正确写法应完全依托模板字符串的插值能力：
const grid = new Grid({
columns: [
{
name: 'Name',
formatter: (cell) => html(`<b style="color: ${cell.amount ? 'green' : 'red'}">${cell}</b>`)
},
'Email',
{
name: 'Actions',
formatter: (_, row) => html(`<a href="mailto:%24%7Brow.cells[1].data%7D">Email</a>`)
}
],
data: Array(5).fill().map(() => [
faker.name.findName(),
faker.internet.email(),
// 注意：此处需确保 cell.amount 存在且为可判断真假的值（如 number）
Math.random() > 0.5 ? 100 : 30 // 示例 amount 值
])
});
? 关键要点：
- 统一使用双引号或单引号包裹属性值（如 style="color: ..."），避免内外引号冲突；
- 所有动态值必须用 ${...} 插入模板字符串，禁止混用 + 拼接；
- 确保 cell.amount 是可安全参与布尔判断的值（推荐显式比较，如 cell.amount >= 100），避免 null/undefined 导致意外逻辑；
- 若需更复杂样式（如背景色、字体粗细），可扩展为 ${cell.amount >= 100 ? 'green; font-weight: bold' : 'red'}，保持可读性优先。
? 进阶建议：对于频繁复用的条件样式，可封装为工具函数，提升可维护性：
const getAmountColor = (amount) => amount && amount >= 100 ? 'green' : 'red';
// 使用：style="color: ${getAmountColor(cell.amount)}"
掌握模板字符串与条件插值的正确用法，是编写健壮、可读性强的动态渲染逻辑的基础。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
