JavaScript中的模板字面量是用反引号包围的字符串，可以嵌入表达式并且支持多行。标签函数则是写在模板字面量前面的函数，用来接收字符串片段和表达式值并进行自定义处理。理解它们能让你更灵活地控制字符串生成过程。
什么是模板字面量
模板字面量使用反引号`定义，在${}中放入任意表达式。相比普通字符串，它不需要用加号拼接，也不会因为换行而报错。
const name = '小明';
const age = 18;
// 模板字面量嵌入变量和多行
const info = `姓名：${name}
年龄：${age}`;
console.log(info);
标签函数如何工作
标签函数紧跟在模板字面量前面，例如tag`text`。调用时，引擎会把字符串拆成数组作为第一个参数，后续参数依次对应每个${}表达式的值。
基础示例
function tag(strings, ...values) {
// strings是字符串数组，values是表达式结果数组
let result = '';
strings.forEach((str, i) => {
result += str + (values[i] !== undefined ? values[i] : '');
});
return result;
}
const a = 10;
const b = 20;
const out = tag`计算：${a} 加 ${b} 等于 ${a + b}`;
console.log(out);
常见用途
- 安全转义：防止用户输入造成HTML注入
- 国际化：根据语言环境替换文本
- 格式化：对数字、日期做统一处理
两者配合使用
把模板字面量和标签函数结合，可以在字符串组装前拦截数据。下面示例做一个简单的HTML转义标签：
function safe(strings, ...values) {
const escape = (s) => String(s).replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');
return strings.reduce((acc, str, i) => acc + str + (values[i] !== undefined ? escape(values[i]) : ''), '');
}
const userInput = '<script>alert(1)</script>';
const html = safe`<div>${userInput}</div>`;
console.log(html);
使用注意点
| 场景 | 说明 |
|---|---|
| 空表达式 | 如果${}为空，对应values项为undefined |
| 原始字符串 | 标签函数第一个参数有raw属性，存原始内容 |
| 返回值 | 标签函数返回什么，表达式结果就是什么 |
模板字面量让字符串书写更自然，标签函数则赋予你干预字符串生成的能力。在需要处理动态内容或提升安全性的场景中，组合使用它们是非常实用的做法。
JavaScript模板字面量标签函数修改时间：2026-07-26 07:36:19