17370845950

标签模板字面量是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 实体转义：

• 遍历 values，对每个值调用 escapeHTML(value)
• 再按顺序拼接 strings 和转义后的值
• 避免直接拼接用户输入到 HTML 中

例如：safeHTML`${userInput}` 可返回已转义的字符串，而不是执行任意 HTML。

多语言（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 的入口。