JavaScript模板字面量是什么？如何简化字符串拼接？

JavaScript模板字面量是以反引号（`）定义的现代化字符串语法，它通过${expression}实现直观安全的变量插值、天然支持多行文本（保留换行与空格），并可结合标签函数拓展出HTML转义、国际化、语法高亮等高级能力——彻底告别易错的加号拼接和繁琐的转义处理，让动态字符串编写更贴近自然语言逻辑、更简洁可靠。

模板字面量（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
Line two
Indented line` 会按实际换行和空格渲染
• 适合写 HTML 片段、SQL 查询、长提示文案等

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

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

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

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

到这里，我们也就讲完了《JavaScript模板字面量是什么？如何简化字符串拼接？》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！