模板字符串 - JavaScript 教程

讲解

模板字符串用反引号（键盘左上角 1 左边那个键）包起来，是 ES6 最讨喜的语法之一。它解决了传统字符串拼接的三大痛点：一、插值——反引号里用 ${表达式} 直接嵌入任意表达式，不用再用 + 号切断字符串；二、多行——反引号里可以直接换行，不需要 \n 转义；三、表达式求值——插值位置放的是完整表达式，可以运算、调用函数、写三元。

插值里的表达式会在运行时求值并转成字符串：${user.name}、${price * count}、${isVip ? '会员' : '普通'} 都合法。模板字符串同样可以做嵌套（插值表达式里再写模板字符串），拼 HTML 片段、日志格式、SQL 参数化展示都很顺手。普通字符串里的转义规则在模板字符串里依然有效（\n、\t），反引号本身则要转义成 `。

模板字符串还有个进阶形态「标签模板」：tag... 不是调用括号而是把模板交给一个函数处理，函数的参数是字符串片段数组和各插值——styled-components、graphql 标签都基于此。日常开发极少需要自己写标签函数，了解原理即可。另外 String.raw... 是内置标签，保留原始反斜杠，写正则和 Windows 路径时有用。

示例

const user = { name: '小明', balance: 128.5 };

// 插值：任意表达式
console.log(`用户 ${user.name} 的余额是 ${user.balance.toFixed(2)} 元`);
console.log(`打八折后：${(user.balance * 0.8).toFixed(2)} 元`);
console.log(`状态：${user.balance > 100 ? '充裕' : '紧张'}`);

// 多行字符串
const html = `
<div class="card">
  <h2>${user.name}</h2>
  <p>余额：${user.balance}</p>
</div>`;
console.log(html);

// 嵌套模板
const items = ['苹果', '香蕉'];
const list = `共 ${items.length} 项：${items.map((it) => `[${it}]`).join(' ')}`;
console.log(list);

// String.raw 保留反斜杠
console.log(String.raw`路径 C:\Users\docs 和正则 \d+`);

常见坑

在普通引号里写 ${}：'${name}' 只是四个普通字符，插值只在反引号里生效——最常见的笔误。
多行字符串的缩进：模板里的换行和空格都原样保留，代码里为了对齐写的缩进会进字符串，必要时用 trim 或注意排版。
拼 SQL/HTML 的注入风险：模板字符串只是字符串拼接，直接把用户输入插进 SQL 或 HTML 有注入/XSS 风险，生产代码必须用参数化查询和转义。
类型转换：插值时对象会被 String() 转成 '[object Object]'，对象插值前自己取字段或 JSON.stringify。

小结

反引号 + ${} 取代字符串拼接，支持多行和任意表达式；String.raw 保留反斜杠。下一节学习两个现代集合类型：Map 与 Set。