当前位置：首页 > 文章列表 > 文章 > 前端 > javascript的模板字面量是什么_它们比字符串连接更好吗

javascript的模板字面量是什么_它们比字符串连接更好吗

2026-05-02 18:48:31 0浏览收藏

亲爱的编程学习爱好者，如果你点开了这篇文章，说明你对《javascript的模板字面量是什么_它们比字符串连接更好吗》很感兴趣。本篇文章就来给大家详细解析一下，主要介绍一下，希望所有认真读完的童鞋们，都有实质性的提高。

模板字面量是JavaScript原生支持的反引号包裹字符串，支持${expression}变量插值、多行文本及标签函数；它非语法糖升级版，核心优势在于可读性、维护性及扩展能力远超+拼接。

模板字面量就是带 ` 的字符串，支持变量插值和多行

它不是语法糖的“升级版”，而是 JavaScript 原生支持的字符串字面量类型，用反引号 ` 包裹。最核心的能力是：${expression} 语法可直接嵌入变量、表达式甚至函数调用，不用拼接 +。

比如：

`Hello ${name}, you have ${items.length} new messages.`

比 'Hello ' + name + ', you have ' + items.length + ' new messages.' 更易读，也更少出错。

`template literal` 在嵌套对象或函数调用时不会自动 toString()

这是容易踩坑的地方：如果插值表达式返回 undefined、null 或对象，默认会调用 .toString()，但结果可能不符合预期。

${null} → 字符串 "null"（不是空字符串）
${{a:1}} → "[object Object]"，不是 JSON
${arr.map(x => x * 2)} → 自动调用 Array.prototype.toString()，等价于 arr.map(...).join(",")，不是你想要的 JSON 格式

需要显式处理：

`User: ${user?.name || 'Anonymous'}, score: ${Math.round(score)}`

模板字面量支持多行和标签函数，普通字符串连接做不到

反引号内的换行会被保留，不需要 \n 或 + 拼接；更重要的是，它可以被“标签函数”拦截处理——这是字符串连接完全不具备的能力。

多行示例：
```
`Line 1
Line 2
  Indented`
```

标签函数示例（如防 XSS、SQL 转义）：

function sql(strings, ...values) {
  return strings[0] + values.map((v, i) => escape(v) + strings[i+1]).join('');
}
sql`SELECT * FROM users WHERE id = ${userId}`;

这种能力让模板字面量在构建动态 SQL、HTML 片段、国际化文案时远超 + 连接。