ECMAScript 2018（ES9）中的 “Template Literals” 详解-JavaScript中文网-JavaScript教程资源分享门户

ECMAScript 2018（ES9）中的 “Template Literals” 详解

在 JavaScript 中，我们经常需要动态地拼接字符串。为了实现这个问题，我们通常会使用字符串的连接运算符 + 或者字符串模板。ECMAScript 2018 （ES9）带来了全新的模板语法——“Template Literals”，本文将对其进行详细的介绍。

简介

“ Template Literals ”是 ECMAScript 6 中引入的一种新的字符串表示方式，它使用反引号 ` 包裹字符串，并允许嵌入变量并支持多行字符串。其最大的优点是简化了字符串的拼接操作，使代码更加简洁易读。

语法

使用“ Template Literals ”需要遵循一定的语法规则：

字符串必须用反引号 ` 包裹起来；
可以在字符串中嵌入占位符${expression}，其中 expression 表示一个 JavaScript 表达式；
如果占位符中的表达式是一个函数，那么这个函数会被立即调用，并且其返回值会被用作占位符的值；
如果 ${} 中的表达式是字符串字面量，则可以使用反引号 ` 对嵌套字符串进行多行拼接。

下面是一个示例代码：

let name = "Tom";
let age = 20;
let message = `Hello, my name is ${name}, I am ${age} years old.`;
console.log(message);

在这个示例中，我们定义了两个变量 name 和 age，然后使用“ Template Literals ”拼接了一个字符串。这样可以避免使用 + 号进行字符串的连接。

多行字符串

“ Template Literals ”还支持多行字符串的拼接，可以使用反引号 ` 将多行字符串拼接在一起。示例代码如下：

let message = `Hello, 
my name is Tom, 
I am 20 years old.`;
console.log(message);

标签模板

在“ Template Literals ”中，还可以使用标签模板来定制模板字符串的输出格式。标签模板是一个函数，它接受一组字符串和表达式作为参数，并返回处理后的字符串。

标签模板需要将模板字符串分为多个参数进行接收，例如：

function processString(strings, ...values) {
    console.log(strings); // 输出 ["Hello, ", ", I am ", " years old."]
    console.log(values); // 输出 ["Tom", 20]
}
processString`Hello, ${name}, I am ${age} years old.`;

标签模板的使用场景很多，例如前端框架的实现、数据格式化、多语言国际化等。

总结

通过本文的介绍，我们了解到了“ Template Literals ”这种新的字符串表达方式，它简化了字符串的拼接操作，并提供了更加方便的字符串多行拼接和标签模板的功能。使用“ Template Literals ”可以提升代码的可读性和易用性，是前端开发中不可或缺的一部分。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/65a356dfadd4f0e0ffb76c5a