本文讲解如何在使用模板字符串时正确嵌入条件表达式来动态设置 html 元素的内联样式（如颜色），避免因引号混乱或拼接错误导致 nan 或语法异常。
本文讲解如何在使用模板字符串时正确嵌入条件表达式来动态设置 html 元素的内联样式（如颜色），避免因引号混乱或拼接错误导致 nan 或语法异常。
在前端开发中，尤其使用 grid.js 等数据表格库时，常需根据数据状态（如数值大小、布尔值、枚举字段）动态控制单元格样式。常见误区是混淆字符串拼接与模板字面量（template literal）的语法，导致运行时错误（如显示 NaN）或 DOM 渲染异常。
问题核心在于：你试图用传统字符串拼接方式（" + ... + "）混入 ES6 模板字符串（反引号 `...`），同时嵌套了错误的引号结构，例如：
// ❌ 错误写法（引号嵌套混乱 + 拼接语法不兼容模板字符串） style='color: " + cell.amount ? + " 'green' " : " 'red' '
这不仅语法非法，还会使 cell.amount ? 被当作独立表达式执行（可能返回 undefined 或 NaN），进而污染整个字符串。
✅ 正确做法是完全使用模板字符串 + ${} 插值语法，将三元表达式直接写在插值区域中，无需额外引号包裹字符串值：
立即学习“Java免费学习笔记（深入）”；
Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...
formatter: (cell) => html(`<b style="color: ${cell.amount ? 'green' : 'red'}">${cell}</b>`)? 注意：此处推荐使用双引号包裹 style 属性值（style="..."），内部用单引号写颜色值（'green'），可避免引号冲突；当然也可统一用反引号或转义，但语义清晰更重要。
此外，还需注意逻辑健壮性：cell.amount 若为 0、null、undefined 或空字符串，在布尔上下文中均为 falsy，会导致误判为“非满额”。若业务中“满额”指具体数值（如 amount === 100 或 amount > 0），应显式判断：
// ✅ 更严谨的条件（例如：amount 大于 0 才视为有效/满额）
formatter: (cell) => html(`<b style="color: ${cell.amount > 0 ? 'green' : 'red'}">${cell}</b>`)
// ✅ 或处理可能为 null/undefined 的情况
formatter: (cell) => html(`<b style="color: ${Number(cell.amount) >= 100 ? 'green' : 'red'}">${cell}</b>`)最后提醒：内联样式虽便捷，但大量条件样式建议抽离至 CSS 类名控制（如 class="${cell.amount ? 'success' : 'error'}"），更利于维护、主题切换与性能优化。但在 grid.js 的 formatter 场景下，内联样式仍是最直接的解决方案。
总结：
- ✅ 使用 ${expression} 插值，而非 " + expression + " 拼接；
- ✅ 条件表达式返回字符串字面量（如 'green'），无需额外引号包裹；
- ✅ 校验数据类型，避免 falsy 值引发逻辑偏差；
- ✅ 优先考虑语义化 class 控制样式，内联样式仅用于简单、动态性强的场景。
