模板字符串需用反引号包裹，否则${}不生效；变量须已声明；支持换行与多层表达式但忌过度复杂；标签函数用于安全插值、国际化等；IE不支持，深层嵌套非法。
模板字符串里嵌入变量为什么没生效
常见现象是写成 `Hello ${name}` 却输出了字面量 Hello ${name}，根本原因是用了普通单引号或双引号，不是反引号 `。模板字符串必须用反引号包裹，否则大括号只是普通字符。
- ✅ 正确：
`Hello ${name}` - ❌ 错误：
"Hello ${name}"或'Hello ${name}' - 变量
name必须已声明且有值，未定义会显示undefined - 支持多层表达式，比如
${items.length > 0 ? 'has items' : 'empty'}，但别塞太复杂的逻辑，可读性会崩
换行和缩进怎么保留又不破坏代码格式
模板字符串天然支持换行，但直接回车会导致 HTML 渲染出多余空格或换行符，JS 逻辑中也可能干扰 trim 或比较。关键是区分「意图换行」和「为排版加的缩进」。
- 想保留换行：直接写
`line1\nline2`或用反引号内真实换行 - 想避免缩进污染：用
.replace(/\s+$/gm, '')去每行尾空格，或用 tagged template function 清理 - 常见坑：在 React JSX 中写
{`<div>\n text\n</div>`}，浏览器会把换行转成文本节点空格，建议用whiteSpace: 'pre-wrap'控制 CSS
标签模板函数（tagged template）到底用来干啥
不是炫技用的，典型场景是安全插值、国际化、SQL 拼接防注入、CSS 动态生成。它的核心是函数接收两个参数：字符串数组（不含表达式部分）和表达式值数组。
`hello ${a} world ${b}`
传给函数 myTag 时，实际调用是：myTag(['hello ', ' world ', ''], a, b)。
立即学习“Java免费学习笔记（深入）”；
- 做 HTML 转义：
html`<div>${userInput}</div>`内部对每个userInput做escapeHTML() - 做 i18n：
t`Hello ${name}, you have ${count} messages`，函数查翻译表并替换占位符 - 注意：不要在 tag 函数里直接拼接 SQL，仍需绑定参数；Node.js 的
pg等驱动原生支持参数化，优先用它们
性能和兼容性还有哪些隐性代价
模板字符串本身性能没问题，V8 优化得很好，但滥用会带来间接成本。
- IE 完全不支持，哪怕 Babel 编译成
+拼接，也会丢失换行和多行能力，得靠String.raw或正则补救 - 大量拼接长字符串（如生成千行 HTML）时，反复创建新字符串比
Array.join()慢，尤其在旧引擎上 - 调试困难：错误堆栈里的模板字符串常被压缩成一行，变量名消失，Chrome DevTools 里 hover 查看值比传统拼接更不直观
最常被忽略的是嵌套层级——三层以上插值（${${${x}}}）语法不合法，必须拆成中间变量。别为了“一行写完”牺牲可维护性。
