标签模板是JavaScript中通过函数自定义处理模板字符串的机制，语法为函数名后接模板字符串，函数接收静态文本数组和表达式值数组，可实现HTML安全输出、国际化、SQL构造等场景，结合raw属性还能获取原始字符串内容。
。标签模板字面量是 JavaScript ES6 中引入的一种强大功能，它允许你使用函数来处理模板字符串。与普通模板字符串不同，标签模板让你能自定义字符串的解析方式，适用于构建安全的 HTML 输出、国际化、格式化 SQL 查询等场景。
什么是标签模板？
标签模板的语法是在模板字符串前添加一个函数名作为“标签”。这个函数会接收模板的字符串部分和表达式插值，并返回你想要的结果。
基本结构如下：
function myTag(strings, ...values) {
// strings: 模板中静态文本的数组
// values: 插入表达式的值数组
return "处理后的结果";
}
const result = myTag`Hello ${name}, you are ${age} years old.`;
在这个例子中，strings 是 ["Hello ", ", you are ", " years old."]，而 values 包含 name 和 age 的实际值。
标签函数的工作机制
标签函数的第一个参数是一个只读数组，包含模板中的原始字符串片段。后续参数是各个表达式求值后的结果。你也可以使用剩余参数（...values）来接收所有表达式值。
示例：实现一个简单的高亮标签
function highlight(strings, ...values) {
let result = '';
strings.forEach((str, i) => {
result += str;
if (i
result += `${values[i]}`;
}
});
return result;
}
const name = "Alice";
const age = 30;
const output = highlight`Hello ${name}, you are ${age} years old.`;
// 输出: Hello Alice, you are 30 years old.
实用应用场景
标签模板不只是语法糖，它在实际开发中有多种用途：
- 防止 XSS 攻击：通过转义用户输入，在生成 HTML 时避免注入风险。
- 国际化（i18n）：根据语言环境选择合适的翻译并插入变量。
- SQL 查询构造：安全地拼接查询语句，配合参数绑定防止注入。
- 样式化输出：如 styled-components 库就是基于标签模板实现 CSS-in-JS。
raw 属性：访问原始字符串
标签函数接收到的 strings 对象还有一个 raw 属性，可以获取模板中的原始字符（例如反斜杠不会被转义）。
function showRaw(strings) {
console.log("Normal:", strings[0]);
console.log("Raw:", strings.raw[0]);
}
showRaw`First line\nSecond line`;
// Normal: 第一行后换行
// Raw: First line\\nSecond line
这个特性在需要精确控制字符串内容时非常有用，比如写代码生成工具或解析器。
基本上就这些。掌握标签模板字面量，能让你更灵活地处理字符串，写出更具表现力和安全性的代码。理解其参数结构和执行逻辑是关键。不复杂但容易忽略细节。
