This is the 21st day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021

ECMAScript 2018 (E9) Features

CMAScript 2018 or ES9 was officially released by TC39 at the end of June 2018. The full version can be viewed here.

The template string for a non-escape sequence

Before removing syntactic restrictions on escaping sequences in tagged template strings, \u begins a Unicode escape, \x begins a hexadecimal escape, and ‘ ‘begins an octal escape followed by a number. This makes it impossible to create specific strings, such as the Windows file path C:\uuu\ XXX \111

Regular expression Unicode escape

Previously, characters could be matched by the name of the character set, i.e. S stands for blank /^\s+$/u.test(” “) // true in ES9, Unicode attribute escapes were added, of the form \p{… } and \ {P… }, using the tag u in regular expressions

/ ^ \ p {White_Space} + $/ u.t est (' ') / / space / / true / ^ \ p {Script = Greek} + $/ u.t est (' mu epsilon tau ά ') / / the Greek letter / / true /^\p{Script=Latin}+$/u.test(' Gru ße') // Match Latin lettersCopy the code

Regular expression s flag

Before, you can match any character except the newline es9, and then you can use the tag S, and so on. Es9 /s.test(‘hello\nes9’) //true

RegExp Named Capture Groups

Capture and non-capture groups

() represents capture groups, and () stores the matched value of each group. The captured subsequence can later be used in an expression using a Back reference. Start with a non-capture group, no matching value is saved, nor can it be referenced later, where? : and? =,? <= and so on are all non-capture elements. The capture groups using these non-capture elements are numbered by index, so the code is not readable

const reg = /(\d{4})-(\d{2})-(\d{2})/u; const matched = reg.exec('2018-12-31'); matched[0]; // 2018-12-12 matched[1]; // 2018 matched[2]; // 12 matched[3]; / / 31Copy the code
Named capture group

In ES9, named capture groups are allowed to use symbols?

, the name of the matching content in the parentheses is placed in groups to improve the readability of the code

const reg = /(? <year>\d{4})-(? <month>\d{2})-(? <day>\d{2})/u const matched = reg.exec('2018-12-31') matched.groups.year; // 2018 matched.groups.month; // 12 matched.groups.day; / / 31Copy the code

Named capture groups can also be used in the replace() method for example to convert dates to “year month day” format:

const reg = /(? <year>\d{4})-(? <month>\d{2})-(? <day>\d{2})/u; '2018-12-31'. The replace (reg, '$< year > years $< month > on $< day >'); December 31, 2018Copy the code

Regular expression reverse assertion (lookbehind)

Forward prior assertion:? =

Format: (? =pattern) exp1(? =exp2) = exp1

const reg = /runoob(? = [\ d +) / 123456 g / / in front of the match Numbers runoob runoob123runoobbdhh / / will match only the first 23 runoob456runoob789 runoob / / good match to bothCopy the code

Negative antecedent assertion:? !

Format: (? ! pattern) exp1(? ! Exp2): find exp1 not followed by exp2

const reg = /runboo(? ! [0-9]+)/g // matches runboo 1233runboo-google12runoob1233, which is not followed by a numberCopy the code

Forward backward assertion (ES9) 😕 < =

Format: (? <=pattern) (? <=exp2)exp1: find exp1 before exp2

const reg = /(? < = [0-9] +) runboo/g / / in front of the match is digital runboo google123runboo456/1234 / runboo googlerunboo123runboo456/123 / match secondCopy the code

Negative trailing assertion (ES9) 😕 <!

Format: (? 

const reg = /(? < = [0-9] +) runboo/g / / in front of the match is not digital runboo google123runboo456/1234 / can't match to runboo googlerunboo123runboo456/123 / match the firstCopy the code

Extended operators (…)

Before… It can only be used for arrays, but after ES9, it can also be used for objects, just like arrays

Promise.finally()

The result of a Promise without an argument is either a success then or a failure catch, making some common logic code that must be written in both callbacks (for example: Perform state changes, delete conversations, etc.) Then there is finally(), where the logic is placed in one place and the Promise runs whether it succeeds or fails

new Promise((reslove, reject) => {
  // ...
}).then((res) => {
  // reslove
}).catch((err) => {
  // reject
}).finally(() => {
  // complete
});
Copy the code

Asynchronous iterative

In ES8, asynchronous functions can be executed in synchronous writing using async/await, but in a loop, the loop remains synchronous, i.e. the loop is complete before the internal asynchronous function is called

async function foo(array) { for (let i of array) { await doSomething(i); }}Copy the code

Es9 introduces asynchronous iterators to make await and for… The of loop is used together

async function foo (array) {
    for await (let i of array) {
        doSomething(i)
    }
}
Copy the code