17370845950

标签模板字面量是JavaScript中通过标签函数拦截模板字符串解析的机制，形式为myTagHello ${name}，接收字符串数组和插值结果作为参数，支持HTML转义、静态分析、DSL构建及惰性求值，并提供.raw属性获取原始字符串。

标签模板字面量（Tagged Template Literals）是 JavaScript 中一种特殊的模板字符串用法，它允许你用一个函数“拦截”模板字符串的解析过程，从而对字符串内容和插值表达式进行自定义处理。

它长什么样？

基本形式是：一个函数名紧挨着反引号包裹的模板字符串，中间不加括号也不加空格：

myTag`Hello ${name}, you have ${count} messages`

这里的 myTag 就是“标签函数”，它会收到两组参数：一组是字符串字面量（按插值位置分割的静态部分），另一组是所有插值表达式的计算结果。

它怎么工作？

当执行 myTag`a${1}b${2}c` 时，JavaScript 实际调用的是：

myTag(['a', 'b', 'c'], 1, 2)

也就是说，标签函数的第一个参数是字符串数组（不含插值），后续参数依次对应每个 ${...} 的值。

你可以在这个函数里做任何事：转义 HTML、格式化日期、检查 SQL 注入、翻译多语言文本、生成 CSS 类名……

它带来哪些实际能力提升？

• 安全的字符串插值：比如 html`${userInput}` 可在标签函数里自动转义 HTML 特殊字符，避免 XSS
• 静态分析友好：像 graphql`query { user(id: ${id}) { name } }` 这类工具能提前检查语法或类型，因为字符串结构在运行前就确定了
• 构建领域专用语法：例如 styled-components 中的 css`color: ${props => props.color};`，把样式逻辑和 JS 变量自然融合
• 惰性求值与上下文感知：标签函数可以决定是否真正计算某个插值，甚至根据前面的内容改变后面插值的行为

一个小但关键的细节

标签函数接收到的字符串数组有一个隐藏属性 .raw，它保存原始未转义的字符串（比如 `\n` 在 .raw 里就是两个字符 \ 和 n），这对实现源码转换、正则处理或模板编译特别有用。

不复杂但容易忽略。