ES2018指南-CSDN博客

ES2018 is the latest version of the ECMAScript standard.

ES2018是ECMAScript标准的最新版本。

What are the new things introduced in it?

它引入了哪些新东西？

剩余/价差属性 (Rest/Spread Properties)

ES6 introduced the concept of a rest element when working with array destructuring:

ES6在处理数组解构时引入了rest元素的概念：

const numbers = [1, 2, 3, 4, 5]
[first, second, ...others] = numbers

and spread elements:

和传播元素 ：

const numbers = [1, 2, 3, 4, 5]
const sum = (a, b, c, d, e) => a + b + c + d + e
const sumOfNumbers = sum(...numbers)

ES2018 introduces the same but for objects.

ES2018引入了相同的内容，但针对对象。

Rest properties:

休息性质 ：

const { first, second, ...others } = { first: 1, second: 2, third: 3, fourth: 4, fifth: 5 }

first // 1
second // 2
others // { third: 3, fourth: 4, fifth: 5 }

Spread properties allow to create a new object by combining the properties of the object passed after the spread operator:

传播属性允许通过组合在传播操作符之后传递的对象的属性来创建新对象：

const items = { first, second, ...others }
items //{ first: 1, second: 2, third: 3, fourth: 4, fifth: 5 }

异步迭代 (Asynchronous iteration)

The new construct for-await-of allows you to use an async iterable object as the loop iteration:

新的for-await-of构造允许您将异步可迭代对象用作循环迭代：

for await (const line of readLines(filePath)) {
  console.log(line)
}

Since this uses await, you can use it only inside async functions, like a normal await (see async/await)

由于此命令使用await ，因此只能在async函数中使用它，例如普通的await (请参阅async / await )

Promise.prototype.finally() (Promise.prototype.finally())

When a promise is fulfilled, successfully it calls the then() methods, one after another.

兑现承诺后，成功地then()调用then()方法。

If something fails during this, the then() methods are jumped and the catch() method is executed.

如果在此期间发生故障， then()将跳过then()方法并执行catch()方法。

finally() allow you to run some code regardless of the successful or not successful execution of the promise:

finally()允许您运行某些代码，而不管承诺的执行成功与否：

fetch('file.json')
  .then(data => data.json())
  .catch(error => console.error(error))
  .finally(() => console.log('finished'))

正则表达式的改进 (Regular Expression improvements)

RegExp后置断言：根据其前面的字符串进行匹配 (RegExp lookbehind assertions: match a string depending on what precedes it)

This is a lookahead: you use ?= to match a string that’s followed by a specific substring:

这是一个先行内容：您使用?=来匹配后面跟特定子字符串的字符串：

/Roger(?=Waters)/

/Roger(?= Waters)/.test('Roger is my dog') //false
/Roger(?= Waters)/.test('Roger is my dog and Roger Waters is a famous musician') //true

?! performs the inverse operation, matching if a string is not followed by a specific substring:

?! 执行逆运算，如果字符串后没有特定的子字符串则匹配：

/Roger(?!Waters)/

/Roger(?! Waters)/.test('Roger is my dog') //true
/Roger(?! Waters)/.test('Roger Waters is a famous musician') //false

Lookaheads use the ?= symbol. They were already available.

提前使用?=符号。它们已经可用。

Lookbehinds, a new feature, uses ?<=.

Lookbehinds是一项新功能，使用?<= 。

/(?<=Roger) Waters/

/(?<=Roger) Waters/.test('Pink Waters is my dog') //false
/(?<=Roger) Waters/.test('Roger is my dog and Roger Waters is a famous musician') //true

A lookbehind is negated using ?<!:

使用?<! ：

/(?<!Roger) Waters/

/(?<!Roger) Waters/.test('Pink Waters is my dog') //true
/(?<!Roger) Waters/.test('Roger is my dog and Roger Waters is a famous musician') //false

Unicode属性转义`\p{…}`和`\P{…}` (Unicode property escapes `\p{…}` and `\P{…}`)

In a regular expression pattern you can use \d to match any digit, \s to match any character that’s not a white space, \w to match any alphanumeric character, and so on.

在正则表达式模式中，您可以使用\d来匹配任何数字， \s来匹配非空格的任何字符， \w来匹配任何字母数字的字符，依此类推。

This new feature extends this concept to all Unicode characters introducing \p{} and its negation \P{}.

这项新功能将该概念扩展到引入\p{}及其否定\P{}所有Unicode字符。

Any unicode character has a set of properties. For example Script determines the language family, ASCII is a boolean that’s true for ASCII characters, and so on. You can put this property in the graph parentheses, and the regex will check for that to be true:

任何unicode字符都有一组属性。例如， Script确定了语言系列， ASCII是布尔值，对于ASCII字符是正确的，依此类推。您可以将此属性放在图形括号中，正则表达式将检查该属性是否为真：

/^\p{ASCII}+$/u.test('abc')   //✅
/^\p{ASCII}+$/u.test('ABC@')  //✅
/^\p{ASCII}+$/u.test('ABC🙃') //❌

ASCII_Hex_Digit is another boolean property, that checks if the string only contains valid hexadecimal digits:

ASCII_Hex_Digit是另一个布尔属性，用于检查字符串是否仅包含有效的十六进制数字：

/^\p{ASCII_Hex_Digit}+$/u.test('0123456789ABCDEF') //✅
/^\p{ASCII_Hex_Digit}+$/u.test('h')                //❌

There are many other boolean properties, which you just check by adding their name in the graph parentheses, including Uppercase, Lowercase, White_Space, Alphabetic, Emoji and more:

还有许多其他布尔属性，您可以通过在图形括号中添加它们的名称来进行检查，包括Uppercase ， Lowercase ， White_Space ， Alphabetic ， Emoji等等：

/^\p{Lowercase}$/u.test('h') //✅
/^\p{Uppercase}$/u.test('H') //✅

/^\p{Emoji}+$/u.test('H')   //❌
/^\p{Emoji}+$/u.test('🙃🙃') //✅

In addition to those binary properties, you can check any of the unicode character properties to match a specific value. In this example, I check if the string is written in the greek or latin alphabet:

除了这些二进制属性外，您还可以检查任何unicode字符属性以匹配特定值。在此示例中，我检查字符串是否以希腊字母或拉丁字母书写：

/^\p{Script=Greek}+$/u.test('ελληνικά') //✅
/^\p{Script=Latin}+$/u.test('hey') //✅

Read more about all the properties you can use directly on the proposal.

阅读有关可直接在投标中使用的所有属性的更多信息。

命名捕获组 (Named capturing groups)

In ES2018 a capturing group can be assigned to a name, rather than just being assigned a slot in the result array:

在ES2018中，可以为捕获组分配一个名称，而不仅仅是在结果数组中分配一个插槽：

const re = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/
const result = re.exec('2015-01-02')

// result.groups.year === '2015';
// result.groups.month === '01';
// result.groups.day === '02';

正则表达式的`s`标志 (The `s` flag for regular expressions)

The s flag, short for single line, causes the . to match new line characters as well. Without it, the dot matches regular characters but not the new line:

s标志(表示单行 )导致. 以匹配换行符。没有它，该点将匹配常规字符，但不匹配新行：

/hi.welcome/.test('hi\nwelcome') // false
/hi.welcome/s.test('hi\nwelcome') // true

翻译自: https://flaviocopes.com/es2018/

ES2018指南