JavaScript中的标签模板字面量（Tagged Templates）有哪些高级用法？-js教程-PHP中文网

JavaScript中的标签模板字面量（Tagged Templates）有哪些高级用法？

幻影之瞳

发布： 2025-09-29 17:06:02

原创

633人浏览过

标签模板通过自定义函数实现复杂逻辑，如html函数转义防止XSS，css函数生成唯一类名封装样式，结合哈希值隔离组件样式，确保安全与模块化。

javascript中的标签模板字面量（tagged templates）有哪些高级用法？

标签模板字面量不只是字符串拼接工具，它能结合函数实现更复杂的逻辑处理。通过自定义标签函数，你可以解析模板中的表达式和静态部分，从而实现如国际化、样式封装、安全转义等高级功能。

1. 实现安全的HTML转义

在动态生成HTML时，直接拼接用户输入可能导致XSS攻击。使用标签模板可以自动转义变量内容。

定义一个html标签函数，对插值内容进行实体编码：

function html(strings, ...values) {
  const escape = (str) =>
    String(str).replace(/[&"']/g, match =>
      ({ '&': '&', '': '>', '"': '"', "'": ''' }[match]));
  let result = '';
  strings.forEach((str, i) => {
    result += str;
    if (i   });
  return result;
}

const name = '<script>alert("xss")</script>';
const output = html`Hello, ${name}!`; // Hello, <script>alert("xss")</script>!

2. 构建CSS-in-JS样式系统

React生态中许多库利用标签模板来定义组件样式。你可以创建一个css标签，将模板转换为唯一的类名或注入样式规则。

立即学习“Java免费学习笔记（深入）”；

简单示例：生成带前缀的类名并收集样式规则

const cssRules = [];
function css(strings, ...values) {
  const styleText = strings.map((s, i) => s + (values[i] || '')).join('');
  const className = 'style_' + hashCode(styleText);
  cssRules.push({ className, styleText });
  return className;
}

function hashCode(str) {
  let hash = 0;
  for (let i = 0; i     hash = ((hash   }
  return Math.abs(hash).toString(36);
}

const primaryColor = 'blue';
const buttonStyle = css`color: ${primaryColor}; padding: 10px;`;