17370845950

模板字符串是用反引号包裹、支持插值${...}、保留换行与空格、可接标签函数的字符串字面量，非语法糖，适用于多行文本、结构化内容生成等+拼接无法替代的场景。

模板字符串不是“更好”的拼接，而是解决拼接做不到的事——比如多行、嵌入表达式、标签函数。单纯拼接字符串时，+ 或 concat() 依然更轻量、更直观。

什么是模板字符串？

它是用反引号 ` 包裹的字符串字面量，支持变量插值（${...}）、换行保留、以及可选的标签函数调用。

它不是语法糖，底层行为和普通字符串不同：解析时会把插值部分当作表达式求值，再拼接；同时保留原始换行和空格。

常见误用是把它当“高级加号”——其实它真正价值在结构化内容生成场景，比如 HTML 片段、SQL 拼装、国际化文案。

为什么 ${expression} 不能用在单引号/双引号里？

因为 ${...} 是模板字符串专属语法，不是 JavaScript 的通用插值机制。单引号/双引号字符串里写 ${x} 就是纯文本，不会执行。

以下写法全错：

`hello ${name}`  // ✅ 正确
'hello ${name}'  // ❌ 文本输出，不求值
"hello ${name}"  // ❌ 同上
`hello $name`    // ❌ 缺少大括号，不识别为插值

容易踩的坑：

• 复制粘贴时混入中文反引号（`）或全角符号
• 忘记闭合 ${} 导致语法错误（Unterminated template literal）
• 在不支持 ES6 的环境（如旧版 IE）中直接使用，报 SyntaxError

模板字符串比 + 拼接慢吗？

现代引擎（V8、SpiderMonkey）对两者都做了高度优化，日常使用几乎无感知。但有几点关键差异：

• 模板字符串每次都会创建新字符串对象，而连续 + 在某些情况下可能被引擎内联或复用临时缓冲区
• 含大量插值的模板字符串（如 ${a}${b}${c}${d}）实际等价于 a + b + c + d，性能一致
• 但用模板字符串写多行 HTML 时，隐含大量空白字符，可能意外增大内存占用（尤其在循环中反复生成）
• 标签函数（如 html`${x}`）会额外调用函数，开销明确存在

结论：别为性能改写已有拼接逻辑；但若要加换行、嵌套逻辑、或统一处理插值（比如转义），模板字符串是唯一合理选择。

什么时候必须用模板字符串？

只有这些情况无法用 + 或 concat() 替代：

• 需要原样保留换行：`line1\nline2` 中的 \n 是真实换行符，而 "line1\nline2" 虽然也能做到，但写长文本时模板字符串更易读
• 动态标签函数：比如 sql`SELECT * FROM users WHERE id = ${id}`，函数能拿到原始字符串片段和插值值，实现参数绑定或静态分析
• 构建带缩进的代码片段（如 Babel 插件、AST 生成），靠反引号+空格维持格式
• 国际化中需复数/性别等上下文插值，配合 Intl.MessageFormat 等库时，模板字符串是自然输入源

多行字符串里最容易忽略的是缩进污染：你写的空格和换行都会进最终字符串，调试时用 JSON.stringify(str) 看真实内容，比肉眼判断可靠得多。