理解 ECMAScript 2017 中的 template literals（模板字符串）-JavaScript中文网-JavaScript教程资源分享门户

在 ECMAScript 2015 中，我们已经见识了 template literals（模板字符串）这一新概念，它允许开发者使用更加自然的方式来创建字符串。现在，作为 ECMAScript 2017 的一部分，它已经被进一步增强。本文将详细介绍什么是模板字符串，以及它如何在实际应用中发挥作用。

什么是模板字符串？

在以前，我们经常使用单引号或双引号来构建字符串。例如：

const name = "John";
console.log("Hello, " + name);

使用模板字符串，这段代码可以这样写：

const name = "John";
console.log(`Hello, ${name}`);

使用反引号（`）包裹字符串，并使用 ${} 进行变量插值。这里的 ${} 可以是任意的 JavaScript 表达式，而不仅仅是变量名。

模板字符串的新增功能

模板字符串在 ECMAScript 2017 中得到了一些有用的扩展。下面将逐一介绍这些功能。

嵌套模板字符串

模板字符串中可以使用嵌套模板字符串。例如：

const greeting = name => `Hello, ${name}!`;
const message = `My name is ${'Bob'}, and I'd like to say: ${greeting('Alice')}`;
console.log(message);

输出结果为：

My name is Bob, and I'd like to say: Hello, Alice!

标签模板

标签模板允许对模板字符串进行定制化处理。语法为：标签名+模板字符串。

标签名是一个函数，它接受两个参数：一个字符串数组，表示模板字符串被分割后的各个部分；其余参数则是表达式的值。例如：

const greet = (strings, ...values) => {
  console.log(strings); // ["Hello, ", "!"]
  console.log(values); // ["World"]
  return strings[0] + values[0] + strings[1]; // 返回处理后的字符串
};
console.log(greet`Hello, ${"World"}!`);

输出结果为：

["Hello, ", "!"]
["World"]
Hello, World!

除此之外，标签模板还可以实现一些高级功能，例如：过滤 HTML、国际化处理等。

未使用的模板字面量标记

未使用的模板字面量标记是指：模板字符串中，用于分隔模板字面量的反引号（`）后面，却没有任何表达式或模板字面量的出现。例如：

const greeting = `Hello,`;

在 ECMAScript 2017 中，未使用的模板字面量标记将返回一个 undefined 值，而不是之前的空字符串（""）。这一改变对于定义纯字符串变量（不需要插入表达式）非常有用，并且使得未使用的字符串变量不会被误认为和其他空字符串变量相等。

模板字符串的使用场景

模板生成 HTML

使用模板字符串可以比拼接字符串更简洁、更安全地生成 HTML 片段。

// 生成一张图片
const imageUrl = "https://example.com/myImage.jpg";
const imgWidth = 300;
const imgHeight = 200;
const image = `<img src="${imageUrl}" width=${imgWidth} height=${imgHeight} alt="my image" />`;

代码清晰度

在一些场景下，使用模板字符串可以使代码更加清晰易懂。

// javascriptcn.com 代码示例
const isValid = (name, email) => { // 验证函数
  const isNameValid = name.trim() !== "";
  const isEmailValid = /^\S+@\S+\.\S+$/.test(email);
  return `
    Name is ${isNameValid ? "valid" : "invalid"}.
    Email is ${isEmailValid ? "valid" : "invalid"}.
  `;
};
console.log(isValid("Alice", "alice@example.com"));

输出结果为：

Name is valid.
Email is valid.

总结

通过本文，我们了解了模板字符串的基本概念和用法，以及 ECMAScript 2017 中对模板字符串的一些扩展。模板字符串是 JavaScript 中非常有用的一种功能，它使得字符串的处理更加直观、方便，我们应该在实际应用中广泛地使用它。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/654ec7c97d4982a6eb7dd646