JS模板字符串的标签模板到底怎么用？有哪些实战场景

JS模板字符串的标签模板是模板字符串的进阶特性，它允许我们在模板字符串前添加一个函数标签，让函数来处理模板字符串的各个部分，从而实现更灵活的字符串处理逻辑。

标签模板的基本工作原理

标签模板的语法是在模板字符串前直接加上一个函数名，这个函数会接收两部分参数：第一部分是模板字符串中所有静态文本组成的数组，第二部分是模板字符串中所有插值表达式的结果，按顺序传入。

下面是一个最基础的标签模板示例，帮助理解参数传递规则：

// 定义标签函数
function demoTag(strings, ...values) {
  console.log('静态文本数组:', strings);
  console.log('插值结果:', values);
  // 简单拼接返回结果
  let result = '';
  for (let i = 0; i < strings.length; i++) {
    result += strings[i];
    if (i < values.length) {
      result += values[i];
    }
  }
  return result;
}

const name = '张三';
const age = 25;
// 使用标签模板
const res = demoTag`用户姓名：${name}，年龄：${age}，今年刚满${age}岁`;
console.log('最终结果:', res);

上述代码中，strings数组会包含["用户姓名：", "，年龄：", "，今年刚满", "岁"]，values数组会包含["张三", 25, 25]，标签函数可以基于这些参数做任意处理后再返回结果。

标签模板的实战场景

1. 参数类型校验

在拼接SQL语句或者接口参数时，我们可以通过标签模板校验插值的类型，避免不符合要求的参数传入。

function validateNumber(strings, ...values) {
  const validatedValues = values.map((val, index) => {
    if (typeof val !== 'number') {
      throw new Error(`第${index + 1}个插值不是数字类型，当前值为${val}`);
    }
    return val;
  });
  // 拼接返回
  let result = '';
  for (let i = 0; i < strings.length; i++) {
    result += strings[i];
    if (i < validatedValues.length) {
      result += validatedValues[i];
    }
  }
  return result;
}

try {
  const width = 100;
  const height = '200'; // 错误类型
  const sizeStr = validateNumber`尺寸：宽${width}，高${height}`;
  console.log(sizeStr);
} catch (e) {
  console.error(e.message);
}

2. HTML字符串转义

当我们需要动态生成HTML内容时，直接拼接用户输入的内容可能会有XSS风险，通过标签模板可以自动转义特殊字符。

function safeHtml(strings, ...values) {
  // 转义HTML特殊字符的函数
  const escapeHtml = (str) => {
    if (typeof str !== 'string') {
      str = String(str);
    }
    return str.replace(/&/g, '&')
              .replace(/</g, '<')
              .replace(/>/g, '>')
              .replace(/"/g, '"')
              .replace(/'/g, ''');
  };
  let result = '';
  for (let i = 0; i < strings.length; i++) {
    result += strings[i];
    if (i < values.length) {
      // 对插值进行转义
      result += escapeHtml(values[i]);
    }
  }
  return result;
}

const userInput = '<script>alert("xss")</script>';
const html = safeHtml`<div>用户输入内容：${userInput}</div>`;
console.log(html); // 输出转义后的安全HTML

3. 简易国际化处理

我们可以通过标签模板实现简单的多语言替换，根据当前语言环境替换对应的文本片段。

// 语言包
const langMap = {
  zh: {
    'hello': '你好',
    'welcome': '欢迎来到我的网站'
  },
  en: {
    'hello': 'Hello',
    'welcome': 'Welcome to my website'
  }
};
let currentLang = 'zh'; // 当前语言，可动态切换

function i18n(strings, ...keys) {
  // 静态文本部分直接匹配语言包
  const translatedStrings = strings.map(str => {
    return langMap[currentLang][str.trim()] || str;
  });
  let result = '';
  for (let i = 0; i < translatedStrings.length; i++) {
    result += translatedStrings[i];
    if (i < keys.length) {
      // 键值部分如果是语言包中的key也做替换
      const key = keys[i];
      result += langMap[currentLang][key] || key;
    }
  }
  return result;
}

// 使用标签模板
const greeting = i18n`hello，welcome`;
console.log(greeting); // 输出：你好，欢迎来到我的网站

// 切换语言
currentLang = 'en';
const greetingEn = i18n`hello，welcome`;
console.log(greetingEn); // 输出：Hello，Welcome to my website

使用标签模板的注意事项

• 标签函数的第一个参数strings数组的长度永远比values的长度大1，因为开头和结尾都有静态文本片段，即使没有内容也会是空字符串。
• 如果模板字符串中没有插值，那么values数组为空，strings数组只有一个元素，就是整个模板字符串的内容。
• 标签模板的返回值没有固定要求，可以是字符串，也可以是其他任意类型，根据实际需求决定。

JS模板字符串标签模板JavaScript前端开发修改时间：2026-07-20 20:57:34