在 ECMAScript 2015 中使用模板字面量构建复杂的字符串-JavaScript中文网-JavaScript教程资源分享门户

在 ECMAScript 2015 中使用模板字面量构建复杂的字符串

随着前端技术的不断发展，很多开发者已经开始关注 ECMAScript 2015，其中即使是新手也能通过学习模板字面量的相关知识，构建复杂的字符串。模板字面量的引入为前端开发带来了很多便捷，帮助开发者以更少的代码创建出优美的HTML字符串。

本文将介绍，在 ECMAScript 2015中使用模板字面量构建复杂的字符串，内容将有深度和实践指导，通过示例代码来解释，帮助读者理解并掌握如何使用模板字面量。

概述

在 ECMAScript 2015中，我们可以使用模板字面量来创建包含变量、函数、甚至复杂表达式的字符串。使用模板字面量的语法非常简单，只需要用反引号（`）来界定一个字符串即可。例如：

const str = `hello, world`;

与普通字符串不同的是，使用模板字面量时可以在字符串中使用${} 来包含任意的表达式，如下所示：

const name = 'Tom';
const age = 18;
const str = `My name is ${name}, I'm ${age} years old.`;

这个例子中${}里面的表达式就会被计算出结果，并插入到字符串中。

模板字面量常见用法

模板字面量常用的用法有两个：插值和多行字符串。

插值

插值是模板字面量最常用的功能，这个功能使得我们可以使用 ${ } 将一个表达式插到字符串中。这个表达式可以是函数、变量、通过运算得出的值，只要他是一个有效的表达式，都可以使用插值的语法。

const x = 10;
const y = 20;
console.log(`The sum of ${x} and ${y} is ${x + y}.`);

输出为：The sum of 10 and 20 is 30.

多行字符串

在 ES2015 之前，我们创建多行的字符串很痛苦。我们不得不使用一些奇怪的方法，比如将一个较长的字符串拆成多行，或使用一些不可见的字符。而在 ECMAScript 2015 中，我们可以将多行的字符串写成一行，而不用担心会出现问题。

const str = `First line.
Second line.
Third line.
`;

模板字面量高阶用法

除了上述基本的用法，模板字面量有一些高级用法，比如标签函数-template tag，剩余参数-rest parameter，表达式标签-expressions tag等。

标签函数-template tag

标签函数传入的第一个参数是一个字符串数组，其中的每个元素都是字符串字面量中未插值部分的一个部分。接下来的参数是插值部分的值。

标签函数允许我们重载通过字面值来调用时的响应。它们被调用时，第一个参数将为一个仅包含了字面值信息的数组，本例中数组中仅包含一个元素"hello,world"。

function tag(strings) {
  console.log(strings[0]); //输出：hello,world
}
const str = `hello,world`;
tag`${str}`;

接下来一个例子，更为完整，展示了标签函数更常见的用法。我们可以将一个转义字符串作为参数传入，来生成HTML：

-- -------------------- ---- -------
-------- ------------ ------------ ---------- -
  ------ --------------
    ----- ----- -- -- --- - ------------------------------------
    ----------
  --
-
----- ----- - ---------
----- ------ - --- ---------
----- ------ - ----------------- ----------------
----------------------- - -------

这个例子中，我们定义了一个标签函数html，第一个参数是一个数组(strings)，表示由模板字符串未插值部分组成的数组，第二个参数是一个剩余参数(values)，表示由模板字符串插值部分组成的数组。在函数内部，我们将字符串和每个值通过表达式标签结合起来，成为一个HTML字符串，最终返回这个HTML字符串。

剩余参数-rest parameter

除了标签函数形式，我们还可以利用剩余参数来传递多个参数，插值一个包含多个元素的数组。

const arr = ['Apple', 'Banana', 'Orange'];
const str = `${...arr}`;
console.log(str); //输出：Apple,Banana,Orange

因为剩余参数-rest parameter只能在函数的最后以 ... 形式出现，而在 ${} 中可以插入任意的表达式，所以只需将 ...arr 插入${}即可。

表达式标签-expressions tag

表达式标签等同于标签函数，但是被调用的形式是函数名后加括号的形式，而不是ES6新增的模板字符串形式。在表达式标签中，对于相同的模板，参数值的组合是相同的，表达式标签和标签函数的关系一般就是函数转化而来的。

function myExpr(tag, ...args) {
   console.log(tag, args);
}
const age = 25;
const name = 'Tom';
myExpr`My name is ${name}, I'm ${age} years old.`;

总结

本文详细介绍了在 ECMAScript 2015中使用模板字面量构建复杂的字符串，包括基本用法与高级用法。对于使用过普通字符串，但并未掌握模板字面量的开发人员可以尝试使用模板字面量来构建字符串，这样能够减少许多拼接的代码，有效提高前端代码的可读性。

最后，要记住，ES6 新增的许多特性都能极大地简化代码，进而提高效率。了解这些语言新特性将为提高代码质量和增强开发技能方面有所帮助。

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