39 articles tagués avec « ECMAScript »

JSON.stringify était précédemment spécifié pour retourner des chaînes Unicode mal formées si l'entrée contenait des solitaires :

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

La proposition “Un JSON.stringify bien formé” modifie JSON.stringify pour qu'il génère des séquences d'échappement pour les solitaires, rendant sa sortie un Unicode valide (et représentable en UTF-8) :

Les modules JavaScript sont désormais pris en charge dans tous les principaux navigateurs !

Cet article explique comment utiliser les modules JS, comment les déployer de manière responsable et comment l'équipe Chrome travaille pour les améliorer encore à l'avenir.

Que sont les modules JS ?​

Les modules JS (également connus sous le nom de “modules ES” ou “modules ECMAScript”) sont une nouvelle fonctionnalité majeure, ou plutôt un ensemble de nouvelles fonctionnalités. Vous avez peut-être utilisé un système de modules JavaScript utilisateur dans le passé. Peut-être avez-vous utilisé CommonJS comme dans Node.js, ou peut-être AMD, ou peut-être autre chose. Tous ces systèmes de modules ont une chose en commun : ils vous permettent d'importer et d'exporter des éléments.

Les BigInt sont un nouveau type primitif numérique en JavaScript qui peuvent représenter des entiers avec une précision arbitraire. Avec les BigInt, vous pouvez stocker et manipuler en toute sécurité de grands entiers même au-delà de la limite des entiers sûrs pour les Number. Cet article examine quelques cas d'utilisation et explique les nouvelles fonctionnalités de Chrome 67 en comparant les BigInt aux Number en JavaScript.

La clause catch des instructions try nécessitait un paramètre :

try {
  faireQuelqueChoseQuiPeutJeterErreur();
} catch (exception) {
  //     ^^^^^^^^^
  // Nous devons nommer le paramètre, même si nous ne l'utilisons pas !
  gérerException();
}

En ES2019, catch peut maintenant être utilisé sans paramètre. Cela est utile si vous n’avez pas besoin de l’objet exception dans le code qui gère l’exception.

try {
  faireQuelqueChoseQuiPeutJeterErreur();
} catch { // → Pas de paramètre !
  gérerException();
}

Prise en charge de la variable catch facultative​

ES2019 introduit String.prototype.trimStart() et String.prototype.trimEnd() :

const string = '  bonjour le monde  ';
string.trimStart();
// → 'bonjour le monde  '
string.trimEnd();
// → '  bonjour le monde'
string.trim(); // ES5
// → 'bonjour le monde'

Cette fonctionnalité était auparavant disponible via les méthodes non standard trimLeft() et trimRight(), qui restent comme alias des nouvelles méthodes pour la compatibilité ascendante.

const string = '  bonjour le monde  ';
string.trimStart();
// → 'bonjour le monde  '
string.trimLeft();
// → 'bonjour le monde  '
string.trimEnd();
// → '  bonjour le monde'
string.trimRight();
// → '  bonjour le monde'
string.trim(); // ES5
// → 'bonjour le monde'

Function.prototype.toString() retourne désormais des extraits exacts du texte du code source, y compris les espaces et les commentaires. Voici un exemple comparant l’ancien comportement au nouveau :

import() dynamique introduit une nouvelle forme fonctionnelle d'import qui débloque de nouvelles capacités par rapport à l'import statique. Cet article compare les deux et donne un aperçu des nouveautés.

Promise.prototype.finally permet d'enregistrer un callback qui sera invoqué une fois qu'une promesse est réglée (c'est-à-dire résolue ou rejetée).

Imaginez que vous voulez récupérer des données pour les afficher sur la page. Oh, et vous voulez montrer un indicateur de chargement lorsque la requête commence et le cacher lorsque la requête se termine. En cas de problème, vous affichez un message d'erreur à la place.

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

Avant de discuter des propriétés rest et spread des objets, faisons un petit retour en arrière pour nous rappeler une fonctionnalité très similaire.

Éléments rest et spread des tableaux dans ES2015​

Le bon vieux ECMAScript 2015 a introduit les éléments rest pour l'affectation par déstructuration des tableaux et les éléments spread pour les littéraux de tableaux.

// Éléments rest pour l'affectation par déstructuration des tableaux :
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]

// Éléments spread pour les littéraux de tableaux :
const primesCopy = [first, second, ...rest];
console.log(primesCopy); // [2, 3, 5, 7, 11]

ES2018 : propriétés rest et spread des objets 🆕​

Quoi de neuf alors ? Eh bien, une proposition permet également les propriétés rest et spread pour les littéraux d'objets.

// Propriétés rest pour l'affectation par déstructuration des objets :
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' }