标签模板字面量是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`<div>${userInput}</div>`可在标签函数里自动转义 HTML 特殊字符，避免 XSS -
静态分析友好：像
graphql`query { user(id: ${id}) { name } }`这类工具能提前检查语法或类型，因为字符串结构在运行前就确定了 -
构建领域专用语法：例如 styled-components 中的
css`color: ${props => props.color};`，把样式逻辑和 JS 变量自然融合 - 惰性求值与上下文感知：标签函数可以决定是否真正计算某个插值，甚至根据前面的内容改变后面插值的行为
一个小但关键的细节
标签函数接收到的字符串数组有一个隐藏属性 .raw，它保存原始未转义的字符串（比如 `\n` 在 .raw 里就是两个字符 \ 和 n），这对实现源码转换、正则处理或模板编译特别有用。
不复杂但容易忽略。
