标签函数是前置在模板字符串上的函数，用于解析模板内容。它接收静态字符串数组和动态插入值，常用于HTML转义、国际化等场景。例如，myTag函数可分别获取静态部分和动态值；通过处理动态内容可实现XSS防护或格式化输出；还可构建轻量模板引擎，支持数值格式化与数组拼接，提升代码安全性与灵活性。
在JavaScript中，标签函数（Tagged Templates）是处理模板字符串的一种强大方式。它允许你通过自定义函数控制模板字符串的解析过程，常用于国际化、HTML转义、样式化输出等场景。
什么是标签函数
标签函数是一个前置在模板字符串上的函数，用来解析模板中的内容。它接收多个参数：一个包含静态字符串的数组，以及若干个动态插入值。
基本语法如下：
const result = tagFunction`Hello ${name}, you are ${age} years old.`;其中 tagFunction 就是标签函数，它会接收到模板的各个部分进行处理。
立即学习“Java免费学习笔记（深入）”；
标签函数的参数结构
标签函数的第一个参数是字符串数组，包含了模板中所有静态文本部分；后续参数是表达式插值的结果。最后一个参数是特殊的：剩余参数 可以捕获所有动态值。
示例说明：
YXPHP企业网站管理系统4.0
下载
支持静态模板,支持动态模板标签,支持图片.SWF.FLV系列广告标签.支持百万级海量数据,绑定内置URL伪装策略(URL后缀名随你怎么写)，绑定内置系统升级策略(暂不开放升级),绑定内置模板付费升级策略(暂不开放更新)。支持标签容错处理,绑定内置攻击防御策略,绑定内置服务器优化策略(系统内存释放的干干净净)。支持离线运行,支持次目录,兼容U主机。支持会员功能,支持文章版块权限阅读,支持会员自主注册
console.log('静态部分:', strings);
console.log('动态值:', values);
return '处理完成';
}
const name = 'Alice';
const age = 30;
myTag`Hello ${name}, you are ${age}!`;
// 输出：
// 静态部分: ["Hello ", ", you are ", "!"]
// 动态值: ["Alice", 30]
实际应用场景：HTML转义
防止XSS攻击时，可以直接用标签函数对动态内容做自动转义。
function htmlEscape(strings, ...values) {let result = '';
strings.forEach((str, i) => {
let value = values[i] || '';
result += str;
if (i result += String(value)
.replace(/&/g, '&')
.replace(/, 'zuojiankuohaophpcn')
.replace(/>/g, 'youjiankuohaophpcn')
.replace(/"/g, '"');
}
});
return result;
}
const userInput = '';
const output = htmlEscape`
用户输入：${userInput}
`;console.log(output); //
用户输入：zuojiankuohaophpcnscriptyoujiankuohaophpcn...
构建简单的模板引擎
利用标签函数可以实现轻量级模板处理逻辑，比如条件判断或格式化。
function template(strings, ...values) {return strings.map((str, i) => {
const val = values[i];
if (typeof val === 'number') {
return str + val.toFixed(2);
}
if (Array.isArray(val)) {
return str + val.join(', ');
}
return str + (val ?? '');
}).join('');
}
const price = 19.9;
const items = ['苹果', '香蕉'];
const msg = template`总价：${price}元，商品：${items}`;
console.log(msg); // 总价：19.90元，商品：苹果, 香蕉
基本上就这些。掌握标签函数后，你可以更灵活地处理字符串模板，提升代码安全性和可维护性。不复杂但容易忽略细节，比如参数顺序和边界情况。
