在 JavaScript 中，字符串是一种非常重要的数据类型。ES6 中引入了模板字符串，它是一种可以包含变量、表达式和函数的字符串。相比传统方式，它更加的灵活、易于维护和阅读，同时也提升了代码的可读性和可维护性。在本文中，我们将深入了解 ES6 模板字符串的各种用法示例。
1. 基本用法
模板字符串使用反引号(``)或者 Unicode 下的“`”(U+2018)、 “`”(U+2019) 作为开头和结尾。其中反引号(``)是唯一的换行符，并且可以不写转义符号。
// 使用单引号或双引号的字符串
const str1 = 'Hello World!'
const str2 = "I'm a frontend developer."
// 使用模板字符串
const name = 'Tom'
const age = 22
const str3 = `My name is ${name}. I'm ${age} years old.`上述代码中，str1 和 str2 是传统的字符串，而 str3 使用了模板字符串。我们将变量 ${name} 和 ${age} 插入到字符串中，使得代码更加简洁和易读。
2. 多行字符串
传统字符串只能写在一行中，如果需要写成多行需要使用换行符号。而模板字符串可以直接写成多行，不需要再添加任何额外的符号。
const multiLineStr = ` 我们 都是 前端 技术开发者 `
上述代码中，multiLineStr 是一个包含了多行字符串的变量。通过使用反引号(``)作为开头和结尾，我们可以轻松地在字符串中使用换行符号。
3. 嵌套使用
模板字符串允许嵌套使用，即在一个模板字符串中嵌入其他模板字符串。嵌套的模板字符串内部的变量可以调用外部模板字符串的变量。
-- -------------------- ---- ------- ----- ---- - ----- ----- --- - -- ----- ---------------- - - -- ---- -- -------- --- ------ ----- ---- - ----- ---------------- - - ------------------- --- --- - -------- ---------- - ----------------------------- -- ----- ---- -- ---- --- -- ----- ---- --- --- - -------- ----------
上述代码中，我们定义了内部模板字符串 innerTemplateStr 和外部模板字符串 outerTemplateStr。在外部模板字符串中，我们调用了内部模板字符串中的变量。最终，我们将内部模板字符串和外部模板字符串一起输出，得到了完整的字符串。
4. 标签模板
在使用模板字符串的时候，可以在字符串前面添加一个标签，将模板字符串传递给标签函数进行处理。标签函数是一个函数，它可以接收多个参数，这些参数包括了模板字符串中的变量和表达式。
-- -------------------- ---- ------- -------- ---------------------- -------- - -------------------- -- - --- ---- -- -- -- --- ---- -- - ----- ----- - ----------------- -- - ------ -- - - ----- ---- - ----- ----- --- - -- ---------------- ---- -- -------- --- --- ------ ----- -----
上述代码中，我们定义了一个标签函数 myTagFunction，并将模板字符串传递给它进行处理。标签函数接收的参数 strings 是一个字符串数组，表示模板字符串中所有非变量和表达式的部分。接下来的参数 args 是一个数组，包含了模板字符串中出现的所有变量和表达式。在这个标签函数中，我们只是简单的将这些参数输出到控制台中。
5. 原始模板字符串
模板字符串在处理时会自动进行转义，防止 XSS 攻击。但是，在某些情况下，我们需要得到原始的模板字符串，而不是转义后的字符串。此时，我们可以使用 ES6 的原始模板字符串特性。
-- -------------------- ---- -------
----- ---- - -----
----- --- - --
-------- ------------------- ---------- -
--- ------ - --
--- ---- - - -- - - ------------------- ---- -
------ -- --------------
-- -- - -------------- -
------ -- ---------
-
-
------ ------
-
----- --- - ----------------- -- ---- -- ------------ ------ ----- -----
---------------- -- --------- -- ---- -- ------------ ------ ----- ----上述代码中，我们定义了一个函数 rawLiteral，这个函数是我们自己实现的标签函数。我们使用 `` 将字符串包裹起来，并将其放到 rawLiteral 函数中进行处理。在处理时，我们遍历字符串数组中的每一项，如果这一项是字符串，就直接添加到 output 中；如果这一项是变量或表达式，就将值添加到 output 中。最终，我们得到了没有进行转义的原始模板字符串。
总结
本文详细介绍了 ES6 模板字符串的各种用法示例，并提供了相应的代码示例。模板字符串是一种方便、灵活、易于维护和阅读的字符串格式，可以提高我们的代码质量和生产效率。在实际的开发中，我们可以根据不同的需求和情境来选择不同的模板字符串用法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/651e7c1295b1f8cacd625f7a