TypeScript中的模板字符串和标签模板

在TypeScript中，模板字符串（Template Strings）是一种特殊的字符串语法，可以用来方便地处理字符串拼接和格式化。而标签模板（Tagged Templates）则是基于模板字符串的进一步扩展，可以通过自定义标签函数对模板字符串进行加工和处理。本文将介绍TypeScript中的模板字符串和标签模板的使用。

模板字符串的基本用法

模板字符串是由一对反引号 ` 包围的字符串，使用 ${expression} 的形式来插入表达式的值。通过模板字符串可以实现多行字符串、字符串拼接以及字符串格式化。

const name = "Alice";
const age = 30;

// 多行字符串
const message = `
  姓名: ${name}
  年龄: ${age}
`;

console.log(message);
// 输出：
// 姓名: Alice
// 年龄: 30

// 字符串拼接
const greeting = `Hello, my name is ${name}, I am ${age} years old.`;

console.log(greeting);
// 输出：Hello, my name is Alice, I am 30 years old.

// 字符串格式化
const formatted = `My name is ${name.toUpperCase()}, I will be ${age + 5} years old in 5 years.`;

console.log(formatted);
// 输出：My name is ALICE, I will be 35 years old in 5 years.

标签模板的使用

标签模板是在模板字符串前面添加自定义的标签函数，该函数可以对模板字符串进行进一步的处理和加工。标签函数使用的形式为 functionName(templateStrings, ...expressions)，其中 templateStrings 是一个字符串数组，包含了模板字符串中的所有静态部分， expressions 是一个参数数组，包含了模板字符串中的所有插入表达式的值。

function upperCase(strings: TemplateStringsArray, ...values: any[]) {
  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 name = "Bob";
const age = 25;

const template = upperCase`My name is ${name}, I am ${age} years old.`;

console.log(template);
// 输出：My name is BOB, I am 25 years old.

在标签函数中，可以自定义对模板字符串进行加工的逻辑，并返回加工后的字符串。在上面的例子中，我们定义了一个名为 upperCase 的标签函数，它会将模板字符串中的所有插入表达式的值转为大写字母。

标签函数也可以接收额外的参数，以便更灵活地进行处理。在下面的例子中，我们定义了一个标签函数 highlight，它接收一个数字参数 threshold，只有模板字符串中的插入表达式的值大于该阈值时才会进行高亮显示。

function highlight(strings: TemplateStringsArray, ...values: any[]) {
  const threshold = values[0];
  let result = "";

  for (let i = 1; i < strings.length; i++) {
    result += strings[i - 1];
    if (i < values.length && values[i] > threshold) {
      result += `<span class="highlight">${values[i]}</span>`;
    } else {
      result += values[i];
    }
  }

  return result;
}

const price = 100;
const discount = 20;

const template = highlight`The discounted price is ${price - discount}, which is ${price - discount > 80 ? "high" : "low"}.`;

console.log(template);
// 输出：The discounted price is <span class="highlight">80</span>, which is low.

在上面的例子中，模板字符串中的第一个插入表达式值是 threshold，所以在标签函数内部我们通过 values[0] 来访问该值。

总结一下，TypeScript中的模板字符串和标签模板提供了方便的字符串处理方式，使得代码更易读、更易维护。它们可以实现多行字符串、字符串拼接和字符串格式化，并且通过自定义的标签函数可以对模板进行更复杂的处理。