标签模板字符串是JavaScript ES6引入的模板字符串的进阶用法，它允许我们把模板字符串和一个函数结合使用，让函数可以接收模板字符串的各个部分作为参数进行处理，实现更灵活的字符串操作逻辑。
标签模板字符串的基本结构
标签模板字符串的写法是把一个函数名放在模板字符串的前面，函数名就是所谓的标签，模板字符串的内容会作为函数的输入参数被处理。基本结构如下：
// 定义标签函数
function tagFunction() {
console.log(arguments);
}
// 使用标签模板字符串
const name = '张三';
const age = 20;
tagFunction`我叫${name}，今年${age}岁`;
这里tagFunction就是标签，后面的模板字符串是它的输入，执行这段代码后，标签函数会接收到拆分后的参数。
标签函数的参数规则
标签函数的第一个参数是一个数组，包含模板字符串中所有没有被变量替换的静态文本部分，后面的参数依次是模板字符串中每个插入的表达式的值。我们可以通过下面的例子来验证这个规则：
function printArgs(strings, ...values) {
console.log('静态文本数组:', strings);
console.log('表达式值:', values);
}
const a = 10;
const b = 20;
printArgs`第一个数：${a}，第二个数：${b}，总和是${a + b}`;
执行上面的代码，控制台会输出：
静态文本数组: ["第一个数：", "，第二个数：", "，总和是", ""] 表达式值: [10, 20, 30]
可以看到静态文本数组的长度永远比表达式值的数量多1，最后一个静态文本是模板字符串末尾的空字符串，如果模板字符串末尾没有内容，就会是空字符串。
自定义标签函数的实现
我们可以根据自己的需求实现标签函数，比如实现一个把模板里的表达式值都乘以2的标签函数：
function doubleValue(strings, ...values) {
let result = '';
for (let i = 0; i < strings.length; i++) {
result += strings[i];
if (i < values.length) {
// 如果是数字就乘以2，否则原样拼接
result += typeof values[i] === 'number' ? values[i] * 2 : values[i];
}
}
return result;
}
const num1 = 5;
const num2 = 8;
const str = doubleValue`数字一：${num1}，数字二：${num2}`;
console.log(str); // 输出：数字一：10，数字二：16
常见应用场景
1. 防止XSS攻击的HTML转义
在处理用户输入的内容拼接HTML时，可以使用标签模板字符串自动转义特殊字符，避免XSS风险：
function safeHtml(strings, ...values) {
const escape = (str) => {
return String(str)
.replace(/&/g, '&')
.replace(/</g, '<')
.replace(/>/g, '>')
.replace(/"/g, '"')
.replace(/'/g, ''');
};
let result = '';
for (let i = 0; i < strings.length; i++) {
result += strings[i];
if (i < values.length) {
result += escape(values[i]);
}
}
return result;
}
const userInput = '<script>alert("恶意代码")</script>';
const html = safeHtml`${userInput}`;
console.log(html); // 输出：<div><script>alert("恶意代码")</script></div>
2. 国际化字符串处理
可以实现根据当前语言环境替换模板中的占位符的标签函数：
const i18nMap = {
zh: { hello: '你好', name: '姓名' },
en: { hello: 'Hello', name: 'Name' }
};
let currentLang = 'zh';
function i18n(strings, ...keys) {
let result = '';
for (let i = 0; i < strings.length; i++) {
result += strings[i];
if (i < keys.length) {
result += i18nMap[currentLang][keys[i]] || keys[i];
}
}
return result;
}
const userName = '李四';
console.log(i18n`${'hello'}，你的${'name'}是${userName}`);
// 当前语言是zh时输出：你好，你的姓名是李四
currentLang = 'en';
console.log(i18n`${'hello'}，你的${'name'}是${userName}`);
// 输出：Hello，你的Name是李四
注意事项
- 标签函数的第一个参数数组有一个
raw属性，里面保存的是模板字符串的原始字符串，也就是没有处理转义字符的内容，比如n会保持为两个字符而不是换行符。 - 标签模板字符串中的表达式可以是任何有效的JavaScript表达式，包括函数调用、运算式等。
- 标签函数的返回值没有限制，可以是字符串，也可以是其他任意类型，根据实际需求决定。
JavaScript标签模板字符串模板字符串函数调用修改时间：2026-06-18 18:36:35