本文讲解如何在使用模板字符串时正确嵌入条件表达式来动态设置 HTML 元素的内联样式，避免因引号错乱或拼接错误导致 NaN 或语法异常。核心在于使用 ${} 正确插值，而非字符串拼接。
本文讲解如何在使用模板字符串时正确嵌入条件表达式来动态设置 html 元素的内联样式，避免因引号错乱或拼接错误导致 nan 或语法异常。核心在于使用 `${}` 正确插值，而非字符串拼接。
在前端开发中，尤其是使用如 Grid.js 这类数据表格库时，常需根据数据状态（如数值大小、布尔标志等）动态改变单元格样式——例如将金额字段的文本颜色设为绿色（表示正常/达标）或红色（表示异常/未达标）。实现的关键在于正确使用 ES6 模板字符串进行条件插值，而非传统字符串拼接。
原始代码中的问题非常典型：
style='color: " + cell.amount ? + " 'green' " : " 'red' '
这段代码存在三处关键错误：
- 多余且混乱的引号嵌套：单引号与双引号混用，导致 JS 解析失败；
- 误用字符串拼接代替模板插值：在反引号（）包裹的模板字符串中，应使用${expression}插入变量或表达式，而非+` 拼接；
- 条件逻辑不严谨：cell.amount ? ... 会将 0、null、"" 等 falsy 值误判为“非全量”，若业务中 amount 可能为 0，建议显式比较（如 cell.amount > 0 或 cell.amount === 'full'）。
✅ 正确写法如下（适配 Grid.js 的 formatter）：
立即学习“Java免费学习笔记（深入）”；
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:${row.cells[1].data}">Email</a>`)
}
],
data: Array(5).fill().map(() => [
faker.name.findName(),
faker.internet.email(),
// 注意：此处需确保 cell.amount 存在且可读，例如：
// { amount: Math.random() > 0.5 ? 100 : 0 }
])
});? 关键要点总结：
- 模板字符串中所有动态内容必须包裹在 ${...} 内，JS 引擎会自动求值并转为字符串；
- 样式属性推荐统一使用双引号（"color: ..."），避免与外层反引号冲突；若需内嵌双引号（如 font-family: "Arial"），可用转义或改用单引号；
- 条件判断应结合实际业务语义：若 amount 是数字，建议写成 cell.amount >= 100；若是字符串标识，宜用 cell.amount === 'full'；
- 谨防 cell.amount 为 undefined 导致 NaN 或控制台报错，可加安全访问：${cell?.amount ? 'green' : 'red'}（需环境支持可选链）。
通过规范使用模板字符串插值，不仅能消除 NaN 渲染问题，还能提升代码可读性与维护性——这是现代 JavaScript 动态样式处理的标准实践。
