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

时间 2019-11-15

标签 es2018 特征转义序列模板字符串繁體版

原文原文链接

ES2018 新特性

这个 ECMAScript 提案 “Template Literal Revision” 由 Tim Disney 负责，目前已经进入 stage 4，本提案是 ECMAScript 2018(ES9) 的一部分。该提案让咱们使用模板字符串的标签函数语法更加的自由。html

1. 标签函数 Tagged templates

标签使您能够用函数解析模板字符串。标签函数的第一个参数包含一个字符串值的数组。其他的参数与表达式相关。最后，你的函数能够返回处理好的的字符串（或者它能够返回彻底不一样的东西）。java

function foo(str) {
    return str[0].toUpperCase();
}

foo`justjavac`; // 输出 JUSTJAVAC
foo`Xyz`; // 输出 XYZ

2. `String.raw()`

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

语法：github

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

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

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 起，带标签的模版字面量遵照如下转义序列的规则：api

Unicode字符以"u"开头，例如 \u00A9
Unicode码位用"u{}"表示，例如 \u{2F804}
十六进制以"x"开头，例如 \xA9
八进制以""和数字开头，例如 \251

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

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

5. ES2018 关于非法转义序列的修订

带标签函数的模版字符串应该容许嵌套支持常见转义序列的语言（例如 DSLs、LaTeX）。babel

所以 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 - Chrome 62
SpiderMonkey - Firefox 53
JavaScriptCore - 版本未知
ChakraCore - 开发中
Babel - 7.x