JavaScript ECMAScript 2021


Índice

    Mostrar índice

Números de versão JavaScript

As versões antigas do JS são nomeadas por números: ES5 (2009) e ES6 (2015).

A partir de 2016, as versões são nomeadas por ano: ECMAScript 2016, 2017, 2018, 2019, ...

Novos recursos no ES2021

  • Promessa any():
    style="word-wrap: break-word;">const first=await Promise.any([prom1,prom2,prom3]);

  • String substituirTodos()

  • Separadores Numéricos (_)


Novos recursos no ES2022

  • Matriz em()

  • String em()

  • ExpReg /d

  • Object.hasOwn()

  • erro.causa

  • aguardar importação

  • Métodos e campos privados

  • Declarações de campo de classe

Aviso

Esses recursos são relativamente novos.

Navegadores mais antigos podem precisar de um código alternativo (Polyfill)


String JavaScript SubstituirTudo()

ES2021 introduziu o método string replaceAll():

Exemplo

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

Experimente você mesmo →

<!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>

O método replaceAll() permite que você especifique um expressão regular em vez de uma string a ser substituída.

Se o parâmetro for uma expressão regular, o sinalizador global (g) deverá ser definido, caso contrário um TypeError é lançado.

Exemplo

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

Experimente você mesmo →

<!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>

Observação

ES2020 introduziu o método string matchAll().



Separador numérico JavaScript (_)

ES2021 introduziu o separador numérico (_) para tornar os números mais legíveis:

Exemplo

const num = 1_000_000_000;

Experimente você mesmo →

<!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>

O separador numérico é apenas para uso visual.

Exemplo

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

Experimente você mesmo →

<!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>

O separador numérico pode ser colocado em qualquer lugar de um número:

Exemplo

const num1 = 1_2_3_4_5;

Experimente você mesmo →

<!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>

Observação

O separador numérico não é permitido no início ou no final de um número.

Em JavaScript apenas variáveis podem começar com _.

O separador numérico é compatível com todos os navegadores modernos desde janeiro de 2020:

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

Matriz JavaScript at()

ES2022 introduziu o método array at():

Exemplos

Obtenha o terceiro elemento das frutas:

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

Experimente você mesmo →

<!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>

Obtenha o terceiro elemento das frutas:

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

Experimente você mesmo →

<!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>

O método at() retorna um elemento indexado de um array.

O método at() retorna o mesmo que [].

O método at() é compatível com todos os navegadores modernos desde março de 2022:

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

Observação

Muitas linguagens permitem a indexação de colchetes negativos como [-1] para acessar elementos do final de um objeto/matriz/string.

Isso não é possível em JavaScript, porque [] é usado para acessar arrays e objetos. obj[-1] refere-se ao valor da chave -1, não à última propriedade do objeto.

O método at() foi introduzido no ES2022 para resolver este problema.


String JavaScript at()

ES2022 introduziu o método string at():

Exemplos

Obtenha a terceira letra do nome:

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

Experimente você mesmo →

<!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>

Obtenha a terceira letra do nome:

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

Experimente você mesmo →

<!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>

O método at() retorna um elemento indexado de uma string.

O método at() retorna o mesmo que [].

O método at() é compatível com todos os navegadores modernos desde março de 2022:

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