模板字符串是ES6起的原生方案，用反引号标识，支持多行、插值和标签函数；普通字符串不支持这三者，${}仅在模板中生效且立即求值。
JavaScript 模板字符串不是语法糖，而是解决字符串拼接、多行文本、嵌入逻辑三大痛点的原生方案。它从 ES6（ES2015）起成为标准，``（反引号）是唯一标识，和单引号、双引号有本质区别。
模板字符串和普通字符串的根本区别在哪
普通字符串（' ' 或 " "）不支持换行、不支持直接插值、不支持标签函数；模板字符串（` `）三者都支持。最直观的区别是：写换行不用 \n，直接回车就行：
`hello world` // 合法，生成两行字符串
而 'hello\nworld' 才是单引号下的等价写法。更关键的是，${} 插值只在模板字符串中生效 —— '${x}' 就是字面量，`${x}` 才真执行求值。
如何安全使用表达式插值（${}）
插值内部可以是任意 JavaScript 表达式，但要注意执行时机和作用域：
立即学习“Java免费学习笔记（深入）”；
-
${x}等价于String(x)，会调用x.toString()，对null、undefined返回对应字符串，不会报错 - 支持嵌套：例如
`${obj?.name || 'anonymous'}`、`${arr.map(i => i * 2).join(', ')}` - 不能直接写语句（如
if、for），但可用三元、逻辑运算符或立即执行函数替代 - 避免在插值里做重操作（如大型数组遍历、DOM 查询），因为每次模板求值都会执行
标签函数（tagged templates）的实际用途
标签函数不是炫技功能，而是处理模板字符串的“拦截器”——第一个参数是静态字符串数组（strings），后续参数是每个 ${} 的求值结果：
function highlight(strings, ...values) {
return strings.reduce((acc, str, i) => {
const val = values[i] ?? '';
return acc + str + `<mark>${val}</mark>`;
}, '');
}
<p>const name = 'Alice';
highlight<code>Hello ${name}!</code>; // → "Hello <mark>Alice</mark>!"常见实用场景包括：
- HTML 转义（防止 XSS）：
html`<div>${userInput}</div>` - SQL 参数化（配合数据库驱动）：
sql`SELECT * FROM users WHERE id = ${id}` - i18n 多语言提取（工具可静态分析
strings数组） - 样式内联（如 styled-components 底层）
容易被忽略的兼容性与性能细节
模板字符串本身兼容所有现代浏览器（Chrome 41+、Firefox 34+、Safari 9+、Edge 12+），但标签函数在旧环境需转译。真正影响落地的是两个隐性问题：
- 模板字符串不是“惰性”的：哪怕你把它赋给变量但没用到，插值表达式仍会立即执行
- 带换行/空格的模板字符串会保留所有空白字符（包括缩进），可能意外污染 DOM 文本或 API 请求体
- 过度嵌套插值（比如
`${`${`${x}`}`}`）可读性差，且 V8 引擎优化有限，比扁平拼接略慢
如果只是拼接几个变量，`a${b}c${d}` 最简洁；如果涉及条件、循环或安全处理，优先封装成标签函数，而不是堆砌三元表达式。
