模板字面量是JavaScript原生支持的反引号包裹字符串，支持${expression}变量插值、多行文本及标签函数；它非语法糖升级版，核心优势在于可读性、维护性及扩展能力远超+拼接。
模板字面量就是带 ` 的字符串，支持变量插值和多行
它不是语法糖的“升级版”，而是 JavaScript 原生支持的字符串字面量类型，用反引号 ` 包裹。最核心的能力是：${expression} 语法可直接嵌入变量、表达式甚至函数调用，不用拼接 +。
比如：
`Hello ${name}, you have ${items.length} new messages.`比 'Hello ' + name + ', you have ' + items.length + ' new messages.' 更易读，也更少出错。
template literal 在嵌套对象或函数调用时不会自动 toString()
这是容易踩坑的地方：如果插值表达式返回 undefined、null 或对象，默认会调用 .toString()，但结果可能不符合预期。
立即学习“Java免费学习笔记（深入）”；
-
${null}→ 字符串"null"（不是空字符串） -
${{a:1}}→"[object Object]"，不是 JSON -
${arr.map(x => x * 2)}→ 自动调用Array.prototype.toString()，等价于arr.map(...).join(",")，不是你想要的 JSON 格式
需要显式处理：
`User: ${user?.name || 'Anonymous'}, score: ${Math.round(score)}`模板字面量支持多行和标签函数，普通字符串连接做不到
反引号内的换行会被保留，不需要 \n 或 + 拼接；更重要的是，它可以被“标签函数”拦截处理——这是字符串连接完全不具备的能力。
- 多行示例：
`Line 1 Line 2 Indented`
- 标签函数示例（如防 XSS、SQL 转义）：
function sql(strings, ...values) { return strings[0] + values.map((v, i) => escape(v) + strings[i+1]).join(''); } sql`SELECT * FROM users WHERE id = ${userId}`;
这种能力让模板字面量在构建动态 SQL、HTML 片段、国际化文案时远超 + 连接。
性能差异基本可以忽略，但可读性和维护性差距明显
V8 和 SpiderMonkey 对模板字面量做了深度优化，单次插值的开销和字符串连接几乎一致。真正的问题在长期维护：
- 嵌套多层
+容易漏空格或引号，报错信息指向行尾而非具体变量 - 模板中修改一个变量名，IDE 能高亮所有
${xxx}；而str + a + ' ' + b中的a和b是裸变量，重构时容易遗漏 - 国际化工具（如
formatjs）只识别模板字面量中的插值，不解析+拼接
除非你在性能极端敏感的循环里每秒拼接百万次字符串，否则模板字面量是默认选择。别为了“可能快一点点”放弃可读性——JS 引擎早就不吃那套了。
