JavaScript 中的模板字面量与标签模板

在 JavaScript 中，模板字面量（Template Literals）和标签模板（Tagged Templates）是两种用于处理字符串的特殊方式。它们分别提供了更灵活和强大的字符串处理能力，让字符串拼接、格式化和转义变得更加方便。

1. 模板字面量（Template Literals）

模板字面量是 ES6 中引入的字符串语法，使用反引号（`）包裹字符串内容。它可以在字符串中直接插入变量，还支持多行字符串和字符串内插值。

基本用法

const name = 'John';
const age = 30;

// 插入变量
const message = `Hello, my name is ${name} and I am ${age} years old.`;

console.log(message); 
// Output: "Hello, my name is John and I am 30 years old."

多行字符串

在传统的字符串中，如果想要跨行定义一个字符串，需要使用 \ 换行符。而使用模板字面量可以直接定义多行字符串，更加清晰和方便。

const multilineMessage = `
  This is a
  multiline
  message.
`;

console.log(multilineMessage); 
/* 
Output: 
  "This is a
  multiline
  message."
*/

嵌套模板字面量

模板字面量支持嵌套，你可以在一个模板字面量中嵌入另一个模板字面量。

const nestedMessage = `
  Hello, my name is ${name} and I am ${age} years old.
  ${age >= 18 ? `I am an adult.` : `I am a minor.`}
`;

console.log(nestedMessage);
/* 
Output:
  "Hello, my name is John and I am 30 years old.
  I am an adult."
*/

2. 标签模板（Tagged Templates）

标签模板是模板字面量的一个高级用法，它允许我们自定义模板字面量的解析方式。我们可以通过在模板字面量前加一个标签函数来实现这种自定义解析。

基本用法

function customTag(strings, ...values) {
   
  console.log(strings); // 字符串数组
  console.log(values); // 值数组
}

const name = 'John';
const age = 30;

customTag`Hello, my name is ${name} and I am ${age} years old.`;

在上面的例子中，customTag 函数被称为标签函数。它的第一个参数 strings 是一个字符串数组，包含了模板字面量中的所有字符串部分。第二个参数 ...values 是一个值数组，包含了模板字面量中的所有插值部分。通过自定义标签函数，我们可以对这些字符串和值进行特殊处理。

标签模板的应用

标签模板可以用于实现字符串的自定义格式化、国际化处理、安全转义等功能。例如，我们可以定义一个简单的安全转义函数来避免 XSS 攻击。

function safeHtml(strings, ...values) {
   
  let result = '';

  for (let i = 0; i < strings.length; i++) {
   
    result += strings[i];
    if (i < values.length) {
   
      result += escapeHtml(values[i]);
    }
  }

  return result;
}

function escapeHtml(text) {
   
  return text.replace(/[&<>"'`]/g, match => {
    const map = {
      '&': '&amp;',
      '<': '&lt;',
      '>': '&gt;',
      '"': '&quot;',
      "'": '&#39;',
      '`': '&#x60;'
    };
    return map[match];
  });
}

const name = '<script>alert("XSS Attack!");</script>';
const message = safeHtml`Hello, my name is ${
     name}.`;

console.log(message); 
// Output: "Hello, my name is &lt;script&gt;alert(&quot;XSS Attack!&quot;);&lt;/script&gt;."

在上面的例子中，我们通过自定义标签函数 safeHtml 来实现了对插值进行了安全转义，从而防止了 XSS 攻击。

结束语

模板字面量和标签模板是 JavaScript 中非常有用的字符串处理特性。模板字面量提供了更灵活、更直观的字符串拼接和插值方式，而标签模板则允许我们自定义字符串的解析方式，实现更复杂的字符串处理功能。在实际开发中，合理使用这两个特性可以使代码更加清晰、简洁和安全。