ES6模板字符串支持在${}中嵌入任意合法JavaScript表达式，包括三元运算、函数调用、数组/对象操作、算术逻辑运算及嵌套模板，但需确保为有返回值的表达式，避免语句、注意null/undefined转换及可读性。
ES6 模板字符串支持在 ${} 中嵌入任意合法的 JavaScript 表达式，不只是简单变量，还能写三元运算、函数调用、数组方法、对象访问、甚至短路逻辑等，只要表达式能求值为一个可转为字符串的值即可。
支持的复杂表达式类型
以下几类表达式都能直接放进 ${} 里，运行时自动计算并转为字符串：
-
三元条件判断：如
${isActive ? '在线' : '离线'} -
函数调用：如
${formatDate(new Date())}或${Math.max(10, 20, 5)} -
数组/对象操作：如
${users.map(u => u.name).join('、')}、${user?.profile?.avatar || '/default.png'} -
算术与逻辑运算：如
${a * b + c}、${x && y ? x.length : 0} -
模板内再嵌模板字符串（需注意括号匹配）：如
${`前缀-${id}`}，但不推荐多层嵌套，易读性下降
实际使用注意事项
虽然语法灵活，但要注意几个关键细节：
-
表达式必须完整且有返回值：不能写语句（如
if、for、let），只能写表达式。错误示例：${if (x) 'yes'}会报错 -
null 和 undefined 会被转成字符串字面量：即
${null}输出"null"，${undefined}输出"undefined"，建议提前做空值处理 -
性能敏感场景慎用高频计算：比如在循环中反复执行
${items.filter(...).map(...).join('')}，可能比预计算更慢 - 避免过度嵌套影响可读性：一行模板里塞太多逻辑会难调试，复杂逻辑建议提取为独立变量或函数
常见实用例子
这些写法在真实项目中很常见：
立即学习“Java免费学习笔记（深入）”；
- 带默认值的属性访问：
`用户ID: ${user?.id ?? '未知'}` - 格式化数字：
`价格: ¥${(price * 1.1).toFixed(2)}` - 动态类名：
`class="btn ${isPrimary ? 'btn-primary' : 'btn-default'}"` - HTML 内联样式：
`style="color:${isValid ? 'green' : 'red'}; font-weight:${isUrgent ? 'bold' : 'normal'}"` - SQL 片段（仅限服务端或可信上下文）：
`WHERE status = '${status}' AND created_at > '${new Date().toISOString().split('T')[0]}'`
只要表达式合法、有返回值，它就能进 ${}；重点不是“能不能写”，而是“该不该这么写”——清晰、安全、可维护才是关键。
