标签模板字面量是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 实际调用的是:
立即学习“Java免费学习笔记(深入)”;
myTag(['a', 'b', 'c'], 1, 2)
也就是说,标签函数的第一个参数是字符串数组(不含插值),后续参数依次对应每个 ${...} 的值。
你可以在这个函数里做任何事:转义 HTML、格式化日期、检查 SQL 注入、翻译多语言文本、生成 CSS 类名……
它带来哪些实际能力提升?
-
安全的字符串插值:比如
html`可在标签函数里自动转义 HTML 特殊字符,避免 XSS${userInput}` -
静态分析友好:像
graphql`query { user(id: ${id}) { name } }`这类工具能提前检查语法或类型,因为字符串结构在运行前就确定了 -
构建领域专用语法:例如 styled-components 中的
css`color: ${props => props.color};`,把样式逻辑和 JS 变量自然融合 - 惰性求值与上下文感知:标签函数可以决定是否真正计算某个插值,甚至根据前面的内容改变后面插值的行为
一个小但关键的细节
标签函数接收到的字符串数组有一个隐藏属性 .raw,它保存原始未转义的字符串(比如 `\n` 在 .raw 里就是两个字符 \ 和 n),这对实现源码转换、正则处理或模板编译特别有用。
不复杂但容易忽略。











