ES2018新特性之：非转义序列的模板字符串

ES2018 新特征

• 异步迭代器
• 正则表达式反向(lookbehind)断言
• 正则表达式 Unicode 转义
• 非转义序列的模板字符串（本文）
• 正则表达式 s/dotAll 形式
• 正则表达式定名捕捉组
• 对象睁开运算符
• Promise.prototype.finally

这个 ECMAScript 提案 “Template Literal Revision” 由 Tim Disney 担任，现在已进入 stage 4，本提案是 ECMAScript 2018(ES9) 的一部分。该提案让我们运用模板字符串的标签函数语法越发的自在。

1. 标签函数 Tagged templates

标签使您能够用函数剖析模板字符串。标签函数的第一个参数包括一个字符串值的数组。其他的参数与表达式相干。末了，你的函数能够返回处理好的的字符串（或许它能够返回完整差别的东西）。

function foo(str) {
return str[0].toUpperCase();
}
foo`justjavac`; // 输出 JUSTJAVAC
foo`Xyz`; // 输出 XYZ

2. String.raw()

String.raw() 是一个模板字符串的标签函数，它的作用类似于 Python 中的字符串前缀 r 和 C# 中的字符串前缀 @，是用来猎取一个模板字符串的原始字面量值的。

语法：

String.raw(callSite, ...substitutions)
String.raw`templateString`

String.raw() 是唯一一个内置的模板字符串标签函数。

var str = String.raw`Hi\n${2+3}!`;
// "Hi\n5!"
str.length;
// 字符串长度为 6
str.split('').join(',');
// 分开字符串
// 结果是："H,i,\,n,5,!"

3. 原始字符串

在标签函数的第一个参数中，存在一个特别的属性 raw，我们能够经由过程它来访问模板字符串的原始字符串，而不经由特别字符的替代。

function foo(str) {
console.log(str);
return str[0].toUpperCase();
}
foo`justjavac`;
// 控制台输出
["justjavac", raw: ["justjavac"]]
foo`just\\java\\c`;
// 控制台输出
["just\java\c", raw: ["just\\java\\c"]]

4. 带标签函数的转义序列

自 ES2016 起，带标签的模版字面量恪守以下转义序列的划定规矩：

• Unicode字符以&＃8221;u&＃8221;开首，比方 \u00A9
• Unicode码位用&＃8221;u{}&＃8221;示意，比方 \u{2F804}
• 十六进制以&＃8221;x&＃8221;开首，比方 \xA9
• 八进制以&＃8221;&＃8221;和数字开首，比方 \251

关于每个 ECMAScript 语法，剖析器都会去查找有用的转义序列，关于无效的转义序列，直接抛出 SyntaxError：

String.raw`\`;
Uncaught SyntaxError: Unterminated template literal

5. ES2018 关于不法转义序列的订正

带标签函数的模版字符串应当许可嵌套支撑罕见转义序列的言语（比方 DSLs、LaTeX）。

因而 ECMAScript 2018 规范移除了对 ECMAScript 在带标签的模版字符串中转义序列的语法限定。

function tag(strs) {
strs[0] === undefined
strs.raw[0] === "\\unicode and \\u{55}";
}
// 在标签函数中运用
tag`\unicode and \u{55}`; // 结果是 undefined
// 不在标签函数中运用
let bad = `bad escape sequence: \unicode`;
// throws early error：SyntaxError: Invalid Unicode escape sequence

6. 完成

• V8 &＃8211; Chrome 62
• SpiderMonkey &＃8211; Firefox 53
• JavascriptCore &＃8211; 版本未知
• ChakraCore &＃8211; 开辟中
• Babel &＃8211; 7.x

7. 相干链接：

• https://github.com/tc39/propo&＃8230;
• https://tc39.github.io/propos&＃8230;
• https://developer.mozilla.org&＃8230;