如何在 ECMAScript 6 中使用模板字符串字面量？

在 ECMAScript 6 中，我们可以使用模板字符串字面量来创建包含换行符、表达式、变量等的长字符串。

基本用法

模板字符串字面量使用反引号 ( ) 包裹字符串内容，并且可以在字符串中插入 ${expression} 来引入任意 JavaScript 表达式的结果。

// 插入变量
const name = 'John Doe';
console.log(`Hello, ${name}!`); // 输出 "Hello, John Doe!"

// 插入表达式
const a = 1, b = 2;
console.log(`a + b = ${a + b}`); // 输出 "a + b = 3"

多行字符串

在模板字符串字面量中，我们可以直接使用换行符来创建多行字符串。这样可以避免使用 \n 转义符。

const poem = `一片孤叶轻，
不自觉，长叹声，
常恨人生路难行。`;

console.log(poem);
/*
输出：
一片孤叶轻，
不自觉，长叹声，
常恨人生路难行。
*/

嵌套模板字符串字面量

在模板字符串字面量中，我们可以嵌套使用模板字符串字面量。在内层模板字符串字面量中，可以使用单引号或双引号包裹字符串内容。

const a = 'foo';
const b = 'bar';
console.log(`a is ${a}, b is '${b}'`);
// 输出 "a is foo, b is 'bar'"

标签模板

在模板字符串字面量中，我们可以在模板字符串字面量前加上一个函数名，这个函数被称为标签函数。标签函数可以用来处理模板字符串字面量的内容，进行替换、过滤、加工等操作。

function format(template, ...values) {
  return template.reduce((result, part, i) => {
    return result + part + (values[i] || '');
  }, '');
}

const name = 'John Doe';
const age = 25;

const message = format`
  Name: ${name}
  Age: ${age + 1}
`;

console.log(message);
/*
输出：
  Name: John Doe
  Age: 26
*/

在上面的例子中，format 函数使用了标签模板的功能，将模板字符串字面量中的变量替换为相应的值，并且可以在其中进行一些额外的加工操作。