JavaScript模板字符串有哪些高级用法值得掌握

JavaScript模板字符串是ES6标准中新增的字符串定义方式，使用反引号包裹内容，相比传统的单引号和双引号字符串，它支持更多灵活的语法特性，除了基础的变量嵌入之外，还有很多高级用法可以应对复杂的开发场景。

基础回顾：模板字符串的基本用法

模板字符串最基础的能力是嵌入变量和表达式，通过${}语法将变量或表达式的结果插入到字符串中，不需要再使用加号拼接字符串。基础用法示例如下：

const name = '张三';
const age = 25;
// 基础变量嵌入
const info = `姓名：${name}，年龄：${age}`;
console.log(info); // 输出：姓名：张三，年龄：25

// 嵌入表达式
const a = 10;
const b = 20;
const sumStr = `10和20的和是：${a + b}`;
console.log(sumStr); // 输出：10和20的和是：30

高级用法一：多行字符串原生支持

传统的字符串定义方式如果需要换行，必须使用转义字符n，而且换行后的缩进也会被算入字符串内容，维护起来很不方便。模板字符串可以直接保留换行符，字符串中的换行和缩进会完全按照书写的格式保留，非常适合定义多行的文本、HTML片段或者SQL语句。

// 传统字符串换行需要转义符
const oldMultiLine = '第一行n第二行n第三行';
console.log(oldMultiLine);

// 模板字符串原生支持多行
const newMultiLine = `第一行
第二行
第三行`;
console.log(newMultiLine);
// 输出效果和上面完全一致，书写更直观

// 定义HTML片段示例
const html = `
<div class="container">
  <h3>标题</h3>
  <p>内容段落</p>
</div>
`;
console.log(html);

高级用法二：标签模板（Tagged Templates）

标签模板是模板字符串最强大的高级特性之一，它允许我们在模板字符串前面添加一个函数，这个函数会处理模板字符串的内容。标签函数的第一个参数是一个数组，包含模板字符串中所有静态的文本部分，后面的参数是所有嵌入的表达式的结果，我们可以对这些内容做自定义处理，比如字符串转义、国际化翻译、样式处理等。

// 定义一个简单的标签函数，将嵌入的表达式结果转为大写
function upperStr(strings, ...values) {
  let result = '';
  // 遍历静态文本部分
  for (let i = 0; i < strings.length; i++) {
    result += strings[i];
    // 拼接对应的表达式结果，转为大写
    if (i < values.length) {
      result += String(values[i]).toUpperCase();
    }
  }
  return result;
}

const word = 'hello';
const num = 123;
const res = upperStr`测试内容：${word}，数字：${num}`;
console.log(res); // 输出：测试内容：HELLO，数字：123

常见的应用场景比如防止XSS攻击的HTML转义函数，我们可以写一个标签函数自动转义模板字符串中的特殊字符：

// HTML转义标签函数
function escapeHtml(strings, ...values) {
  const escape = (str) => {
    return String(str)
      .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 += escape(values[i]);
    }
  }
  return result;
}

const userInput = '<script>alert("xss")</script>';
const safeHtml = escapeHtml`用户输入的内容：${userInput}`;
console.log(safeHtml); // 输出：用户输入的内容：<script>alert("xss")</script>

高级用法三：获取原始字符串（String.raw）

模板字符串默认会把转义字符解析成对应的含义，比如n会被解析成换行符。如果我们想要获取字符串的原始内容，也就是转义字符不被解析的样子，可以使用内置的String.raw标签函数，它会返回模板字符串的原始字符串形式。

const path = `C:UsersAdminDesktop`;
console.log(path); 
// 输出：C:UsersAdminDesktop，因为n和U被解析了

const rawPath = String.raw`C:UsersAdminDesktop`;
console.log(rawPath);
// 输出：C:UsersAdminDesktop，保留了原始的反斜杠

高级用法四：嵌套模板字符串

模板字符串中还可以嵌入另一个模板字符串，也就是嵌套使用，适合处理多层嵌套的动态内容，比如根据条件动态生成不同的字符串片段。

const isAdmin = true;
const userName = '李四';
const welcomeMsg = `欢迎${userName}，${isAdmin ? `您有管理员权限，可访问<a href="/admin">管理页面</a>` : '您是普通用户'}`;
console.log(welcomeMsg);
// 输出：欢迎李四，您有管理员权限，可访问<a href="/admin">管理页面</a>

使用注意事项

• 模板字符串使用反引号包裹，如果字符串内容本身包含反引号，需要使用转义字符`来转义。
• 标签函数的参数顺序要牢记，第一个是静态文本数组，后面是按顺序的表达式结果，不要搞混参数顺序。
• String.raw只能处理模板字符串的原始内容，不能用于普通字符串。
• 嵌入的表达式可以是任意合法的JavaScript表达式，包括函数调用、三元运算、算术运算等，但如果表达式执行报错，整个模板字符串的解析也会失败。

常见使用场景总结

掌握这些高级用法之后，我们可以更灵活地处理JavaScript中的字符串相关需求，减少不必要的字符串拼接代码，提升代码的可读性和可维护性。

JavaScript模板字符串字符串拼接标签模板ES6修改时间：2026-07-01 14:54:22