ES2018ガイド

ECMAScriptは、JavaScriptのベースとなる標準であり、ESと略されることがよくあります。 ECMAScriptのすべてと、ES2018、別名ES9で追加された機能をご覧ください

ES2018はの最新バージョンですECMAScript標準。

そこに導入された新しいものは何ですか?

Rest / Spreadプロパティ

ES6の概念を導入しました残りの要素で作業するとき配列の破壊

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

そしてスプレッド要素

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

ES2018でも同じですが、オブジェクト用です。

残りのプロパティ

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 }

スプレッドプロパティ後に渡されたオブジェクトのプロパティを組み合わせて、新しいオブジェクトを作成できるようにします。スプレッド演算子

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

非同期反復

新しい構成for-await-of非同期反復可能オブジェクトをループ反復として使用できます。

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

これは使用するのでawait、内部でのみ使用できますasync通常のように機能しますawait(見る非同期/待機

Promise.prototype.finally()

約束が果たされると、正常にthen()メソッド、次々に。

この間に何かが失敗した場合、then()メソッドがジャンプされ、catch()メソッドが実行されます。

finally()promiseの実行が成功したかどうかに関係なく、いくつかのコードを実行できるようにします。

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

正規表現の改善

RegExpルックビハインドアサーション:前にあるものに応じて文字列を照合します

これは先読みです:あなたは?=特定の部分文字列が後に続く文字列に一致させるには:

/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

?!逆演算を実行し、文字列がない特定の部分文字列が続きます:

/Roger(?!Waters)/

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

先読みは?=シンボル。それらはすでに利用可能でした。

後ろ向き、新機能は、?<=

/(?<=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

後読みはを使用して否定されます?<!

/(?<!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{…}

正規表現パターンでは、次を使用できます\d任意の数字に一致させるには、\s空白以外の文字に一致させるには、\w任意の英数字に一致するなど。

この新機能は、この概念をすべてのUnicode文字に拡張します。\p{}とその否定\P{}

どれかユニコード文字には一連のプロパティがあります。例えばScript語族を決定し、ASCIIASCII文字などに当てはまるブール値です。このプロパティをグラフの括弧に入れると、正規表現はそれがtrueであるかどうかをチェックします。

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

ASCII_Hex_Digit文字列に有効な16進数のみが含まれているかどうかをチェックする別のブールプロパティです。

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

他にも多くのブールプロパティがあり、グラフの括弧内に名前を追加するだけで確認できます。UppercaseLowercaseWhite_SpaceAlphabeticEmojiもっと:

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

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

これらのバイナリプロパティに加えて、特定の値に一致するように任意のUnicode文字プロパティをチェックできます。この例では、文字列がギリシャ語またはラテン語のアルファベットで書かれているかどうかを確認します。

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

使用できるすべてのプロパティの詳細を読む提案に直接

名前付きキャプチャグループ

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正規表現のフラグ

ザ・sフラグ、略して単線、原因.改行文字にも一致します。これがないと、ドットは通常の文字と一致しますが、改行とは一致しません。

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

私の無料ダウンロードJavaScriptビギナーズハンドブック


その他のjsチュートリアル: