在前端开发中，字符串是非常常见的数据类型之一，我们经常需要在代码中使用字符串来表示一些文本内容。然而，在实际开发中，我们可能会遇到一些需要输出原始字符串的情况，比如输出一段 HTML 代码或者一段正则表达式。在这种情况下，我们需要使用一些转义字符来表示特殊字符，这样会使得代码变得复杂和难以维护。为了解决这个问题，ECMAScript 2017 引入了一个新的方法 String.raw()，它可以帮助我们实现原始字符串输出。
String.raw() 方法的基本用法
String.raw() 方法是一个静态方法，它接受一个模板字符串作为参数，并返回一个原始字符串。原始字符串是指不处理反斜杠的字符串，也就是说，反斜杠后面的字符不会被转义。下面是一个简单的示例：
const str = String.raw`Hello\nWorld`; console.log(str); // 输出 "Hello\nWorld"
在上面的代码中，我们使用了模板字符串，并将它作为参数传递给了 String.raw() 方法。在模板字符串中，我们使用了一个反斜杠来转义换行符，但是由于我们使用了 String.raw() 方法，所以这个反斜杠并没有起作用，输出的字符串中仍然包含了一个反斜杠和一个字符 "n"。
String.raw() 方法的高级用法
除了上面介绍的基本用法之外，String.raw() 方法还有一些高级用法，可以帮助我们更灵活地使用原始字符串。
1. 使用 String.raw() 方法模拟模板字符串
在 ECMAScript 6 中，我们可以使用模板字符串来实现字符串插值，比如：
const name = "Tom";
const str = `Hello, ${name}!`;
console.log(str); // 输出 "Hello, Tom!"但是在一些旧的浏览器中，可能并不支持模板字符串。为了解决这个问题，我们可以使用 String.raw() 方法来模拟模板字符串的效果，例如：
-- -------------------- ---- -------
-------- ----------------- ---------- -
--- ------ - ---
--- ---- - - -- - - -------------- ---- -
------ -- -------------- - ----------
-
------ -- ------------------------------ - ---
------ -------
-
----- ---- - ------
----- --- - --------------- ----------
----------------- -- -- ------- -----在上面的代码中，我们定义了一个 template() 函数，它接受一个模板字符串和一个或多个值作为参数，并返回一个字符串。在函数内部，我们使用了 strings.raw 属性来获取原始字符串，然后将它和值拼接起来，最终返回一个字符串。
2. 使用 String.raw() 方法实现多行字符串
在 ECMAScript 6 中，我们可以使用模板字符串来实现多行字符串，比如：
const str = `Hello, World!`; console.log(str); // 输出 "Hello,\nWorld!"
但是在一些旧的浏览器中，可能并不支持模板字符串。为了解决这个问题，我们可以使用 String.raw() 方法来实现多行字符串，例如：
const str = String.raw`Hello, World!`; console.log(str); // 输出 "Hello,\nWorld!"
在上面的代码中，我们使用了 String.raw() 方法来输出一个多行字符串。由于原始字符串不处理反斜杠，所以换行符并没有被转义。
总结
使用 ECMAScript 2017 的 String.raw() 方法可以帮助我们实现原始字符串输出，避免了使用转义字符的麻烦。除了基本用法之外，String.raw() 方法还有一些高级用法，可以帮助我们更灵活地使用原始字符串。在实际开发中，我们可以根据需要选择使用不同的用法来简化代码并提高代码的可读性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/650559b595b1f8cacd1da258