Tutoriel présentant les nouveautés ECMAScript 6

À première vue, un littéral de gabarit se présente comme une chaîne classique à la différence que les délimiteurs sont des accents graves (backsticks) :

var message = `ma chaîne de caractères`;

console.log(message);
console.log(typeof message);
console.log(message.length);

Il existe des outils en ligne bien pratiques pour tester du code ES6, par exemple es6console.com qui présente l'intérêt de convertir en ES5 :

Faire du multiligne avec ES5 n'est pas pratique. Avec ES6, ça se fait tout seul :

var message = `ma chaîne
de caractères`;

Ce qui avec ES5 s'écrirait ainsi :

var message = "ma chaîne\nde caractères";

C'est bien pratique, par exemple pour des templates.

Il vous est sans doute arrivé bien souvent d'écrire un code de ce genre :

var a = 2;
var b = 5;
var message = "Le résultat de la somme de " + a + " et " + b + " est " + (a + b);

La syntaxe de la chaîne est bien laborieuse avec toutes ces concaténations !

Avec ES6, on peut rendre ça plus simple et élégant avec les interpolations qui existent dans bien d'autres langages et qui manquaient à JavaScript :

var a = 2;
var b = 5;
var message = `Le résultat de la somme de ${a} et ${b} est ${a + b}`;

On va avoir ce résultat :

Le résultat de la somme de 2 et 5 est 7

Le codage devient ainsi plus fluide, par exemple :

var voiture = { marque: "Renault" }; 
var client = { nom: "Dupont", prenom: "Alain" };
var message = `Bonjour monsieur ${ client.prenom } ${ client.nom },
vous désirez acheter une ${ voiture.marque },
nous vous en remercions.`;
console.log (message);

Ce qui donne :

Bonjour monsieur Alain Dupont,
vous désirez acheter une Renault,
nous vous en remercions.

?Là où ça devient très intéressant, c'est qu'on peut effectuer un traitement aussi bien sur les chaînes intermédiaires que sur les valeurs des interpolations avec une fonction.

Regardez cet exemple :

var a = 2.3265;
var b = 5.02154;

function tag(strings, ...values) {
  var sortie = strings[0]
  + values[0].toFixed(2)
  + strings[1]
  + values[1].toFixed(2)
  + strings[2]
  + values[2].toFixed(2);
  return sortie;
}

var message = tag`Le résultat de la somme de ${a} et ${b} est ${a + b}`;

Le littéral est précédé de tag, ça pourrait être n'importe quelle appellation. On a aussi une fonction avec ce nom.

Lors de l'exécution, le contenu du littéral est transmis à la fonction :

• strings : reçoit dans un tableau les chaînes intermédiaires (« Le résultat de la somme de » , « et » , « est ») ;
• …values : reçoit dans un tableau les valeurs des interpolations (a, b et a + b).

On peut ainsi transformer tous les éléments comme on veut et renvoyer le résultat ! Ici, on obtient :

Le résultat de la somme de 2.33 et 5.02 est 7.35

Mon exemple n'a qu'un intérêt limité parce qu'on aurait tout aussi bien pu effectuer directement le traitement dans le littéral, mais pour des situations plus complexes, ça clarifie grandement le code.

Vous devez utiliser bien souvent la méthode indexOf (et lastIndexOf) pour déterminer si une sous-chaîne est présente dans une chaîne et à quel emplacement.

III-A-1. includes▲

var result1 = 'Je suis arrivé'.includes('Je');  // true
var result2 = 'Je suis arrivé'.includes('je');  // false

III-A-2. startsWith▲

var result1 = 'Je suis arrivé'.startsWith('Je');  // true
var result2 = 'Je suis arrivé'.startsWith('suis');  // false

III-A-3. endsWith▲

var result1 = 'Je suis arrivé'.endsWith('arrivé');  // true
var result2 = 'Je suis arrivé'.endsWith('suis');  // false

III-A-4. Répéter▲

var result1 = '123'.repeat(1);  // "123"
var result2 = '123'.repeat(3);  // "123123123"

Dans les expressions rationnelles, on peut effectuer des recherches avancées en utilisant des drapeaux (flags). Avec ES5 existent ces trois drapeaux :

• g : la recherche est globale ;
• i : la recherche se fait en respectant la casse (on ignore les majuscules et minuscules) ;
• m : la recherche se fait sur plusieurs lignes.

ES6 propose le nouveau drapeau y qui impose à la recherche de commencer à partir de la valeur de la propriété lastIndex. La chaîne à rechercher doit être exactement à cet emplacement. Si la chaîne est trouvée, la propriété lastIndex prend la valeur du caractère qui suit cette chaîne.

Bon, si c'est pas assez clair voici un exemple :

var regex = /a/y;
var texte = 'abaab';

// On trouve rien à l'index 1
regex.lastIndex = 1;
console.log(regex.test(texte)); // false
console.log(regex.lastIndex); // 0

// On trouve à l'index 2
regex.lastIndex = 2;
var match = regex.exec(texte);
console.log(match.index); // 2
console.log(regex.lastIndex); // 3

// On trouve à l'index 3
var match = regex.exec(texte);
console.log(match.index); // 3
console.log(regex.lastIndex); // 4

// On trouve rien à l'index 4
console.log(regex.test(texte)); // false

Il y a d'autres ajouts plus techniques aux expressions rationnelles comme le drapeau u pour l'Unicode (un bon article sur le sujet mais en anglais ici) et la propriété flags d'utilité limitée.