模板字符串是用反引号包裹、支持变量插值（${}内为合法表达式）、多行书写和表达式计算的可执行字符串上下文，非简单拼接升级。
模板字符串 是 JavaScript 中用反引号（`）包裹的字符串，它天然支持变量插值、多行书写和表达式计算——不是“更高级的拼接语法”，而是把字符串从“静态文本”升级为“可执行上下文”。
怎么写？别漏掉反引号和 ${} 的细节
错：用单/双引号写 "Hello ${name}" → 它就是普通字符串，${name} 不会被解析，原样输出。
对：必须用反引号：`Hello ${name}`，且 ${} 内只能是合法 JS 表达式（变量、函数调用、运算、甚至三元判断），不能是语句（比如 if 或 for）。
- ✅
const msg = `User ${user?.name || 'Anonymous'} logged in` - ❌
const msg = "User ${user.name}..."（报错或字面输出） - ⚠️
${user.name.toUpperCase()}可以，但${function(){...}()}虽语法合法，却容易让逻辑难以维护
为什么不用 + 拼接？三个真实痛点
传统拼接在变量一多就失控，尤其嵌套对象、条件分支、换行 HTML 时：
-
可读性崩塌：
'<div class="' + cls + '">' + '<p>' + text + '</p> </div>'—— 引号、加号、括号层层嵌套，改错一个就全乱 -
换行难处理：想写多行 HTML？得手动加
\n和+，缩进全丢，还容易漏空格 -
类型隐式转换陷阱：
'Age: ' + user.age中若user.age === undefined，结果是"Age: undefined"；而`Age: ${user.age}`同样出undefined，但至少你一眼能看出问题在哪
模板字符串把这些都收束到一处：结构清晰、换行即换行、插值位置即调试锚点。
常见踩坑：空格、转义、嵌套和标签模板混淆
很多人以为“用了反引号就万事大吉”，其实几个细节不注意，产出内容会意外变形：
-
缩进被原样保留：代码缩进 ≠ 字符串缩进。下面这段生成的 HTML 开头有 4 个空格：
const html = ` <div><p>Hello</p></div> `;
-
要转义反引号或
$，必须用\`和\$，例如：`She said: \`Hi\` and cost \$5` -
嵌套模板字符串？不行直接嵌，得用转义：
`Outer ${`inner ${x}`}`是非法的；正确写法是`Outer ${"inner " + x}`或用标签函数 -
别把
foo`text${x}`当成“调用 foo 函数”：这是标签模板，foo必须是函数，且接收strings数组和插值参数 —— 不是语法糖，是另一套机制
什么场景下该坚持用模板字符串？
不是所有字符串都要模板化。以下情况建议强制使用：
- 拼接 ≥ 2 个变量或表达式（哪怕只是
id和type） - 生成 HTML / SQL 片段 / URL 路径（如
`/api/users/${id}/posts?limit=${limit}`） - 日志消息含多个上下文字段（
`[ERROR] ${err.code} at ${loc.file}:${loc.line}`） - 需要自然换行（比如构建带缩进的配置说明、邮件正文）
但纯静态字符串（如 const MSG = "Loading..."）、或仅拼一个变量（"ID: " + id）—— 用不用影响不大，别为了“语法新”而硬套。
真正关键的不是“会不会写 ${x}”，而是意识到：字符串不再是被动容器，而是可计算、可调试、可结构化的第一类值。一旦习惯这种视角，拼接就再不会是脏活累活。
