ES9 中的模板文字标签函数、标记模板字面量和 raw 属性
在前端开发中，我们经常需要处理字符串的拼接，并且要求拼接出来的字符串具有一定的格式。传统的字符串拼接方式十分繁琐、易出错，同时也不够灵活，无法满足我们的需求。ES9 引入了模板文字标签函数、标记模板字面量和 raw 属性来解决这些问题。接下来，我们将详细介绍它们的使用方法及其指导意义。
模板文字标签函数
模板文字标签函数是一种特殊的函数，它接收模板字面量作为参数，并将其转化为另一种格式。通常，标签函数的命名为一个普通函数名，后面加上一个“()”的符号，如“myTag()”。在函数名后面添加反引号（`）来定义标签，如“myTag”表示标签函数“myTag()”。下面是一个例子：
function myTag(strings, ...values) {
console.log(strings); // ["Hello ", "!"]
console.log(values); // ["ES9"]
}
let name = "ES9";
myTag`Hello ${name}!`;在这个例子里，我们定义了一个标签函数“myTag”，它接收两个参数：一个字符串数组“strings”和若干个“values”值。在使用标签函数时，我们可以直接把字符串和变量用反引号括起来，中间用“${}”包裹变量，如“Hello ${name}!”。使用标签函数后，字符串和变量（即“Hello ${name}!”）被转换为两个参数：字符串数组 ["Hello ", "!"] 和值["ES9"]。我们可以对这两个参数进行任何处理，例如拼接字符串、过滤字符串、添加样式等；并返回一个新的字符串，最终将这个新的字符串插入到我们想要的地方。
标记模板字面量
标记模板字面量是把模板字面量传递给标记函数。标记可在解析之前检查模板字面量并对其进行更改。标记模板字面量与模板字面量之间的关键区别在于前者在模板字面量周围添加函数。例如：
let name = "ES9";
let result = myTag`Hello ${name}!`;
console.log(result);
// 输出：Hello ES9!在这种方式下，“myTag”是将字符串和变量结合起来的标记函数。它将前面例子中生成的所有参数传递，处理参数并返回新字符串。
raw 属性
标记模板字面量中包含了一个raw属性，它引用了一个原始的字符串数组，其中未进行转义处理的字符保留其原始的形式。下面是一个例子：
function myTag(strings, ...values) {
console.log(strings); // ["\n\tHello, ", "!"]
console.log(strings.raw); // ["\\n\\tHello, ", "!"]
console.log(values[0].raw); // "world"
}
let name = "world";
myTag`\n\tHello, ${name}!`;在这个例子中，我们定义了一个标记函数“myTag”，它接收两个参数：一个字符串数组“strings”和一个“values”值。在使用标记函数时，我们可以看到strings数组中的回车和缩进符被转义成了十六进制字符。values[0].raw中“world”未被处理，保留了其原来的形式。
raw 属性提供了一种方式，可以在标记函数中访问未被处理的字符串。这非常有用，因为原始的字符串数组中的字符保留它们的原始形式，即加上转义字符，也更符合需求。
结论
ES9 中的模板文字标签函数、标记模板字面量和 raw 属性为字符串处理提供了更加灵活，更加强大的工具。它们简化了字符串拼接的过程，并允许我们对字符串进行更加灵活的处理。深入学习和熟练掌握这三个特性对于前端工程师来说是非常必要的。下面是一个完整的示例代码：
-- -------------------- ---- ------- -------- -------------- ---------- - -- -- --- -- --------------------- -- ------------ -- ---- ------------------------- -- -------------- -- ---- --------------------------- -- ------- -- -- --- -- ------ ---------- - --------- - ----------- - --- ---- - -------- --- ------ - ---------------- ---------- -------------------- -- --- ------ ------
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67370dd8317fbffedf07b765