拼接字符串在前端开发中是一个常见的任务，然而，它也是一个容易出错的过程。我们经常需要将多个字符串连接起来，因此，我们可能会遇到很多类似于这样的代码：
----- ---- - ------ ----- --- - -- ----- -------- - --- ---- -- - - ---- - - --- - -- - - --- - - ----- ----- --------------------- -- -- ---- -- ---- --- - -- -- ----- ----
尽管这段代码可以正确运行，但是，它并不是一个最好的写法。创建长字符串可能会导致代码混乱，并引入许多潜在的错误。更重要的是，当您不小心遗漏一个加号或者忘记添加空格时，这种方式就会造成错误。
为了解决这个问题，ES6 引入了字符串模板，也称为模板字符串。
使用字符串模板
字符串模板是使用反引号（）而不是单引号/双引号来定义的。在这些反引号中，您可以使用变量、表达式、函数调用等。您在字符串中使用的变量和表达式应该用${}`括起来。
下面是一个使用字符串模板的例子：
----- ---- - ------ ----- --- - -- ----- -------- - --- ---- -- ------- --- - -- ------ ----- ----- --------------------- -- -- ---- -- ---- --- - -- -- ----- ----
如您所见，我们在${}中使用了变量和表达式。当您运行上面的代码时，您将获得与之前相同的输出结果，但是，该代码更易于读取，更容易维护，更确保正确性。
多行字符串
使用字符串模板可以非常容易地定义多行字符串。使用字符串模板，您可以在${}中包含换行符，并且字符串模板会将返回的字符串保留为多行字符串。
下面是一个使用字符串模板创建多行字符串的例子：
----- --------- - -
----- ----- ----- --- -----
----------- ---------- -----
--- -- ------- ------ ----------
-- ------ -- ------ ----- -------
-
----------------------如您所见，我们定义了一个字符串，其中包含多个换行符。当我们输出该字符串时，它将作为多行字符串输出，其中包含换行符。
嵌套模板
当您需要再字符串中嵌套其他模板字符串时，可以使用嵌套模板。这是通过在一个${}中包含另一个模板字符串来完成的。
下面是一个嵌套模板字符串的例子：
----- --------- - ------ ----- -------- - ----- ----- -------- - ------ ------------ ------------ ------- -- ---------------------------------- ------- --------------------- -- ----- ---- ---- ------- -- ---------- ------
在上面的例子中，我们在${}中使用了一个嵌套的字符串模板，该嵌套的字符串模板调用了.toUpperCase（）方法。
结论
当您需要拼接字符串时，字符串模板是一个更好的选择。 它们更容易阅读，更容易维护，并且有助于防止您在编写的代码中遇到潜在的错误。 除此之外，字符串模板还可以使用嵌套模板和多行字符串等功能，使其更灵活。
尝试将字符串拼接代码更改为字符串模板，看看它是否会使您的代码更容易阅读和理解。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/66fa844544713626014d0ef8