ECMAScript 2018（ES9）中的模板文字和 Tagged Templates 的使用方法

在 ECMAScript 2018 中，模板文字和 Tagged Templates 是两个新的特性。它们非常有用，可以大大简化前端开发中字符串拼接的操作，提高代码的可读性和可维护性。在这篇文章中，我们将详细介绍这两个特性的使用方法，并给出一些示例代码。

模板文字

在 ES6 中，引入了模板文字（template literals）的概念。它们是一种新的字符串语法，使用反引号 () 包裹起来。在模板文字中，可以使用 ${expression}` 插入变量和表达式。例如：

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

const message = `My name is ${name} and I am ${age} years old.`;

console.log(message); // 输出：My name is John and I am 30 years old.

在上面的代码中，使用了模板文字来拼接字符串。${name} 和 ${age} 是嵌入式表达式，它们会被计算并转换成字符串，然后插入到模板文字中。

另外，模板文字还可以跨行使用，例如：

const message = `
  This is a multi-line 
  message that spans 
  multiple lines.
`;

console.log(message);
// 输出：
// This is a multi-line
// message that spans
// multiple lines.

这个特性在编写长字符串或 HTML/CSS 的时候非常有用，可以显著提高代码的可读性和可维护性。

Tagged Templates

在 ES6 中，模板文字只是一种新的字符串语法，它们的值就是一个字符串。但是，ES6 还引入了一种新的函数调用语法，叫做 Tagged Templates。它允许我们在模板文字中调用一个函数，这个函数可以对模板文字进行处理，并返回一个新的字符串。

Tagged Templates 的语法很简单，只需要在模板文字前加上一个函数名即可。例如：

function myTag(strings, ...values) {
  console.log(strings); // 输出：["My name is ", " and I am ", " years old."]
  console.log(values);  // 输出：["John", 30]

  return `Hello, ${strings[0]}${values[0]}. You are ${values[1]} years old.`;
}

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

const message = myTag`My name is ${name} and I am ${age} years old.`;

console.log(message); // 输出：Hello, John. You are 30 years old.

在上面的例子中，myTag 函数接收两个参数：strings 和 values。strings 是一个包含模板文字中的字符串和嵌入式表达式的数组，values 则是一个包含嵌入式表达式的值的数组。myTag 函数对这两个参数进行处理，并返回一个新的字符串。

使用 Tagged Templates 的好处在于，我们可以将处理字符串的逻辑从业务逻辑中分离出来，提高代码的可读性和可维护性。同时，它也允许我们自定义模板文字的语法，例如：

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

  // 处理模板文字
  for (let i = 0; i < strings.length; i++) {
    result += strings[i];

    if (i < values.length) {
      result += values[i];
    }
  }

  // 处理 CSS
  result = result.replace(/\n/g, '');
  result = result.replace(/ +/g, ' ');
  result = result.trim();

  return result;
}

const color = 'red';
const size = '16px';

const styles = css`
  color: ${color};
  font-size: ${size};
`;

console.log(styles);
// 输出：
// color: red; font-size: 16px;

在上面的例子中，css 函数接收模板文字，并将其转换成一段 CSS 样式。通过自定义模板文字的语法，我们可以使用更加直观的方式来编写 CSS，提高代码的可读性。

总结

ECMAScript 2018 中的模板文字和 Tagged Templates 是两个非常有用的特性，它们可以大大简化前端开发中字符串拼接的操作，提高代码的可读性和可维护性。在实际开发中，我们可以灵活运用这些特性，根据需求自定义模板文字的语法，提高代码的可维护性和扩展性。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65a0b89aadd4f0e0ff8f48ec