JavaScript ECMAScript 2021


Оглавление

    Показать оглавление

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

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

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

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

  • Promise Any():
    const first=await Promise.any([prom1,prom2,prom3]);

  • Строка replaceAll()

  • Числовые разделители (_)


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

  • Массив в()

  • Строка в()

  • Регэксп/д

  • Объект.hasOwn()

  • ошибка.причина

  • ожидайте импорта

  • Частные методы и поля

  • Объявления полей класса

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

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

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


Заменить все строки JavaScript()

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

Пример

text = text.replaceAll("Cats","Dogs");
text = text.replaceAll("cats","dogs");

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

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Strings</h1>
<h2>The replaceAll() Method</h2>

<p>ES2021 intoduced the string method replaceAll().</p>

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

<script>
let text = "I love cats. Cats are very easy to love. Cats are very popular."
text = text.replaceAll("Cats","Dogs");
text = text.replaceAll("cats","dogs");

document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

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

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

Пример

text = text.replaceAll(/Cats/g,"Dogs");
text = text.replaceAll(/cats/g,"dogs");

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

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Strings</h1>
<h2>The replaceAll() Method</h2>

<p>ES2021 intoduced the string method replaceAll().</p>

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

<script>
let text = "I love cats. Cats are very easy to love. Cats are very popular";
text = text.replaceAll(/Cats/g,"Dogs");
text = text.replaceAll(/cats/g,"dogs");

document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

Примечание

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



Числовой разделитель JavaScript (_)

В ES2021 введен числовой разделитель (_), чтобы сделать числа более читабельными:

Пример

const num = 1_000_000_000;

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

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Numbers</h1>

<p>ES2021 intoduced the numeric separator (_) to make numbers more readable:</p>
<p id="demo"></p>

<script>
const num = 1_000_000_000;
document.getElementById("demo").innerHTML = num;
</script>

</body>
</html>

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

Пример

const num1 = 1_000_000_000;
const num2 = 1000000000;
(num1 === num2); 

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

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Numbers</h1>

<p>ES2021 intoduced the numeric separator (_) to make numbers more readable:</p>

<p>Is 1_000_000_000 the same as 1000000000?</p>
<p id="demo"></p>

<script>
const num1 = 1_000_000_000;
const num2 = 1000000000;
document.getElementById("demo").innerHTML = (num1 === num2);
</script>

</body>
</html>

Числовой разделитель можно поставить в любом месте числа:

Пример

const num1 = 1_2_3_4_5;

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

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Numbers</h1>

<p>ES2021 intoduced the numeric separator (_) to make numbers more readable:</p>
<p id="demo"></p>

<script>
const num = 1_2_3_4_5;
document.getElementById("demo").innerHTML = num;
</script>

</body>
</html>

Примечание

Числовой разделитель не допускается ни в начале, ни в конце числа.

В JavaScript только переменные могут начинаться с _.

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

Chrome 75 Edge 79 Firefox 74 Safari 13.1 Opera 67
Jun 2019 Jan 2020 Oct 2019 Sep 2019 Jun 2019

Массив JavaScript at()

В ES2022 появился метод массива at():

Примеры

Получите третий элемент фруктов:

const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fruit = fruits.at(2);

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

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The at() Method</h2>

<p>The at() method returns an indexed element from an array:</p>

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

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fruit = fruits.at(2);

document.getElementById("demo").innerHTML = fruit;
</script>

</body>
</html>

Получите третий элемент фруктов:

const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fruit = fruits[2];

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

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>Bracket Notation</h2>

<p>The bracked notation [] returns an indexed element from an array:</p>

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

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fruit = fruits[2];

document.getElementById("demo").innerHTML = fruit;
</script>

</body>
</html>

Метод at() возвращает индексированный элемент из массива.

Метод at() возвращает то же, что и [].

Метод at() поддерживается во всех современных браузерах с марта 2022 года:

Chrome 92 Edge 92 Firefox 90 Safari 15.4 Opera 78
Apr 2021 Jul 2021 Jul 2021 Mar 2022 Aug 2021

Примечание

Многие языки позволяют индексировать отрицательные скобки, например [-1], для доступа к элементам с конца объект/массив/строка.

В JavaScript это невозможно, поскольку [] используется для доступа как к массивам, так и к объектам. obj[-1] относится к значению ключа -1, а не к последнему свойству объекта.

Метод at() был представлен в ES2022 для решения этой проблемы.


Строка JavaScript at()

В ES2022 появился строковый метод at():

Примеры

Получите третью букву имени:

const name = "W3Schools";
let letter = name.at(2);

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

<!DOCTYPE html>
<html>
<body>

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

<p>The at() method returns an indexed element from a string:</p>

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

<script>
const name = "W3Schools";
let letter = name.at(2);

document.getElementById("demo").innerHTML = letter;
</script>

</body>
</html>

Получите третью букву имени:

const name = "W3Schools";
let letter = name[2];

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

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>Bracket Notation</h2>

<p>The bracked notation [] returns an indexed element from a string:</p>

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

<script>
const name = "W3Schools";
let letter = name[2];

document.getElementById("demo").innerHTML = letter;
</script>

</body>
</html>

Метод at() возвращает индексированный элемент из строки.

Метод at() возвращает то же, что и [].

Метод at() поддерживается во всех современных браузерах с марта 2022 года:

Chrome 92 Edge 92 Firefox 90 Safari 15.4 Opera 78
Apr 2021 Jul 2021 Jul 2021 Mar 2022 Aug 2021