标签模板字面量是JavaScript中可编程的字符串构造机制，通过函数拦截模板解析，支持XSS防护、i18n、CSS-in-JS等场景，将字符串生成权交予开发者。
标签模板字面量（Tagged Template Literals）是 JavaScript 中一种增强版的模板字符串用法，它允许你用一个函数“拦截”模板字符串的解析过程，从而实现自定义处理逻辑。它不是语法糖，而是一个可编程的字符串构造机制。
基础形式：函数 + 模板字符串
基本写法是把一个函数名写在反引号模板字符串前面，中间不加括号或逗号：
function myTag(strings, ...values) {
console.log(strings); // ['Hello ', '!', ' today is ']
console.log(values); // ['Alice', 'Monday']
}
myTag`Hello ${'Alice'}! today is ${'Monday'}`;
函数第一个参数是“静态字符串数组”，即所有插值位置之间的原始文本；后续参数是每个 ${...} 中表达式的求值结果。
防 XSS 和 HTML 转义
你可以写一个安全标签函数，自动对插值内容做 HTML 实体转义：
立即学习“Java免费学习笔记（深入）”；
- 遍历 values，对每个值调用
escapeHTML(value) - 再按顺序拼接 strings 和转义后的值
- 避免直接拼接用户输入到 HTML 中
例如：safeHTML` 可返回已转义的字符串，而不是执行任意 HTML。${userInput}`
多语言（i18n）与参数替换
结合语言包，标签函数能根据当前 locale 查找翻译，并支持占位符重排：
- 模板中写
locale`Welcome, ${name}! You have ${count} messages.` - 函数内部查表，比如中文可能变成
"欢迎，{name}！你有 {count} 条消息。" - 还能处理复数、性别等复杂规则（配合
Intl.PluralRules）
样式字符串与 CSS-in-JS
像 styled-components 就是靠标签模板字面量实现的：
const Button = styled.button`color: ${props => props.primary ? 'blue' : 'gray'};`- 标签函数接收字符串和函数式插值，动态生成唯一 class 名与对应 CSS
- 插值可以是函数、对象、甚至 Promise（配合异步样式）
它让样式声明既保持可读性，又具备运行时灵活性。
基本上就这些。标签模板字面量本身不难，关键是它把“字符串怎么生成”这件事交给了开发者——你控制解析、转义、替换、缓存、甚至编译。用得好，它不只是写字符串的语法，而是 DSL 的入口。
