模板字符串是用反引号包裹、支持插值${...}、保留换行与空格、可接标签函数的字符串字面量，非语法糖，适用于多行文本、结构化内容生成等+拼接无法替代的场景。
模板字符串不是“更好”的拼接，而是解决拼接做不到的事——比如多行、嵌入表达式、标签函数。单纯拼接字符串时，+ 或 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) 看真实内容，比肉眼判断可靠得多。
