ES6字符串模板 - Javascript

在 ES6 中，字符串模板是一个非常有用的特性。它允许我们在字符串中插入变量或表达式，而无需使用拼接符号（+）来拼接字符串。这使得代码更加简洁，并且在可读性和可维护性方面也有很大的提升。

基本语法

ES6模板字符串使用反引号()包含在字符串之间。 它们可以包含任意表达式，并使用 ${expression}` 语法将它们嵌入到字符串中。

下面是一个简单的示例：

const name = 'Alice';
const greet = `Hello ${name}!`;
console.log(greet); // 输出：Hello Alice!

在上面的例子中，我们使用了模板字符串来定义 greet 变量，并在字符串中插入了 name 的值。 ${name} 表达式会被解析为 Alice，并嵌入到 Hello 和 ! 之间。

多行字符串

ES6 模板字符串还支持多行字符串，这是在过去的 JavaScript 版本中不支持的特性。这在编写长字符串或多行文本片段时非常有用。

在传统的 JavaScript 中，我们需要使用反斜线符号（\）来将字符串拆分为多行，如下所示：

const multiLineString = "This is a long string \
that spans multiple lines \
and requires the \ character.";

在 ES6 中，我们可以使用模板字符串来创建多行文本：

const multiLineString = `This is a long string
that spans multiple lines
and requires no special characters.`;

这使得代码更加容易阅读和维护。

嵌套模板字符串

我们可以在模板字符串中嵌套另一个模板字符串，这是另一个非常有用的特性。 这使得我们可以轻松地构建复杂的字符串，如 HTML 片段或数据库查询语句。

下面是一个示例，其中包含嵌套模板字符串：

const product = {
  name: 'iPhone 12 Pro',
  price: 999,
  discount: 0.2,
};
const message = `
  Product name: ${product.name}
  Price: $${product.price}
  Discount: ${product.discount * 100}%
  Total price: $${product.price * (1 - product.discount)}
`;
console.log(message);

在上面的示例中，我们使用嵌套模板字符串来计算和显示产品的总价格。 ${product.price * (1 - product.discount)} 表达式被视为子模板字符串，并在外部模板字符串中插入。

带标签的模板字符串

除了插入变量和表达式之外，我们还可以在模板字符串前面加上标签来自定义字符串的解析。 这被称为“带标签的模板字符串”。

下面是一个示例：

function upper(strings, ...values) {
  let result = '';
  for (let i = 0; i < strings.length; i++) {
    result += strings[i];
    if (i < values.length) {
      result += values[i].toUpperCase();
    }
  }
  return result;
}
const name = 'Alice';
const age = 27;
const message = upper`Hello ${name}, you are ${age} years old.`;
console.log(message);

在上面的示例中，我们定义了一个名为“upper”的函数，该函数将模板字符串中的所有变量值都转换为大写字母，并将它们插入原始字符串中。 注意，在标签函数中，模板字符串的完整文本是作为第一个参数（一个字符串数组）传递的，后跟任意数量的分离表达式的参数。 我们可以执行任何自定义操作，并使用原始文本和分离参数返回任何格式的字符串。

结论

ES6 字符串模板是一个有用的特性，可以让代码更加简洁、容易阅读和维护。 它支持插入变量、表达式和多行文本，并可以嵌套和使用自定义标签解析器。 如有需要，可根据上述示例进行更多实践操作。