ES9

Accueil » JavaScript » ES9

En 2018, ECMAScript sort cette nouvelle version qui alimente encore les capacités de JavaScript.

rest/spread properties

Les rest/spread properties sont une syntaxe de JavaScript qui permet de traiter un groupe de propriétés d’un objet comme une liste ou un tableau. Elles sont définies par les opérateurs de répartition (spread) et de reste (rest). Voici comment utiliser l’opérateur de répartition (spread) dans les objets littéraux :

const object1 = { a: 1, b: 2 };
const object2 = { ...object1, c: 3 };
console.log(object2); // affiche { a: 1, b: 2, c: 3 }

L’opérateur de répartition (spread) crée un nouvel objet en copiant toutes les propriétés de l’objet passé en argument et en les ajoutant au nouvel objet. Cela peut être utile pour étendre un objet existant ou pour créer un nouvel objet qui a les mêmes propriétés qu’un autre objet. Voici comment utiliser l’opérateur de reste (rest) dans les objets littéraux :

const object = { a: 1, b: 2, c: 3, d: 4 };
const { a, ...rest } = object;
console.log(a); // 1
console.log(rest); // { b: 2, c: 3, d: 4 }

L’opérateur de reste (rest) crée un nouvel objet qui contient toutes les propriétés de l’objet passé en argument, à l’exception de celles qui sont décomposées (c’est-à-dire assignées à des variables). Cela peut être utile pour séparer un groupe de propriétés d’un objet et les traiter séparément. Les rest/spread properties sont une syntaxe très pratique qui vous permet de traiter les objets de manière similaire aux tableaux et de faciliter la manipulation de données structurées.

Template literals en chaines de caractères sécurisées

Il s’agit des chaînes de caractères qui échappent automatiquement tous les caractères spéciaux et évitent les attaques de type injection de code en exploitant l’écriture template strings :

const userInput = '<script>alert("XSS")</script>';
const safeInput = `<p>${userInput}</p>`;
console.log(safeInput); // '<p>&lt;script&gt;alert("XSS")&lt;/script&gt;</p>'

Dans cet exemple, la chaîne de caractères <script>alert("XSS")</script> est passée en entrée par un utilisateur et pourrait potentiellement être utilisée pour injecter du code malveillant dans une page web. En l’enveloppant dans un template literal et en l’affichant dans une balise <p>, tous les caractères spéciaux sont automatiquement échappés et la chaîne de caractères est rendue sécurisée. Les templates literals sont une syntaxe très pratique qui vous permet de créer des chaînes de caractères multilignes et de manipuler facilement les données d’entrée de manière sécurisée.

Récapitulatifs des méthodes et des propriétés

Les récapitulatifs de méthodes et de propriétés sont une syntaxe de JavaScript qui vous permet de définir des méthodes et des propriétés d’un objet de manière plus concise. Ils sont particulièrement utiles lorsque vous voulez créer un objet qui a beaucoup de méthodes et de propriétés similaires.

const object = {
  method1() {},
  method2() {},
  method3() {}
};

Dans cet exemple, les méthodes method1(), method2() et method3() sont définies de manière concise en utilisant les récapitulatifs de méthodes. Cela permet de créer un objet avec plusieurs méthodes sans avoir à répéter le mot-clé function à chaque fois. Voici comment utiliser les récapitulatifs de propriétés :

const object = {
  property1,
  property2,
  property3
};

Dans cet exemple, les propriétés property1, property2 et property3 sont définies de manière concise en utilisant les récapitulatifs de propriétés. Cela permet de créer un objet avec plusieurs propriétés sans avoir à utiliser l’opérateur d’affectation (=). Les récapitulatifs de méthodes et de propriétés sont une syntaxe très pratique qui vous permet de créer des objets avec un nombre important de méthodes et de propriétés de manière plus concise et lisible.

dotAll

Le flag dotAll est une propriété de l’objet RegExp qui indique si le caractère . (point) doit correspondre à tous les caractères, y compris le caractère de nouvelle ligne (\n). Par défaut, le caractère . ne correspond pas au caractère de nouvelle ligne, ce qui peut causer des problèmes lors de l’utilisation de l’expression régulière pour extraire du contenu d’un document avec des sauts de ligne.

const regex = /.+/s;
const input = 'foo\nbar';

console.log(input.match(regex)); // ['foo', index: 0, input: 'foo\nbar']

Sans l’option s, l’expression régulière ne correspondrait qu’à « foo » et ne prendrait pas en compte le saut de ligne. Avec l’option s, l’expression régulière correspond à « foo\nbar » en entier.

Notez que l’option dotAll n’est pas prise en charge par tous les navigateurs. Si vous souhaitez utiliser cette option, vous devrez utiliser la syntaxe suivante pour l’activer :

const regex = new RegExp('.+', 's');

Vous pouvez également utiliser l’option s en utilisant la syntaxe de l’expression régulière en ligne, comme ceci :

const regex = /.+/s;

Les groupes de capture

Les named capture groups sont des groupes de capture nommés dans une expression régulière en JavaScript. Ils permettent de donner un nom aux groupes de capture au lieu d’utiliser seulement des index pour y accéder. Cela peut rendre le code plus lisible et plus facile à maintenir, car les noms des groupes de capture peuvent décrire le contenu attendu plutôt que d’utiliser des index qui peuvent être difficiles à mémoriser.

const regex = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/;
const input = '2022-01-01';
const result = input.match(regex);

console.log(result.groups.year); // 2022
console.log(result.groups.month); // 01
console.log(result.groups.day); // 01

Dans cet exemple, nous utilisons les groupes de capture nommés year, month et day pour capturer les différentes parties d’une date. Nous pouvons ensuite accéder à ces groupes en utilisant leur nom plutôt que leur index.

Pour poursuivre vos recherches, vous trouverez d’autres informations sur le site officiel !