Javascript ES2019

Table des matières

    Afficher la table des matières

Numéros de version JavaScript

Les anciennes versions de JS sont nommées par des numéros : ES5 (2009) et ES6 (2015).

A partir de 2016, les versions sont nommées par année : ECMAScript 2016, 2017, 2018, 2019, ...

Nouvelles fonctionnalités dans ES2019

  • String.trimStart()

  • String.trimEnd()

  • Objet.fromEntries

  • Liaison de capture en option

  • Tableau.flat()

  • Array.flatMap()

  • Tableau révisé.Sort()

  • JSON.stringify révisé()

  • Symboles de séparation autorisés dans les chaînes littérales

  • Function.toString() révisé

Avertissement

Ces fonctionnalités sont relativement nouvelles.

Les navigateurs plus anciens peuvent avoir besoin d'un code alternatif (Polyfill)

Chaîne JavaScript trimStart()

ES2019 a ajouté la méthode String trimStart() à JavaScript. <p>La méthode trimStart() fonctionne comme trim(), mais supprime les espaces uniquement à partir du début de un string.

Exemple

let text1 = "     Hello World!     ";
let text2 = text1.trimStart();

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The trimStart() Method</h2>

<p id="demo"></p>

<script>
let text1 = "     Hello World!     ";
let text2 = text1.trimStart();

document.getElementById("demo").innerHTML =
"Length text1 = " + text1.length + "<br>Length text2 = " + text2.length;
</script>

</body>
</html>

La chaîne JavaScript trimStart() est prise en charge dans tous les navigateurs modernes depuis janvier 2020 :

Chrome 66 Edge 79 Firefox 61 Safari 12 Opera 50
Apr 2018 Jan 2020 Jun 2018 Sep 2018 May 2018

Chaîne JavaScript trimEnd()

ES2019 a ajouté la méthode String trimEnd() à JavaScript. <p>La méthode trimEnd() fonctionne comme trim(), mais supprime les espaces uniquement à la fin de un string.

Exemple

let text1 = "     Hello World!     ";
let text2 = text1.trimEnd();

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The trimEnd() Method</h2>

<p id="demo"></p>

<script>
let text1 = "     Hello World!     ";
let text2 = text1.trimEnd();

document.getElementById("demo").innerHTML =
"Length text1 = " + text1.length + "<br>Length text2 = " + text2.length;
</script>

</body>
</html>

La chaîne JavaScript trimEnd() est prise en charge dans tous les navigateurs modernes depuis janvier 2020 :

Chrome 66 Edge 79 Firefox 61 Safari 12 Opera 50
Apr 2018 Jan 2020 Jun 2018 Sep 2018 May 2018

Objet JavaScript fromEntries()

ES2019 a ajouté la méthode Objet fromEntries() à JavaScript. <p>La méthode fromEntries() crée un objet à partir de paires clé/valeur itérables.

Exemple

const fruits = [
["apples", 300],
["pears", 900],
["bananas", 500]
];

const myObj = Object.fromEntries(fruits);

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Objects</h1>
<h2>The fromEntries() Method</h2>

<p>The number of pears are:</p>
<p id="demo"></p>

<script>
const fruits = [
["apples", 300],
["pears", 900],
["bananas", 500]
];

const myObj = Object.fromEntries(fruits);
document.getElementById("demo").innerHTML = myObj.pears;
</script>

</body>
</html>

L'objet JavaScript fromEntries() est pris en charge dans tous les navigateurs modernes depuis janvier 2020 :

Chrome 73 Edge 79 Firefox 63 Safari 12.1 Opera 60
Mar 2019 Jan 2020 Oct 2018 Mar 2019 Apr 2019

Liaison de capture facultative

À partir d'ES2019, vous pouvez omettre le paramètre catch si vous n'en avez pas besoin :.

Exemple

Avant 2019 :

try {
  // code
} catch (err) {
  // code
}

Après 2019 :

try {
  // code
} catch {
  // code
}

La liaison catch facultative est prise en charge dans tous les navigateurs modernes depuis janvier 2020 :

Chrome 66 Edge 79 Firefox 58 Safari 11.1 Opera 53
Apr 2018 Jan 2020 Jan 2018 Mar 2018 May 2018

Tableau JavaScript plat()

ES2019 a ajouté la méthode Array flat() à JavaScript.

La méthode flat() crée un nouveau tableau en aplatissant un tableau imbriqué.

Exemple

const myArr = [[1,2],[3,4],[5,6]];
const newArr = myArr.flat();

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The flat() Method</h2>

<p id="demo"></p>

<script>
const myArr = [[1,2],[3,4],[5,6]];

const newArr = myArr.flat();
document.getElementById("demo").innerHTML = newArr;
</script>

</body>
</html>

JavaScript Array flat() est pris en charge dans tous les navigateurs modernes depuis janvier 2020 :

Chrome 69 Edge 79 Firefox 62 Safari 12 Opera 56
Sep 2018 Jan 2020 Sep 2018 Sep 2018 Sep 2018

Tableau JavaScript flatMap()

ES2019 a ajouté la méthode Array flatMap() à JavaScript.

La méthode flatMap() mappe d'abord tous les éléments d'un tableau puis crée un nouveau tableau en aplatissant le tableau.

Exemple

const myArr = [1, 2, 3, 4, 5, 6];
const newArr = myArr.flatMap((x) => x * 2);

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The flatMap() Method</h2>

<p id="demo"></p>

<script>
const myArr = [1, 2, 3, 4, 5,6];
const newArr = myArr.flatMap((x) => x * 2);
document.getElementById("demo").innerHTML = newArr;
</script>

</body>
</html>

Tri de tableau stable()

ES2019 révisé la méthode Array sort().

Avant 2019, la spécification autorisait des algorithmes de tri instables tels que QuickSort.

Après ES2019, les navigateurs doivent utiliser un algorithme de tri stable :

Lors du tri d'éléments sur une valeur, les éléments doivent conserver leur position relative par rapport aux autres éléments ayant la même valeur.

Exemple

const myArr = [
  {name:"X00",price:100 },
  {name:"X01",price:100 },
  {name:"X02",price:100 },
  {name:"X03",price:100 },
  {name:"X04",price:110 },
  {name:"X05",price:110 },
  {name:"X06",price:110 },
  {name:"X07",price:110 }
];

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Stable Sort</h1>

<p>From ES2019, browsers must use a stable sorting algorithm.</p>
<p>When sorting elements on a key, the elements must keep their relative position to other objects with the same key.</p>

<p id="demo"></p>

<script>

const myArr = [
  {name:"X00",price:100 },
  {name:"X01",price:100 },
  {name:"X02",price:100 },
  {name:"X03",price:100 },
  {name:"X04",price:110 },
  {name:"X05",price:110 },
  {name:"X06",price:110 },
  {name:"X07",price:110 },
  {name:"X08",price:120 },
  {name:"X09",price:120 },
  {name:"X10",price:120 },
  {name:"X11",price:120 },
  {name:"X12",price:130 },
  {name:"X13",price:130 },
  {name:"X14",price:130 },
  {name:"X15",price:130 },
  {name:"X16",price:140 },
  {name:"X17",price:140 },
  {name:"X18",price:140 },
  {name:"X19",price:140 }
];

myArr.sort( (p1, p2) => {
  if (p1.price < p2.price) return -1;
  if (p1.price > p2.price) return 1;
  return 0;
});

let txt = "";
myArr.forEach(myFunction);

function myFunction(value) {
  txt += value.name + " " + value.price + "<br>"; 
}
document.getElementById("demo").innerHTML = txt;
</script>

</body>
</html>

Dans l'exemple ci-dessus, lors du tri par prix, le résultat n'est pas autorisé à sortir avec les noms dans une autre position relative comme comme ça:

X01 100
X03 100
X00 100
X03 100
X05 110
X04 110
X06 110
X07 110

JSON.stringify révisé()

ES2019 révisé la méthode JSON stringify().

Avant 2019, JSON ne pouvait pas chaîner les caractères codés avec \.

Exemple

let text = JSON.stringify("\u26D4");

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript JSON</h1>
<h2>Revised stringify()</h2>

<p id="demo"></p>

<script>
let text = JSON.stringify("\u26D4");
document.getElementById("demo").innerHTML = JSON.parse(text);
</script>

</body>
</html>

Avant ES2019, utilisation de JSON.stringify()JSON sur des points de code UTF-8 (U+D800 à U+DFFF) a renvoyé des caractères Unicode cassés comme ���.

Après cette révision, les chaînes avec des points de code UTF-8 sont converties en toute sécurité avec JSON.stringify(), et revenons à l'original en utilisant JSON.parse().

Symboles de séparation

<p>Les séparateurs de ligne et les symboles de séparation de paragraphe (\u2028 et \u2029) sont désormais autorisés dans les chaînes littérales.

Avant 2019, ceux-ci étaient traités comme des terminateurs de ligne et entraînaient des exceptions d'erreur :

Exemple

// This is valid in ES2019:
let text = "\u2028";

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Strings</h1>

<p>From ES2019, line and paragraph separator symbols (\u2028 and \u2029) are allowed in string literals:</p>

<p id="demo"></p>

<script>
let text = "\u2028";
document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

Note

Désormais, JavaScript et JSON ont des règles égales.

Avant ES2019 :

text=JSON.parse('"\u2028"') analyserait en ''.

text='"\u2028"' donnerait une erreur de syntaxe.

Fonction révisée toString()

ES2019 révisé la méthode Function toString().

La méthode toString() renvoie une chaîne représentant le code source d'une fonction.

Depuis 2019, toString() doit renvoyer le code source de la fonction incluant les commentaires, espaces et détails de syntaxe.

Avant 2019, différents navigateurs renvoyaient différentes variantes de la fonction (comme sans commentaires ni espaces). À partir de 2019, la fonction devrait être renvoyée exactement telle qu'elle est écrite.

Exemple

function myFunction(p1, p2) {
    return p1 * p2;
}

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Functions</h1>
<h2>The toString() Method</h2>

<p>The toString() method returns the function as a string:</p>

<p id="demo"></p>

<script>
function myFunction(a, b) {
  return a * b;
}
document.getElementById("demo").innerHTML = myFunction.toString();
</script>

</body>
</html>