模板字面量是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
会按实际换行和空格渲染
Line two
Indented line` - 适合写 HTML 片段、SQL 查询、长提示文案等
可与标签函数配合实现高级功能
在反引号前加一个函数名(如 html`),就能让该函数接收模板解析后的字符串数组和插值结果,用于自动转义、国际化、语法高亮等。
立即学习“Java免费学习笔记(深入)”;
- 常见用途:防止 XSS 的安全 HTML 构建器、带样式的控制台输出、本地化翻译
- 函数第一个参数是字符串片段数组,后续参数是每个
${...}的值
基本上就这些。模板字面量不是语法糖那么简单,它改变了我们组织动态文本的方式——更贴近自然语言逻辑,也更少出错。










