ES2018 新特徵之：非轉義序列的模板字串

justjavac發表於2018-03-05
特徵字串

ES2018 新特性

這個 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字元以"\u"開頭，例如 \u00A9
  • Unicode碼位用"\u{}"表示，例如 \u{2F804}
  • 十六進位制以"\x"開頭，例如 \xA9
  • 八進位制以""和數字開頭，例如 \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. 實現

7. 相關連結：

  • https://github.com/tc39/proposal-template-literal-revision

  • https://tc39.github.io/proposal-template-literal-revision/

  • https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/template_strings

相關文章