39 publicaciones etiquetados con "ECMAScript"

JSON.stringify anteriormente estaba especificado para devolver cadenas Unicode mal formadas si la entrada contenía algún sustituto solitario:

JSON.stringify('\uD800');
// → '"�"'

La propuesta de “JSON.stringify bien formado” cambia JSON.stringify para que produzca secuencias de escape para sustitutos solitarios, haciendo que su salida sea Unicode válido (y representable en UTF-8):

¡Los módulos de JavaScript ahora son compatibles con todos los navegadores principales!

Este artículo explica cómo usar módulos de JS, cómo implementarlos de manera responsable, y cómo el equipo de Chrome está trabajando para hacer que los módulos sean aún mejores en el futuro.

¿Qué son los módulos de JS?​

Los módulos de JS (también conocidos como “módulos de ES” o “módulos ECMAScript”) son una característica nueva importante, o más bien una colección de nuevas características. Es posible que hayas usado un sistema de módulos de JavaScript en el pasado. Tal vez usaste CommonJS como en Node.js, o tal vez AMD, o quizás algo más. Todos estos sistemas de módulos tienen algo en común: te permiten importar y exportar cosas.

BigInts son un nuevo tipo de primitiva numérica en JavaScript que puede representar enteros con precisión arbitraria. Con BigInts, puedes almacenar y operar de manera segura con enteros grandes incluso más allá del límite seguro de enteros para Numbers. Este artículo presenta algunos casos de uso y explica la nueva funcionalidad en Chrome 67 al comparar BigInts con Numbers en JavaScript.

La cláusula catch de las sentencias try solía requerir un binding:

try {
  doSomethingThatMightThrow();
} catch (exception) {
  //     ^^^^^^^^^
  // ¡Debemos nombrar el binding, incluso si no lo usamos!
  handleException();
}

En ES2019, ahora se puede usar catch sin un binding. Esto es útil si no necesitas el objeto exception en el código que maneja la excepción.

try {
  doSomethingThatMightThrow();
} catch { // → ¡Sin binding!
  handleException();
}

Soporte para binding opcional en catch​

ES2019 introduce String.prototype.trimStart() y String.prototype.trimEnd():

const string = '  hola mundo  ';
string.trimStart();
// → 'hola mundo  '
string.trimEnd();
// → '  hola mundo'
string.trim(); // ES5
// → 'hola mundo'

Esta funcionalidad estaba previamente disponible a través de los métodos no estándares trimLeft() y trimRight(), que permanecen como alias de los nuevos métodos por compatibilidad hacia atrás.

const string = '  hola mundo  ';
string.trimStart();
// → 'hola mundo  '
string.trimLeft();
// → 'hola mundo  '
string.trimEnd();
// → '  hola mundo'
string.trimRight();
// → '  hola mundo'
string.trim(); // ES5
// → 'hola mundo'

Function.prototype.toString() ahora devuelve fragmentos exactos del texto del código fuente, incluyendo espacios en blanco y comentarios. Aquí hay un ejemplo que compara el comportamiento antiguo y el nuevo:

Importación dinámica import() introduce una nueva forma de función similar a import que desbloquea nuevas capacidades en comparación con el import estático. Este artículo compara ambas y ofrece una visión general de lo nuevo.

Promise.prototype.finally permite registrar un callback que será invocado cuando una promesa esté resuelta (es decir, cumplida o rechazada).

Imagina que quieres obtener algunos datos para mostrar en la página. Ah, y quieres mostrar un spinner de carga cuando la solicitud comienza, y ocultarlo cuando la solicitud se complete. Cuando algo salga mal, muestras un mensaje de error en su lugar.

const fetchAndDisplay = ({ url, element }) => {
  showLoadingSpinner();
  fetch(url)
    .then((response) => response.text())
    .then((text) => {
      element.textContent = text;
      hideLoadingSpinner();
    })
    .catch((error) => {
      element.textContent = error.message;
      hideLoadingSpinner();
    });
};

Antes de discutir propiedades de reposo y propagación de objetos, hagamos un viaje al pasado y recordemos una característica muy similar.

Elementos de reposo y propagación de arrays en ES2015​

La buena vieja ECMAScript 2015 introdujo elementos de reposo para la asignación de desestructuración de arrays y elementos de propagación para literales de arrays.

// Elementos de reposo para la asignación de desestructuración de arrays:
const primes = [2, 3, 5, 7, 11];
const [first, second, ...rest] = primes;
console.log(first); // 2
console.log(second); // 3
console.log(rest); // [5, 7, 11]

// Elementos de propagación para literales de arrays:
const primesCopy = [first, second, ...rest];
console.log(primesCopy); // [2, 3, 5, 7, 11]

ES2018: propiedades de reposo y propagación de objetos 🆕​

¿Qué hay de nuevo entonces? Bueno, una propuesta permite propiedades de reposo y propagación para literales de objetos también.

// Propiedades de reposo para la asignación de desestructuración de objetos:
const person = {
    firstName: 'Sebastian',
    lastName: 'Markbåge',
    country: 'USA',
    state: 'CA',
};
const { firstName, lastName, ...rest } = person;
console.log(firstName); // Sebastian
console.log(lastName); // Markbåge
console.log(rest); // { country: 'USA', state: 'CA' }