模板字符串相比普通字符串有什么优势？

简化版

模板字符串用反引号声明，支持多行文本、${} 表达式插值和标签模板，能让字符串拼接更清晰，也能承载更复杂的字符串处理逻辑。

详细版

模板字符串解决的是普通字符串拼接难读、转义多、多行文本不自然的问题。

常见能力有：

用 ${name} 插入变量或表达式。
保留换行和缩进，适合写 HTML、SQL、日志模板。
支持标签模板，让函数接管字符串片段和表达式值。
不是自动防 XSS 的安全方案，插入用户输入时仍要做转义。

面试中要强调：模板字符串提升的是表达能力和可读性，标签模板提供的是可编程的字符串处理入口。

完整版教学

一、它先解决的是字符串拼接可读性问题

ES5 里常见写法是用 + 拼接字符串。当变量超过 3 个、文本里又夹着引号和换行时，代码会迅速变得难读。模板字符串把“文本骨架”和“动态数据”放在同一个语境里，读者可以直接看到最终字符串的大致形状。

const user = 'Alice';
const count = 3;

const text = `用户 ${user} 有 ${count} 条未读消息`;

上面这个例子里有 2 个动态值。如果用普通字符串拼接，需要至少 5 段字符串和 4 个 +，维护时更容易漏空格、漏标点。模板字符串不是性能魔法，它主要降低维护成本。

二、`${}` 里放的是表达式，不只是变量名

${} 中可以放变量、运算、函数调用、三元表达式等表达式。它会先求值，再把结果转换成字符串并拼入最终文本。因此面试时不能把模板字符串理解成简单的“变量替换语法”。

const price = 99;
const discount = 0.8;

console.log(`折后价：${price * discount}`);
console.log(`状态：${price > 50 ? '高价' : '低价'}`);

但表达式不宜写得过重。如果 ${} 里出现 4 层嵌套或复杂业务判断，字符串会变成难维护的模板逻辑。更好的做法是先把业务值算好，再放进模板。

三、多行文本保留换行，也会保留缩进

模板字符串天然支持多行文本。这对生成 HTML 片段、日志、GraphQL 查询、SQL 片段很方便。需要注意的是：你在源码里写下的换行和空格，很多情况下都会成为字符串的一部分。

const html = `
  <section>
    <h2>Title</h2>
  </section>
`;

这个字符串开头有 1 个换行，内部每行还带缩进。如果把它用于精确比较、签名计算或协议报文，额外空白可能导致结果不同。例如长度可能不是肉眼看到的 38，而是包含换行与空格后的更大数值。

四、标签模板让函数接管字符串处理

标签模板的写法是 tag\hello ${name}“。这里不是先拼完字符串再传给函数，而是把静态片段数组和表达式值分别传入标签函数。这让函数可以做转义、国际化、SQL 参数化、样式处理等工作。

function tag(strings, ...values) {
  console.log(strings);
  console.log(values);
}

tag`a=${1}, b=${2}`;
// strings: ["a=", ", b=", ""]
// values: [1, 2]

流程可以理解为：

源码模板
  -> 拆成静态字符串片段
  -> 计算每个表达式
  -> 调用 tag(strings, ...values)
  -> 返回标签函数的结果

标签函数返回值不一定是字符串。它可以返回对象、数组，甚至返回一个渲染函数。

五、模板字符串不是安全边界

很多同学会误以为用了模板字符串就更安全。事实上模板字符串只是语法，它不会自动转义 HTML，也不会阻止脚本注入。如果用户输入直接拼进 HTML，再通过 innerHTML 渲染，风险依然存在。

场景	是否安全	原因
`textContent = \`${name}“	较安全	浏览器按文本处理
`innerHTML = \`${name}“	有风险	用户输入会进入 HTML 解析
标签模板统一 escape	取决于实现	安全性来自标签函数，不来自语法

记住：模板字符串负责“好写”，安全来自上下文转义和可信边界，不来自反引号。

六、常见误区与追问

误区：模板字符串一定比字符串拼接性能好。 大多数业务场景差异很小，选择它主要是为了可读性；热点循环里仍应以真实性能测试为准。
误区：${} 只能写变量。 里面可以写表达式，但复杂逻辑应提前计算，避免模板变成业务代码。
误区：多行模板不会包含源码缩进。 换行和空格通常会进入字符串，做精确比较或协议拼接时要特别小心。
追问：标签模板和普通函数调用有什么区别？ 标签模板拿到的是静态字符串片段和表达式值的分离结构，可以在拼接前做转义、参数化或转换。
追问：模板字符串能不能防 XSS？ 不能；只有在正确上下文中转义，或使用安全的标签函数，才可能降低注入风险。
追问：为什么标签模板适合做 SQL 参数化？ 因为静态 SQL 片段和值是分开的，库可以把值作为参数绑定，而不是直接拼进 SQL 文本。

七、加强记忆

把模板字符串记成三层能力：第一层是反引号带来的多行文本，第二层是 ${} 带来的表达式插值，第三层是标签模板带来的可编程处理。回答时先说可读性，再说多行和表达式，最后补一句安全边界：反引号不负责转义，真正的安全要看输出上下文和标签函数实现。

简化版

详细版