JavaScript标签模板_字符串处理高级用法-js教程-PHP中文网

JavaScript标签模板_字符串处理高级用法

幻影之瞳

发布： 2025-11-18 17:11:49

原创

973人浏览过

标签模板是JavaScript中通过函数自定义模板字符串解析的方式，语法为函数名后接模板字符串。函数接收字符串片段数组和变量值数组，可实现HTML转义、国际化、样式化输出等场景。例如htmlEscape函数能防止XSS攻击，通过处理strings和values参数返回安全字符串。还可访问原始字符串内容，如利用strings.raw保留转义字符，适用于代码生成或DSL解析。高级用法支持嵌套与链式调用，如highlight函数返回新函数实现控制台彩色输出，提升字符串处理的安全性与灵活性。

javascript标签模板_字符串处理高级用法

JavaScript 的标签模板（Tagged Templates）是字符串处理的一种高级用法，它让开发者可以自定义模板字符串的解析方式。通过在模板字符串前添加一个函数作为“标签”，你可以拦截并处理字符串中嵌入的表达式和原始值，实现更灵活的字符串操作。

什么是标签模板？

标签模板的语法是在模板字符串前加一个函数名：

上面代码中，strings 是一个数组，包含 ['Hello ', ', you are ', ' years old.']，而 values 是 ['Alice', 30]。函数可以根据这些参数进行任意处理并返回结果。

常见应用场景

标签模板不只是拼接字符串，它可以用于多种实际场景：

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

HTML 转义：防止 XSS 攻击，自动对用户输入进行编码
国际化（i18n）：根据语言环境选择合适的翻译文本
样式化输出：如在控制台打印带颜色的文本（结合 chalk 等库）
SQL 查询构建：安全地插入参数，避免 SQL 注入

例如，一个简单的 HTML 转义标签：

动态WEB网站中的PHP和MySQL：直观的QuickPro指南第2版

动态WEB网站中的PHP和MySQL详细反映实际程序的需求，仔细地探讨外部数据的验证(例如信用卡卡号的格式)、用户登录以及如何使用模板建立网页的标准外观。动态WEB网站中的PHP和MySQL的内容不仅仅是这些。书中还提到如何串联JavaScript与PHP让用户操作时更快、更方便。还有正确处理用户输入错误的方法，让网站看起来更专业。另外还引入大量来自PEAR外挂函数库的强大功能，对常用的、强大的包

508

查看详情

function htmlEscape(strings, ...values) {
  let result = '';
  strings.forEach((str, i) => {
    result += str;
    if (i < values.length) {
      const escaped = String(values[i])
        .replace(/&/g, '&')
        .replace(/</g, '        .replace(/>/g, '>');
      result += escaped;
    }
  });
  return result;
}

const userInput = '<script>alert("xss")</script>';
htmlEscape`<p>${userInput}</p>`; // 输出安全的 HTML

访问原始字符串内容

标签函数的第一个参数除了提供处理后的字符串片段外，还可以获取原始的字面量（包括转义字符）：

function showRaw(strings) {
console.log('Processed:', strings);
console.log('Raw:', strings.raw);
}

showRaw`Line1 Line2`; // raw[0] 会是 "Line1\nLine2"

这在需要分析或转换模板字面量本身时非常有用，比如构建代码生成工具或 DSL 解析器。

高级技巧：嵌套与链式处理

你可以将标签函数设计成返回另一个函数，从而支持链式调用或条件处理：

function highlight(color) {
  return function (strings, ...values) {
    let result = '';
    strings.forEach((str, i) => {
      result += str;
      if (i in values) {
        result += `%c${values[i]}%c`;
      }
    });
    console.log(result, `color: ${color}`, '');
  };
}

const name = 'Bob';
highlight('red')`Hello ${name}!`; // 控制台中名字显示为红色

基本上就这些。标签模板提供了超越普通字符串拼接的能力，合理使用能让代码更安全、更具表现力。掌握它，你就掌握了 JavaScript 字符串处理的进阶技能。

以上就是JavaScript标签模板_字符串处理高级用法的详细内容，更多请关注php中文网其它相关文章！