ES6：模板字符串的精致用法

2023-09-15 13:43:11

在ES5中，为了拼接字符串，我们使用**""(双引号)** 表示字符串，然后用**+** 进行字符串拼接。现在，ES6中可以使用**(反引号)** 来代替**""(双引号)** ，使用**${}** 将变量括起来，**(反引号)** 表示字符串称为模板字符串 。这样做的好处在于书写方便、简洁。

接下来我们将详细介绍一下ES6模板字符串的用法。

模板字符串基础

模板字符串使用**`(反引号)** 来标识，${} 将变量括起来。例如：

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

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

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

多行字符串

模板字符串可以跨越多行，而不需要使用转义字符或换行符。例如：

const poem = `Roses are red,
Violets are blue,
Sugar is sweet,
And so are you.`;

console.log(poem); // Output:

Roses are red,
Violets are blue,
Sugar is sweet,
And so are you.

字符串表达式

模板字符串可以包含字符串表达式，这些表达式将在字符串被评估时求值。例如：

const num1 = 10;
const num2 = 20;

const sum = `The sum of ${num1} and ${num2} is ${num1 + num2}.`;

console.log(sum); // Output: The sum of 10 and 20 is 30.

标签模板

标签模板允许您使用自定义函数来格式化模板字符串。标签模板函数的第一个参数是模板字符串的原始字符串，剩余的参数是模板字符串中的变量值。例如：

const highlight = (strings, ...values) => {
  // strings: 原始字符串数组
  // values: 变量值数组

  // 将变量值插入原始字符串并返回格式化后的字符串
  return strings.reduce((result, string, index) => {
    return result + string + (values[index] || '');
  }, '');
};

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

const greeting = highlight`Hello, my name is ${name} and I am ${age} years old.`;

console.log(greeting); // Output: <span>Hello, my name is John Doe and I am 30 years old.</span>