ES6 : les chaînes de caractères

image_pdfimage_print

Il est rare d’écrire un programme sans utiliser et manipuler des chaînes de caractères. On va voir dans ce chapitre les nouvelles possibilités de ES6 dans ce domaine.

Les littéraux de gabarits (template literals)

Un littéral de gabarit est une chaîne de caractères qui peut inclure des expressions, des interpolations, et qui peut s’écrire sur plusieurs lignes.

Bon… après cette définition un peu abrupte vite des exemples !

La syntaxe de base

A première vue un littéral de gabarit se présente comme une chaîne classique avec 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 :

Jusque là on ne voit pas trop l’intérêt de cette syntaxe mais ça va venir !

Plusieurs lignes

Faire du multi lignes 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.

Interpolation

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.

Etiquetage

‌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 verra dans un autre article la syntaxe particulière avec les 3 points de suspension, c’est ce qu’on appelle le paramètre du reste, autrement dit ça prend tous les paramètres restants.

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 complexe ça clarifie grandement le code.

Identifier et répéter

Identifier

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.

ES6 enrichit les possibilités avec 3 méthodes.

includes

Cette méthode vérifie que la sous-chaîne est présente, elle renvoie true‌ si c’est le cas et false dans le cas contraire. La recherche est sensible à la casse :

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

startsWith

Cette méthode est comme la précédente à part que la sous-chaîne doit se trouver au début :

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

endsWith

Cette méthode est comme la précédente à part que la sous-chaîne doit se trouver à la fin :

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

Répéter

On a aussi une méthode pour répéter une chaîne :

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

La syntaxe est simple, il suffit de mettre en paramètre le nombre de répétitions.

Les expressions rationnelles

Propriété d’adhésion (sticky)

Dans les expressions rationnelles on peut effectuer des recherches avancées en utilisant des drapeaux (flags). Avec ES5 existent ces 3 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

En gros avec ce drapeau on veut détecter des chaînes identiques successives.

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.

En résumé

  •  Les littéraux de gabarits permettent l’écriture d’une chaîne sur plusieurs lignes, d’utiliser des interpolation et d’effectuer de puissants traitements avec l’étiquetage.
  • De nouvelles méthodes permettent de faciliter la syntaxe pour l’identification d’une sous-chaîne ou la répétition d’une chaîne.
  • L‌es expressions rationnelles ont été enrichies de nouveaux drapeaux et propriétés.

Laisser un commentaire