模板字符串是支持多行、嵌入表达式、无需转义的字符串字面量,用反引号定义,${...}中可放任意表达式但非语句,天然支持换行但需注意缩进,结合标签函数可扩展功能。

JavaScript 模板字符串不是“更高级的字符串拼接”,而是支持多行、嵌入表达式、无需转义的字符串字面量——它解决的是传统字符串在可读性、维护性和表达能力上的硬伤。
模板字符串用 `(反引号)而不是 ' 或 "
这是最基础但最容易忽略的点:写成 "Hello ${name}" 不会生效,必须是 `Hello ${name}`。浏览器或 Node.js 遇到单双引号里的 ${...} 会当作普通文本,不会解析为插值。
- ✅ 正确:
`Hello ${user.name}` - ❌ 错误:
"Hello ${user.name}"(输出就是字面量Hello ${user.name}) - ⚠️ 注意:
`在英文键盘是 Esc 下方、Tab 上方那个键,不是单引号
${...} 里可以放任意 JavaScript 表达式,不只是变量
它不是“变量占位符”,而是运行时求值的表达式容器。这意味着你可以直接调用函数、做运算、访问属性链,甚至写三元表达式。
-
`Price: $${(price * 1.1).toFixed(2)}`—— 计算 + 格式化一步到位 -
`Status: ${isActive ? 'Online' : 'Offline'}`—— 内联条件逻辑 -
`ID: ${data?.id ?? 'unknown'}`—— 支持可选链和空值合并 - ⚠️ 注意:不能放语句(如
if、for),只接受表达式
多行字符串天然支持,但缩进会原样保留
换行符会被保留在最终字符串中,所以直接写会多出大量空格和制表符,影响 JSON 输出或 DOM 渲染。
立即学习“Java免费学习笔记(深入)”;
- ✅ 清晰写法:
`Line 1 Line 2 Line 3`
- ⚠️ 常见坑:
const html = `
——开头换行和缩进都会变成字符串的一部分`;Hello
- ? 补救方式:用
.trim()或模板字符串内手动换行+字符串连接,例如:`` + ``Hello
` + `
标签函数让模板字符串具备“处理逻辑”的能力
模板字符串本身只是语法糖,但加上前缀函数(如 html`...`、sql`...`),就能实现自动转义、语法校验、甚至编译优化。
- 常见用例:
String.raw`C:\temp\notes.txt`—— 避免反斜杠被解释为转义 - 自定义标签示例:
function upper(strings, ...values) { return strings[0] + values.map(v => String(v).toUpperCase()).join('') + strings[1]; } upper`hello ${'world'}`; // → "hello WORLD" - ⚠️ 注意:标签函数第一个参数是字符串数组(静态部分),后续才是插值结果;不要漏掉对
strings的处理
真正容易被忽略的是嵌套模板字符串的可读性——当 ${...} 里又出现模板字符串时,反引号层级一多,眼睛就容易看错边界。这时候宁可拆成变量,也别硬塞三层 `...${`...${...}`...}`...。











