ES6模版字符串

在ES6之前，我们通常使用字符串连接符（+）或字符串插值（将变量或表达式嵌入到字符串中）来创建动态文本。而ES6引入了一种新的字符串表示形式——模版字符串，它允许我们更方便地创建带有变量、表达式和换行符的多行文本。

基本语法

模版字符串是用反引号（`）括起来的字符串，其中可以包含嵌入式表达式，这些表达式被包含在${}中。

const name = 'Alice';
const age = 25;
const message = `My name is ${name} and I'm ${age} years old.`;
console.log(message); // "My name is Alice and I'm 25 years old."

上面的例子中，我们使用了模版字符串来构建一个包含变量和字符串的消息。

多行字符串

由于模版字符串允许在其中包含换行符，因此它们非常适合构建多行文本。在传统字符串中，要创建跨越多行的文本，我们必须使用转义符号（\n）或字符串连接符（+）。

// 在传统字符串中创建多行文本
const traditionalMessage = "Hello,\nworld!";
console.log(traditionalMessage);

// 使用模版字符串来创建多行文本
const newMessage = `Hello,
world!`;
console.log(newMessage);

上面的代码片段展示了如何使用模版字符串创建多行文本，而不需要使用\n或连接符。

嵌套模版字符串

模版字符串可以嵌套在其他模版字符串中，使得我们可以更容易地创建复杂的文本结构。

const city = 'New York';
const state = 'NY';

const message = `
  Welcome to ${city}, ${state}.
  We hope you enjoy your stay.

  Your reservation details:
  Room type: ${`
    Deluxe suite${' with ocean view'}
  `}
  Check-in date: ${new Date().toLocaleDateString()}
`;

console.log(message);

上面的例子中，我们嵌套了一个模版字符串来表示房间类型，并使用了多个缩进级别来使文本更易读。

条件操作

可以在模板字符串内使用条件语句（if、else、else if），例如：

let age = 12;
console.log(`I am ${age > 18 ? 'an adult' : 'a child'}.`);

循环操作

可以使用循环语句（for、while）来迭代数组或对象，例如：

let names = ["David", "Emily", "Frank"];
console.log(`My friends are ${names.join(', ')}.`);

let person = { name: "Gary", age: 28 };
console.log(`My name is ${person.name} and I am ${person.age} years old.`);

标记模版字符串

我们还可以使用标记函数（Tagged Template）来对模版字符串进行更高级别的操作。标记函数是一个带有特殊签名的函数，它可以接受一个数组参数和任意数量的其他参数，并返回处理后的字符串。

function highlight(strings, ...values) {
  return strings.reduce((result, str, i) => {
    const value = values[i] ? `<mark>${values[i]}</mark>` : '';
    return result + str + value;
  }, '');
}

const name = 'Alice';
const age = 25;

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

console.log(message);

上面的例子中，我们定义了一个名为highlight的标记函数，该函数将字符串中的每个值都用<mark>标签包装起来。实际上，标记函数可以执行任何我们想要的文本处理操作，这使得它们非常灵活。

总结

ES6模版字符串是一种强大而方便的功能，可以帮助我们轻松地构建复杂的文本结构。它们允许我们在字符串中嵌入表达式、变量和换行符，同时也支持标记模版字符串，这使得我们可以以更高级别的方式操作模版字符串。