JavaScript ECMAScript 2021


Tabla de contenido

    Mostrar tabla de contenidos

Números de versión de JavaScript

Las versiones antiguas de JS se nombran con números: ES5 (2009) y ES6 (2015).

A partir de 2016, las versiones se nombran por año: ECMAScript 2016, 2017, 2018, 2019,...

Nuevas funciones en ES2021

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

  • Cadena reemplazar todo()

  • Separadores numéricos (_)


Nuevas funciones en ES2022

  • Matriz en()

  • Cadena en()

  • ExpReg /d

  • Objeto.hasOwn()

  • error.causa

  • esperando importación

  • Métodos y campos privados.

  • Declaraciones de campos de clase

Advertencia

Estas características son relativamente nuevas.

Los navegadores más antiguos pueden necesitar un código alternativo (Polyfill)


Cadena de JavaScript Reemplazar todo()

ES2021 introdujo el método de cadena replaceAll():

Ejemplo

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

Pruébelo usted mismo →

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

El método replaceAll() le permite especificar un expresión regular en lugar de una cadena que se va a reemplazar.

Si el parámetro es una expresión regular, se debe establecer el indicador global (g); de lo contrario Se lanza un TypeError.

Ejemplo

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

Pruébelo usted mismo →

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

Nota

ES2020 introdujo el método de cadena matchAll().



Separador numérico de JavaScript (_)

ES2021 introdujo el separador numérico (_) para hacer que los números sean más legibles:

Ejemplo

const num = 1_000_000_000;

Pruébelo usted mismo →

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

El separador numérico es sólo para uso visual.

Ejemplo

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

Pruébelo usted mismo →

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

El separador numérico se puede colocar en cualquier lugar de un número:

Ejemplo

const num1 = 1_2_3_4_5;

Pruébelo usted mismo →

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

Nota

No se permite el separador numérico al principio ni al final de un número.

En JavaScript solo las variables pueden comenzar con _.

El separador numérico es compatible con todos los navegadores modernos desde enero de 2020:

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

Matriz de JavaScript at()

ES2022 introdujo el método de matriz at():

Ejemplos

Obtén el tercer elemento de las frutas:

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

Pruébelo usted mismo →

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

Obtén el tercer elemento de las frutas:

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

Pruébelo usted mismo →

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

El método at() devuelve un elemento indexado de una matriz.

El método at() devuelve lo mismo que [].

El método at() es compatible con todos los navegadores modernos desde marzo de 2022:

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

Nota

Muchos idiomas permiten la indexación entre corchetes negativos como [-1] para acceder a elementos desde el final de un objeto/matriz/cadena.

Esto no es posible en JavaScript porque [] se usa para acceder tanto a matrices como a objetos. obj[-1] se refiere al valor de la clave -1, no a la última propiedad del objeto.

El método at() se introdujo en ES2022 para resolver este problema.


Cadena JavaScript at()

ES2022 introdujo el método de cadena at():

Ejemplos

Obtenga la tercera letra del nombre:

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

Pruébelo usted mismo →

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

Obtenga la tercera letra del nombre:

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

Pruébelo usted mismo →

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

El método at() devuelve un elemento indexado de una cadena.

El método at() devuelve lo mismo que [].

El método at() es compatible con todos los navegadores modernos desde marzo de 2022:

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