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, ...
BigInt
String matchAll()
O Operador Coalescente Nulo (??)
O operador de encadeamento opcional (?.)
Operador lógico E de atribuição (&&=)
Atribuição OU Lógica (||=)
Atribuição de coalescência nula (??=)
Promessa allSettled():style="word-wrap: break-word;">Promise.allSettled([prom1,prom2,prom3]).então {}
Importação Dinâmica
Esses recursos são relativamente novos.
Navegadores mais antigos podem precisar de um código alternativo (Polyfill)
Variáveis JavaScript BigInt são usadas para armazenar grandes valores inteiros que são grandes demais para serem representados por um Número JavaScript normal.
Os inteiros JavaScript são precisos apenas até cerca de 15 dígitos.
let x = 999999999999999;
let y = 9999999999999999; // too bigExperimente você mesmo →
<!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>
let x = 9999999999999999;
let y = 9999999999999999n;Experimente você mesmo →
<!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>
Para criar um BigInt, anexe n ao final de um número inteiro ou chame BigInt():
let x = 1234567890123456789012345n;
let y = BigInt(1234567890123456789012345)Experimente você mesmo →
<!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>
O typeof JavaScript de um BigInt é "bigint":
let x = BigInt(999999999999999);
let type = typeof x;Experimente você mesmo →
<!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 é compatível com todos os navegadores modernos desde setembro de 2020:
| Chrome 67 | Edge 79 | Firefox 68 | Safari 14 | Opera 54 |
| May 2018 | Jan 2020 | Jul 2019 | Sep 2020 | Jun 2018 |
Antes do ES2020 não havia nenhum método de string que pudesse ser usado para pesquisar todas as ocorrências de uma string em uma string.
const iterator = text.matchAll("Cats");Experimente você mesmo →
<!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>
Se o parâmetro for uma expressão regular, o sinalizador global (g) deverá ser definido, caso contrário um TypeError é lançado.
const iterator = text.matchAll(/Cats/g);Experimente você mesmo →
<!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>
Se você deseja pesquisar sem distinção entre maiúsculas e minúsculas, o sinalizador insensível (i) deve ser definido:
const iterator = text.matchAll(/Cats/gi);Experimente você mesmo →
<!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 introduziu o método string replaceAll().
O operador ?? retorna o primeiro argumento se não for nulo (nulo ou indefinido).
Caso contrário, ele retorna o segundo.
let name = null;
let text = "missing";
let result = name ?? text;Experimente você mesmo →
<!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>
O operador nullish é compatível com todos os navegadores modernos desde março de 2020:
| Chrome 80 | Edge 80 | Firefox 72 | Safari 13.1 | Opera 67 |
| Feb 2020 | Feb 2020 | Jan 2020 | Mar 2020 | Mar 2020 |
O Operador de Encadeamento Opcional retorna indefinido se um objeto for indefinido ou nulo (em vez de gerar um erro).
const car = {type:"Fiat", model:"500", color:"white"};
let name = car?.name;Experimente você mesmo →
<!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>
O operador ?.= é compatível com todos os navegadores modernos desde março de 2020:
| Chrome 80 | Edge 80 | Firefox 74 | Safari 13.1 | Opera 67 |
| Feb 2020 | Feb 2020 | Mar 2020 | Mar 2020 | Mar 2020 |
O Operador de Atribuição AND Lógico é usado entre dois valores.
Se o primeiro valor for true, o segundo valor será atribuído.
let x = 10;
x &&= 5;Experimente você mesmo →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Assignments</h1>
<h2>Logical AND Assignment</h2>
<h3>The &&= 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>
O operador &&= é compatível com todos os navegadores modernos desde setembro de 2020:
| Chrome 85 | Edge 85 | Firefox 79 | Safari 14 | Opera 71 |
| Aug 2020 | Aug 2020 | Mar 2020 | Sep 2020 | Sep 2020 |
O Operador de Atribuição OR Lógico é usado entre dois valores.
Se o primeiro valor for false, o segundo valor será atribuído.
let x = 10;
x ||= 5;Experimente você mesmo →
<!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>
O operador ||= é compatível com todos os navegadores modernos desde setembro de 2020:
| Chrome 85 | Edge 85 | Firefox 79 | Safari 14 | Opera 71 |
| Aug 2020 | Aug 2020 | Mar 2020 | Sep 2020 | Sep 2020 |
O Operador de Atribuição de Coalescência Nula é usado entre dois valores.
Se o primeiro valor for indefinido ou nulo, o segundo valor será atribuído.
let x;
x ??= 5;Experimente você mesmo →
<!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>
O operador ??= é compatível com todos os navegadores modernos desde setembro de 2020:
| Chrome 85 | Edge 85 | Firefox 79 | Safari 14 | Opera 71 |
| Aug 2020 | Aug 2020 | Mar 2020 | Sep 2020 | Sep 2020 |