JavaScript ECMAScript 2020

Номера версий JavaScript

Старые версии JS названы номерами: ES5 (2009) и ES6 (2015).

С 2016 года версии именуются по годам: ECMAScript 2016, 2017, 2018, 2019,...

Новые возможности в ES2020

БигИнт
Строка matchAll()
Нулевой оператор объединения (??)
Необязательный оператор цепочки (?.)
Логический оператор присваивания И (&&=)
Логическое присваивание ИЛИ (||=)
Нулевое присваивание объединения (??=)
Promise allSettled():
Promise.allSettled([prom1,prom2,prom3]).then {
Динамический импорт

Предупреждение

Эти функции являются относительно новыми.

Старым браузерам может потребоваться альтернативный код (Polyfill).

JavaScript BigInt

Переменные JavaScript BigInt используются для хранения больших целочисленных значений. которые слишком велики, чтобы их можно было представить обычным числом JavaScript.

Целые числа в JavaScript имеют точность примерно до 15 цифр.

Целочисленный пример

let x = 999999999999999;
let y = 9999999999999999; // too big

Попробуйте сами →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Numbers</h1>
<h2>Integer Precision</h2>

<p>Integers (numbers without a period or exponent notation) are accurate up to 15 digits:</p>

<p id="demo"></p>

<script>
let x = 999999999999999;
let y = 9999999999999999;
document.getElementById("demo").innerHTML = x + "<br>" + y;
</script>

</body>
</html>

Пример BigInt

let x = 9999999999999999;
let y = 9999999999999999n;

Попробуйте сами →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Numbers</h1>
<h2>Integer and BigInt</h2>

<p id="demo"></p>

<script>
let x = 9999999999999999;
let y = BigInt("9999999999999999");
document.getElementById("demo").innerHTML = x + "<br>" + y;
</script>

</body>
</html>

Чтобы создать BigInt, добавьте n в конец целого числа или вызовите BigInt():

Пример

let x = 1234567890123456789012345n;
let y = BigInt(1234567890123456789012345)

Попробуйте сами →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Numbers</h1>
<h2>Create a BigInt</h2>

<p id="demo"></p>

<script>
let x = 123456789012345678901234567890n;
let y = BigInt("123456789012345678901234567890");
document.getElementById("demo").innerHTML = x + "<br>" + y;
</script>

</body>
</html>

JavaScript typeof a BigInt — это "bigint":

Пример

let x = BigInt(999999999999999);
let type = typeof x;

Попробуйте сами →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Numbers</h1>
<h2>BigInt typeof</h2>

<p>The typeof a BigInt is:</p>
<p id="demo"></p>

<script>
let x = BigInt("9999999999999999");
document.getElementById("demo").innerHTML = typeof x;
</script>

</body>
</html>

BigInt поддерживается во всех современных браузерах с сентября 2020 г.:


Chrome 67	Edge 79	Firefox 68	Safari 14	Opera 54
May 2018	Jan 2020	Jul 2019	Sep 2020	Jun 2018

Строка JavaScript matchAll()

До ES2020 не существовало строкового метода, который можно было бы использовать для поиска всех вхождений. строки в строке.

Пример

const iterator = text.matchAll("Cats");

Попробуйте сами →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The matchAll() Method</h2>

<p>ES2020 intoduced the string method matchAll().</p>

<p id="demo"></p>

<script>
let text = "I love cats. Cats are very easy to love. Cats are very popular."
const iterator = text.matchAll("Cats");

document.getElementById("demo").innerHTML = Array.from(iterator);
</script>

</body>
</html>

Если параметр является регулярным выражением, глобальный флаг (g) должен быть установлен, в противном случае выдается TypeError.

Пример

const iterator = text.matchAll(/Cats/g);

Попробуйте сами →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The matchAll() Method</h2>

<p>ES2020 intoduced the string method matchAll().</p>

<p id="demo"></p>

<script>
let text = "I love cats. Cats are very easy to love. Cats are very popular."
const iterator = text.matchAll(/Cats/g);

document.getElementById("demo").innerHTML = Array.from(iterator);
</script>

</body>
</html>

Если вы хотите выполнять поиск без учета регистра, необходимо установить флаг нечувствительности (i):

Пример

const iterator = text.matchAll(/Cats/gi);

Попробуйте сами →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The matchAll() Method</h2>

<p>ES2020 intoduced the string method matchAll().</p>

<p id="demo"></p>

<script>
let text = "I love cats. Cats are very easy to love. Cats are very popular."
const iterator = text.matchAll(/Cats/gi);

document.getElementById("demo").innerHTML = Array.from(iterator);
</script>

</body>
</html>

Примечание

В ES2021 появился строковый метод replaceAll().

Нулевой оператор объединения (??)

Оператор ?? возвращает первый аргумент, если он не нулевой. (null или не определено).

В противном случае он возвращает второе.

Пример

let name = null;
let text = "missing";
let result = name ?? text;

Попробуйте сами →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Operators</h1>
<h2>The ?? Operator</h2>
<p>The ?? operator returns the first argument if it is not nullish (null or undefined). Otherwise it returns the second.</p>

<p id="demo"></p>

<script>
let name = null;
let text = "missing";
let result = name ?? text;
document.getElementById("demo").innerHTML = "The name is " + result; 
</script>

</body>
</html>

Нулевой оператор поддерживается во всех современных браузерах с марта 2020 года:


Chrome 80	Edge 80	Firefox 72	Safari 13.1	Opera 67
Feb 2020	Feb 2020	Jan 2020	Mar 2020	Mar 2020

Необязательный оператор цепочки (?.)

Оператор необязательного связывания возвращает undefined, если объект undefined или null (вместо выдачи ошибки).

Пример

const car = {type:"Fiat", model:"500", color:"white"};
let name = car?.name;

Попробуйте сами →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Operators</h1>
<h2>The ?. Operator</h2>
<p>The ?. operator returns undefined if an object is undefined or null (instead of throwing an error).</p>

<p>Car name is:</p>
<p id="demo"></p>

<script>
const car = {type:"Fiat", model:"500", color:"white"};
let name = car?.name;
document.getElementById("demo").innerHTML = name;
</script>

</body>
</html>

Оператор ?.= поддерживается во всех современных браузерах с марта 2020 года:


Chrome 80	Edge 80	Firefox 74	Safari 13.1	Opera 67
Feb 2020	Feb 2020	Mar 2020	Mar 2020	Mar 2020

Оператор &&=

Логический оператор присваивания И используется между двумя значениями.

Если первое значение — true, назначается второе значение.

Пример логического И присваивания

let x = 10;
x &&= 5;

Попробуйте сами →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Assignments</h1>
<h2>Logical AND Assignment</h2>
<h3>The &amp;&amp;= Operator</h3>
<p>If the first value is true, the second value is assigned.</p>

<p id="demo"></p>

<script>
let x = 100;
x &&= 5;
document.getElementById("demo").innerHTML = "Value of x is: " + x;
</script>

</body>
</html>

Оператор &&= поддерживается во всех современных браузерах с сентября 2020 года:


Chrome 85	Edge 85	Firefox 79	Safari 14	Opera 71
Aug 2020	Aug 2020	Mar 2020	Sep 2020	Sep 2020

Оператор ||=

Оператор присваивания «Логическое ИЛИ» используется между двумя значениями.

Если первое значение — false, присваивается второе значение.

Пример присваивания логического ИЛИ

let x = 10;
x ||= 5;

Попробуйте сами →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Assignments</h1>
<h2>Logical OR Assignment</h2>
<h3>The ||= Operator</h3>

<p>If the first value is false, the second value is assigned:</p>
<p id="demo"></p>

<script>
let x = undefined;
x ||= 5;
document.getElementById("demo").innerHTML = "Value of x is: " + x;
</script>

</body>
</html>

Оператор ||= поддерживается во всех современных браузерах с сентября 2020 года:


Chrome 85	Edge 85	Firefox 79	Safari 14	Opera 71
Aug 2020	Aug 2020	Mar 2020	Sep 2020	Sep 2020

Оператор ??=

Оператор присваивания нулевого объединения используется между двумя значениями.

Если первое значение — undefined или null, назначается второе значение.

Пример назначения нулевого объединения

let x;
x ??= 5;

Попробуйте сами →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Assignments</h1>
<h2>The ??= Operator</h2>
<p>The ??= operator is used between two values. If the first value is undefined or null, the second value is assigned.</p>

<p id="demo"></p>

<script>
let x;
document.getElementById("demo").innerHTML = x ??= 5; 
</script>

</body>
</html>

Оператор ??= поддерживается во всех современных браузерах с сентября 2020 года:


Chrome 85	Edge 85	Firefox 79	Safari 14	Opera 71
Aug 2020	Aug 2020	Mar 2020	Sep 2020	Sep 2020

JavaScript ECMAScript 2020

Оглавление

Номера версий JavaScript

Новые возможности в ES2020

Предупреждение

JavaScript BigInt

Целочисленный пример

Пример BigInt

Пример

Пример

Строка JavaScript matchAll()

Пример

Пример

Пример

Примечание

Нулевой оператор объединения (??)

Пример

Необязательный оператор цепочки (?.)

Пример

Оператор &&=

Пример логического И присваивания

Оператор ||=

Пример присваивания логического ИЛИ

Оператор ??=

Пример назначения нулевого объединения