模板字符串是支持多行、嵌入表达式、无需转义的字符串字面量，用反引号定义，${...}中可放任意表达式但非语句，天然支持换行但需注意缩进，结合标签函数可扩展功能。
JavaScript 模板字符串不是“更高级的字符串拼接”，而是支持多行、嵌入表达式、无需转义的字符串字面量——它解决的是传统字符串在可读性、维护性和表达能力上的硬伤。
模板字符串用 `（反引号）而不是 ' 或 "
这是最基础但最容易忽略的点：写成 "Hello ${name}" 不会生效，必须是 `Hello ${name}`。浏览器或 Node.js 遇到单双引号里的 ${...} 会当作普通文本，不会解析为插值。
- ✅ 正确：
`Hello ${user.name}` - ❌ 错误：
"Hello ${user.name}"（输出就是字面量Hello ${user.name}） - ⚠️ 注意：
`在英文键盘是 Esc 下方、Tab 上方那个键，不是单引号
${...} 里可以放任意 JavaScript 表达式，不只是变量
它不是“变量占位符”，而是运行时求值的表达式容器。这意味着你可以直接调用函数、做运算、访问属性链，甚至写三元表达式。
-
`Price: $${(price * 1.1).toFixed(2)}`—— 计算 + 格式化一步到位 -
`Status: ${isActive ? 'Online' : 'Offline'}`—— 内联条件逻辑 -
`ID: ${data?.id ?? 'unknown'}`—— 支持可选链和空值合并 - ⚠️ 注意：不能放语句（如
if、for），只接受表达式
多行字符串天然支持，但缩进会原样保留
换行符会被保留在最终字符串中，所以直接写会多出大量空格和制表符，影响 JSON 输出或 DOM 渲染。
立即学习“Java免费学习笔记（深入）”；
- ✅ 清晰写法：
`Line 1 Line 2 Line 3`
- ⚠️ 常见坑：
const html = ` <div><p>Hello</p></div> `;
——开头换行和缩进都会变成字符串的一部分 - ? 补救方式：用
.trim()或模板字符串内手动换行+字符串连接，例如：`<div>` + `<p>Hello</p>` + `</div>`
标签函数让模板字符串具备“处理逻辑”的能力
模板字符串本身只是语法糖，但加上前缀函数（如 html`...`、sql`...`），就能实现自动转义、语法校验、甚至编译优化。
- 常见用例：
String.raw`C:\temp\notes.txt`—— 避免反斜杠被解释为转义 - 自定义标签示例：
function upper(strings, ...values) { return strings[0] + values.map(v => String(v).toUpperCase()).join('') + strings[1]; } upper`hello ${'world'}`; // → "hello WORLD" - ⚠️ 注意：标签函数第一个参数是字符串数组（静态部分），后续才是插值结果；不要漏掉对
strings的处理
真正容易被忽略的是嵌套模板字符串的可读性——当 ${...} 里又出现模板字符串时，反引号层级一多，眼睛就容易看错边界。这时候宁可拆成变量，也别硬塞三层 `...${`...${...}`...}`...。
