在过去的 JavaScript 版本中，我们通常使用字符串连接符(+)或者字符串模板(innerHTML)来构建动态的 JavaScript 应用程序。但是，这些方法都存在一些限制，比如代码可读性不佳、繁琐、维护困难等问题。因此，ECMAScript 2015 引入了模板字符串来解决这些问题。
什么是模板字符串？
模板字符串是一种新类型的字符串，可以使用反引号(`)包裹内容，这包含了一些使用占位符${}的表达式，这些表达式可以是任何有效的 JavaScript 表达式。模板字符串使用反引号包裹主要是为了区别于普通字符串。
如何使用模板字符串？
使用模板字符串非常简单，我们可以通过在表达式(${})中使用 JS 表达式来创建动态的字符串。首先，我们需要创建一个模板字符串：
let greeting = `Hello World`;
接着，我们可以在模板字符串中使用表达式(${})来创建动态字符串：
let name = `Lucas`;
let greeting = `Hello ${name}`;
console.log(greeting); // Hello Lucas这段代码中，我们使用${name}来创建动态字符串。我们还可以组合多个表达式来构建更加复杂的字符串：
let age = 25;
let user = {
name: `Lucas`,
gender: `male`,
};
let greeting = `Hello ${user.name}, your age is ${age}, and your gender is ${user.gender}`;
console.log(greeting); // Hello Lucas, your age is 25, and your gender is male这部分代码中，我们结合了使用表达式(${})和JavaScript 对象，以及简单变量来创建复杂字符串。
在模板字符串中使用字面量空格
在模板字符串中，如果想要使用多个空格，则可以添加字面量空格。要使用字面量空格，可以在需要空格的地方添加\。例如：
let str = ` This is a sentence with several spaces. `; console.log(str); // " This is a sentence with several spaces. "
在输出结果中，我们可以看到，这个字符串包含了多个空格。如果我们在这些空格前后添加\ ，则可以在结果中看到字面量空格：
let str = ` This is a sentence with \ \ several \ spaces. `; console.log(str); // " This is a sentence with several spaces. "
在上面的代码中，我们添加了字面量空格(\ )，并且在输出结果中看到了这些空格。
模板字符串标记
模板字符串标记是一个函数，可以将模板字符串处理为一个包含插值表达式的数组，并返回一个处理后的字符串。我们可以使用模板字符串标记来对字符串的部分进行操作，比如过滤、变形等。下面是一个使用模板字符串标记的示例：
-- -------------------- ---- -------
-------- --------------- ----- -
----- ------ - ---
--------------------- -- -
--- ----- - -----------
-- ------ --- --- -
------------------------------------- -------
-
---
------ -------------- ---
-
----- ---- - --------
------------------- -- - -- ---- -- -------- - --- -- --- -- ---- -- ------在上面的代码中，我们编写了一个filter标记函数，用于过滤模板字符串中的多余空格，并将占位符替换为指定的值。在模板字符串中，我们使用__NAME__作为占位符，然后将其传入标记函数中，标记函数就会将占位符替换为指定的值。
模板字符串支持的新特性
除了表达式(${})和字面空格外，模板字符串还支持一些其他新的特性：
嵌套
我们可以将模板字符串嵌套在其他字符串中：
let inner = `inner string`;
let outer = `outer string${inner}outer string`;
console.log(outer); // outer stringinner stringouter string标签模板
标签模板允许我们可以使用一个函数作为模板字符串的标记。在使用标签模板时，模板字符串中的所有东西都将被传递到一个函数中，该函数将返回一个处理后的字符串。例如：
-- -------------------- ---- ------- -------- -------------- -------- - --------------------- ------------------ - --- -------- - ------- --- --- - --- ------------ -- ---- -- --------------- ------ ----- ------ -- ------- ------- -- -------- -- ---- -- -- ----- -- - ----- ------ -- -------- ---
在上面的代码中，我们使用了myTag函数作为标记，将模板字符串作为参数传递给myTag函数。myTag函数接收两个参数：字符串数组和表达式数组。
原始字符串
原始字符串指的是模板字符串中的特殊字符串，它们可以保留字符串中的任何格式、空格和换行符。例如：
let text = `The quick brown\nfox jumps\nover the lazy\ndog.`
console.log(text) // The quick brown
// fox jumps
// over the lazy
// dog.
let rawText = String.raw`The quick brown\nfox jumps\nover the lazy\ndog.`;
console.log(rawText) // The quick brown\nfox jumps\nover the lazy\ndog.我们可以看到，在使用原始字符串之后，字符串中的所有的特殊格式化或者空格都被保留了下来。
总结
模板字符串是 ECMAScript 2015 中的一项新特性，它可以很方便地创建复杂字符串，提高可读性、可维护性等方面的表现。它包含了一些有用的特性，如标签模板、原始字符串等，可以通过这些特性来解决复杂字符串的问题。在未来，模板字符串将是前端开发必备的技能之一。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64afcd7a48841e9894bf6ebc