模板字面量通过表达式插值、多行结构和标签函数三者协同，彻底改变字符串与逻辑交织方式：插值支持安全表达式计算，多行保留原样空白，标签函数提供运行时控制点。
模板字面量（Template Literals）不是“更高级的字符串拼接”，而是彻底改变了 JavaScript 中字符串与逻辑交织的方式——关键在于它支持表达式插值、多行结构和标签函数，三者缺一不可。
为什么 `${...}` 比 + 拼接更安全
拼接时容易漏掉空格、引号错位，尤其嵌套对象属性或条件分支时；${...} 内部是完整 JS 表达式，可直接调用函数、访问深层属性、甚至写三元判断：
-
${user?.profile?.name || 'Anonymous'}—— 可选链 + 默认值，无需提前判空变量 -
${items.map(i => `—— 原生支持内联循环生成 HTML 片段- ${i.label}
`).join('')}
- 错误写法：
`${obj.name} ${obj.age} ${obj.city}`中任一属性为undefined会显式输出字符串"undefined"，需主动处理
多行字符串里换行符和缩进怎么算
反引号内的换行、空格、制表符全部原样保留，包括代码缩进。这在写 SQL 查询或 JSX 片段时很直观，但也容易引入意外空白：
- 常见坑：
`SELECT * FROM users/nWHERE id = ${id}`中的/n是多余转义，应直接换行 - 修复缩进：用
.trim()或.replace(//s+/g, ' ')清理首尾/多余空白 - 真正需要保留缩进时（如生成带格式的 JSON），反而要靠手动对齐，IDE 不会自动修正模板内的空格
标签函数不是语法糖，是运行时控制点
html`
${content}
` 这类写法中，html 是普通函数，接收一个字符串数组和插值表达式结果作为参数，全程可控：
立即学习“Java免费学习笔记（深入）”；
- 第一个参数是静态片段数组，如
['；后续参数是每个', '']
${...}的求值结果 - 可用于自动转义 HTML：
function escape(strings, ...values) { return strings.map((s, i) => s + (values[i] ?? '').toString().replace(/&/g, '&')).join(''); } - 不推荐在标签函数里做复杂逻辑（如异步请求），因为模板字面量本身是同步求值的，无法 await 插值内容
最常被忽略的是：模板字面量的解析发生在编译阶段，但插值表达式的执行是运行时的——这意味着不能用它动态生成变量名或函数名，也不能绕过作用域限制去访问闭包外的私有变量。