ES2018 new features

  • Asynchronous iterator
  • Regular expression reverse (lookbehind) assertion
  • Regular expression Unicode escape
  • Template strings for non-escape sequences (this article)
  • Regular expression s/dotAll mode
  • Regular expressions name capture groups
  • Object expansion operator
  • Promise.prototype.finally

This ECMAScript proposal “Template Literal Revision” by Tim Disney is currently in stage 4 and is part of ECMAScript 2018(ES9). This proposal gives us more freedom with the tag function syntax for template strings.

1. Tag functions Tagged templates

The tag lets you parse template strings with functions. The first argument to the label function contains an array of string values. The rest of the arguments are expressions related. Finally, your function can return the processed string (or it can return something completely different).

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

foo`justjavac`; / / output JUSTJAVAC
foo`Xyz`; XYZ / / output
Copy the code

2. String.raw()

String.raw() is a template String label function, similar to the String prefix rin Python and @ in C#, that fetches the raw literal value of a template String.

Grammar:

String.raw(callSite, ... substitutions)String.raw`templateString`
Copy the code

String.raw() is the only built-in template String tag function.

var str = String.raw`Hi\nThe ${2+3}! `;
// "Hi\n5!"

str.length;
// Contains 6 characters

str.split(' ').join(', ');
// Delimit strings
// Result: "H, I,\,n,5,!"
Copy the code

3. Raw string

In the first argument to the tag function, there is a special attribute raw that allows us to access the raw string of the template string without special character substitution.

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

foo`justjavac`;

// Console output
["justjavac".raw: ["justjavac"]]

foo`just\\java\\c`;
// Console output
["just\java\c".raw: ["just\\java\\c"]]
Copy the code

4. Escape sequences with labeled functions

As of ES2016, tagged template literals obey the following rules for escape sequences:

  • Unicode characters begin with “\u”, for example\u00A9
  • Unicode code points are represented by “\u{}”, for example\u{2F804}
  • Hex starts with “\x”, for example\xA9
  • Octal starts with “” and a number, for example\ 251

For every ECMAScript syntax, the parser looks for a valid escape sequence and raises a SyntaxError for an invalid escape sequence:

String.raw` \ `; Uncaught SyntaxError: Unterminated template literalCopy the code

5. Revision of ES2018 on illegal escape sequences

Template strings with tagged functions should allow the nesting of languages that support common escape sequences (such as DSLs, LaTeX).

The ECMAScript 2018 standard therefore removes syntactic restrictions on ECMAScript escaping sequences in tagged template strings.

function tag(strs) {
  strs[0= = =undefined
  strs.raw[0= = ="\\unicode and \\u{55}";
}

// used in tag functions
tag`\unicode and \u{55}`; // the result is undefined

// Not used in tag functions
let bad = `bad escape sequence: \unicode`;
Throws early error: SyntaxError: Invalid Unicode escape sequence
Copy the code

6. Implementation

  • V8 – Chrome 62
  • SpiderMonkey – Firefox 53
  • JavaScriptCore – Version unknown
  • ChakraCore – Under development
  • Babel – 7.x

7. Related links:

  • 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