模板字符串使用反引号(`)，并添加普通字符串引号所缺少的两个功能：表达式的插值和多行字符串。
js
const name = "Ann";
const count = 3;
// interpolation: ${expression}
const msg = `Hi ${name}, you have ${count} new messages`;
// any expression works, not just variables
const total = `Total: ${(count * 1.1).toFixed(2)}`;
// multi-line — preserves the line breaks
html = ;
在模板字符串出现之前，你需要写 "Hi " + name + ", " + count + ... — 冗长而容易出错。插值的可读性要好得多。
带标签的模板 (高级)
放在反引号前的函数接收字符串部分和插值的值，使其能够处理它们：
js
function highlight(strings, ...values) {
return strings.reduce((out, s, i) =>
out + s + (values[i] ? `<b>${values[i]}</b>` : ""), "");
}
highlight`Hello ${name}!`; // "Hello <b>Ann</b>!"
这为 styled-components 等库以及安全的 SQL/HTML 转义助手提供了支持。
为什么这很重要
模板字符串是当今构建字符串的标准方式 — 可读性强的插值、轻松处理多行文本，以及用于 DSL 的钩子（带标签的模板）。