JavaScript 模板字符串(template strings)是一种使用反引号定义字符串的新语法,但它并非全新数据类型,其本质依然是原始string。它最大的优势是极大简化了动态字符串的构建过程,从此告别繁琐的+拼接操作。

用反引号定义,本质仍是原始字符串
模板字符串由一对反引号`包裹,例如`hello ${name}`。运行时会被求值为标准的原始字符串(primitive string),typeof返回"string",与'hello'或"world"完全一致。它不会创建新对象,也不继承额外方法,仅是一种语法糖,内容仍是原本的字符串。
- 并非构造函数,因此不能通过
new String()或String.raw直接生成模板字符串。 - 所有字符串方法(如
.split()、.includes())均可直接调用。 - 自动装箱行为与普通字符串完全相同:临时包装为 String 对象后再调用方法。
支持插值表达式,${} 内仅限表达式
模板字符串允许在${...}中嵌入任意合法 JavaScript 表达式,执行结果会自动转为字符串并拼接进去。注意,此处只能使用表达式,不能使用语句。
- 变量:
${userName} - 运算:
${price * taxRate} - 函数调用:
${getFormattedDate()} - 三元判断:
${isActive ? 'online' : 'offline'} - 可选链与空值合并:
${user?.profile?.name ?? 'Guest'} - 禁止写入语句(如
if、for、let)或函数声明——记住,这里是求值运算,而非控制流程。
天然支持多行字符串,保留空白与缩进
换行符、制表符、空格都会被原样保留在最终字符串中,从此无需\n或+拼接。该特性特别适合生成 HTML、CSS、SQL 等结构化文本。
- 缩进会影响输出内容,编写时需注意缩进层级是否符合预期。
- 若需去除首尾换行或缩进,可直接使用
String#trim()或借助标签函数处理。
可嵌套使用,也支持标签函数扩展
一个模板字符串内部可以包含另一个模板字符串,实现逻辑分层;同时还能配合自定义标签函数,对插值前的原始字符串和值进行预处理。
- 嵌套示例:
`Price: ${`$${(base * 1.1).toFixed(2)}`}` - 标签函数示例:
safeHTML`(转义逻辑需自行实现)${userInput}
` - 常见标签函数包括
String.raw(禁用转义),以及用于国际化、SQL 参数化等场景的自定义标签。
