JavaScript中的模板字符串与标签模板有哪些高级用法？

在JavaScript里，模板字符串用反引号包裹，除了基本的变量插入，它和标签模板配合能完成很多巧妙的事情。下面先通过一张图了解基本结构。

模板字符串的基础高级特性

模板字符串天然支持多行文本和嵌入任意表达式，不必再用加号拼接。你可以在 ${} 里调用函数、做运算，甚至嵌套另一个模板字符串。

const name = '小明';
const score = 92;
const info = `
姓名：${name}
成绩：${score >= 60 ? '及格' : '不及格'}
计算：${ (score * 1.1).toFixed(1) }
`;
console.log(info);

嵌套模板字符串

当需要根据条件输出不同结构的文本时，嵌套写法非常直观：

const isAdmin = true;
const menu = `
<ul>
  ${isAdmin ? `
    <li>管理后台</li>
    <li>用户列表</li>
  ` : `
    <li>个人中心</li>
  `}
</ul>
`;
console.log(menu);

标签模板的原理与用法

标签模板不是什么新语法，而是一个函数调用写法：把模板字符串紧跟在一个函数名后面，该函数会接收到被拆开的字符串数组和所有插值。

基本标签函数

function tag(strings, ...values) {
  console.log('文本块:', strings);
  console.log('插值:', values);
  return strings.reduce((acc, str, i) => {
    return acc + str + (values[i] !== undefined ? values[i] : '');
  }, '');
}

const a = 10;
const b = 20;
const result = tag`求和：${a} + ${b} = ${a + b}`;
console.log(result);

用标签模板做HTML转义

处理用户输入时，可以利用标签模板统一转义，避免XSS问题：

function safeHtml(strings, ...values) {
  const escape = (s) => String(s)
    .replace(/&/g, '&')
    .replace(/</g, '<')
    .replace(/>/g, '>');
  return strings.reduce((acc, str, i) => {
    return acc + str + (values[i] !== undefined ? escape(values[i]) : '');
  }, '');
}

const userInput = '<script>alert(1)</script>';
const html = safeHtml`<div>${userInput}</div>`;
console.log(html);

国际化与格式化

标签模板也常用于i18n场景，根据key自动替换多语言文本：

const dict = { hello: '你好', name: '名字' };
function i18n(strings, ...keys) {
  return strings.reduce((acc, str, i) => {
    const k = keys[i];
    return acc + str + (k ? (dict[k] || k) : '');
  }, '');
}

const uname = '小红';
console.log(i18n`hello，你的name是 ${'hello'} ${'name'}:${uname}`);

常见注意点

• 标签函数的第一个参数 strings 是一个原生带有 raw 属性的数组，可用 strings.raw 获取未转义的原始内容。
• 模板字符串里的反引号或 ${ 需要使用反斜杠转义。
• 标签模板返回什么完全由函数决定，不一定非要是字符串。

合理使用模板字符串与标签模板，能把原本散落的字符串处理集中成可复用的逻辑，让代码更安全易读。

小结

模板字符串不止是拼接工具，标签模板提供了一层拦截能力。掌握这些高级用法后，无论是渲染文本、做安全过滤还是实现轻量框架，都会更加得心应手。

JavaScript模板字符串标签模板修改时间：2026-07-26 20:42:23