ECMAScript模板字符串如何编写

在 ECMAScript（ES6）中，模板字符串是一种允许嵌入表达式的字符串字面量。它们使用反引号（``）而不是单引号（‘’）或双引号（“”）来定义。模板字符串可以包含占位符，这些占位符使用美元符号和花括号（${expression}）表示，其中expression是一个有效的JavaScript表达式。

以下是一些使用模板字符串的示例：

1. 基本用法：

const name = 'John';
const age = 30;
const greeting = `Hello, my name is ${name} and I am ${age} years old.`;
console.log(greeting); // 输出：Hello, my name is John and I am 30 years old.

2. 多行字符串：

const multiLineString = `This is a
multi-line
string.`;
console.log(multiLineString);
// 输出：
// This is a
// multi-line
// string.

3. 在字符串中嵌入表达式：

const a = 5;
const b = 10;
const sum = `The sum of ${a} and ${b} is ${a + b}.`;
console.log(sum); // 输出：The sum of 5 and 10 is 15.

4. 标签模板：

模板字符串可以与一个函数（称为标签函数）一起使用，该函数可以对模板字符串进行自定义处理。标签函数的第一个参数是一个包含字符串字面量的数组，后续参数是与占位符表达式相对应的值。

function tag(strings, ...values) {
  console.log(strings); // 字符串字面量数组
  console.log(values); // 占位符表达式的值数组

  // 返回处理后的字符串
  return 'Processed string';
}

const x = 1;
const y = 2;
const result = tag`Adding ${x} and ${y} gives us ${x + y}`;
console.log(result); // 输出：Processed string

在这个例子中，tag函数接收了两个参数：一个包含字符串字面量的数组（strings），以及一个包含占位符表达式值的数组（values）。函数可以对这些参数进行处理，并返回一个处理后的字符串。在这个例子中，我们只是简单地返回了一个固定的字符串，但你可以根据需要进行任何操作。