JavaScript中的模板字面量是什么_它如何简化字符串的拼接呢

模板字面量是javaScript中用反引号包裹的字符串，支持变量插值（${expression}）、多行书写及标签函数，提升可读性、安全性与灵活性。

模板字面量（Template Literals）是 javascript 中用反引号 ` 包裹的字符串，它支持嵌入表达式、多行书写和字符串插值，让字符串拼接更直观、更安全、更灵活。

支持变量插值，告别加号拼接

传统字符串拼接容易出错，尤其是混用引号和变量时；模板字面量用 ${expression} 直接插入变量或表达式，可读性大幅提升。

• 以前："Hello " + name + ", you're " + age + " years old."
• 现在：`Hello ${name}, you're ${age} years old.`
• 还能放表达式：`Next year: ${age + 1}` 或 `Status: ${isActive ? 'online' : 'offline'}`

天然支持多行字符串

不用再靠 + 或 n 拼接换行——换行符直接保留在字符串中，缩进也原样保留（注意空格会显示出来）。

• 例如：

  `Line one<br>Line two<br>  Indented line`

  会按实际换行和空格渲染

• 适合写 html 片段、sql 查询、长提示文案等

可与标签函数配合实现高级功能

在反引号前加一个函数名（如 html`<div>${text}</div>`），就能让该函数接收模板解析后的字符串数组和插值结果，用于自动转义、国际化、语法高亮等。

Hugging Face

Hugging Face AI开源社区

270

查看详情

立即学习“Java免费学习笔记（深入）”；

• 常见用途：防止 xss 的安全 HTML 构建器、带样式的控制台输出、本地化翻译
• 函数第一个参数是字符串片段数组，后续参数是每个 ${...} 的值

基本上就这些。模板字面量不是语法糖那么简单，它改变了我们组织动态文本的方式——更贴近自然语言逻辑，也更少出错。