JavaScript模板字面量是ES6引入的用反引号包裹的字符串语法,支持变量插值、多行书写、任意表达式嵌入及标签函数高级功能,提升可读性与安全性。

JavaScript模板字面量(Template Literal)是ES6引入的一种用反引号(`)包裹的字符串语法,它让字符串拼接更直观、更灵活,尤其适合嵌入变量和表达式。
支持变量插值,不用加号或concat
传统字符串拼接需要反复用+连接,容易出错且难读。模板字面量直接用${}插入变量或表达式,JS自动求值并转为字符串。
-
旧写法:
"Hello " + name + ", you are " + age + " years old." -
新写法:
`Hello ${name}, you are ${age} years old.`
可跨行书写,无需换行符转义
反引号内的字符串天然支持多行,缩进和换行符都会被保留,适合写HTML片段或长提示文本。
-
旧写法(需手动加
\n和+):"" -
新写法(清晰自然):
`\n`${title}
\n${content}
\n
支持嵌入任意表达式,不止是变量
${}里可以放函数调用、三元运算、甚至简单逻辑,不用提前计算再拼接。
`Price: $${(price * (1 - discount)).toFixed(2)}``Status: ${isActive ? 'Online' : 'Offline'}``Length: ${text?.length || 0}`
可配合标签函数实现高级功能
在反引号前加一个函数名(如html`...`),就能拦截模板内容,做转义、国际化、SQL防注入等处理——这是普通字符串做不到的。
-
safeHtml`(自动过滤危险属性)Click` -
css`color: ${primaryColor}; font-size: ${size}px;`(编译为样式对象)
基本上就这些。模板字面量不复杂但容易忽略它的表达力——从拼接字符串开始,它就在帮你少写bug、多写可读代码。











