带标签的模板字面量是JavaScript高级特性，通过函数拦截模板字符串解析，接收静态字符串数组和动态插值值，支持安全转义、i18n、CSS封装等；基础写法为fnhello ${name}。
JavaScript 模板字符串本身不支持“模板字符串标签”这种独立语法，但你提到的其实是带标签的模板字面量（Tagged Template Literals）——这是模板字符串的一个高级特性，允许你用函数“拦截”模板字符串的解析过程，实现动态处理、安全转义、国际化、样式封装等能力。
什么是标签模板？基础写法长啥样
标签模板就是在模板字符串前加一个函数名，不带括号，形如 fn`hello ${name}`。JS 会把模板拆解为静态字符串数组和动态插值表达式，再一起传给函数：
- 第一个参数是字符串字面量组成的数组，比如
`a${1}b${2}c`→["a", "b", "c"] - 后续参数依次是每个插值表达式的值，即
1, 2 - 函数内部可对这些参数做任意处理，最后返回任意类型（常为字符串或对象）
常见高级用法：安全 HTML 渲染与转义
直接拼接用户输入易导致 XSS。用标签函数自动转义插值内容，就能兼顾可读性与安全性：
示例：简易 HTML 转义标签function html(strings, ...values) {
return strings.reduce((acc, str, i) => {
const val = values[i] ?? '';
const escaped = typeof val === 'string'
? val.replace(/[&<>"']/g, c => ({ '&': '&', '<': '<', '>': '>', '"': '"', "'": ''' }[c]))
: String(val);
return acc + str + escaped;
}, '');
}
const user = '<script>alert(1)</script>';
document.innerHTML = html`<div>Hello ${user}!</div>`; // 安全渲染，不会执行脚本
进阶技巧：多语言（i18n）与样式绑定
标签函数可以结合上下文做运行时翻译或 CSS 处理：
立即学习“Java免费学习笔记（深入）”；
-
i18n 标签：根据当前 locale 查找 key 对应的翻译，支持插值占位符替换（如
msg`Welcome, ${name}!`） - CSS 标签（如 styled-components）：解析模板中的 CSS 规则，生成唯一 class 名，并注入 style 标签；插值部分可传入 props 动态计算样式
- GraphQL 标签（gql）：将模板字符串解析为 AST，校验语法、提取变量、支持片段复用
实用提示：调试与工具链集成
开发中容易忽略的细节：
- 注意
strings数组长度恒为values.length + 1，末尾无插值时最后一个元素为空字符串 - 可用
String.raw配合标签函数处理原始字符串（如正则、路径），避免转义干扰 - TypeScript 中可为标签函数添加泛型签名，精确约束返回类型和插值类型
- Babel / TypeScript 支持编译标签模板，但某些构建工具需显式配置插件（如
@babel/plugin-transform-tagged-template-literal）
