IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)

Tutoriel présentant les nouveautés ECMAScript 6

Les chaînes de caractères

JavaScript existe depuis longtemps et il est resté longuement cantonné à la dynamisation des pages web. Mais depuis quelques années, il sort de ce rôle et se déploie avec efficacité dans d’autres contextes. Par exemple, son utilisation côté serveur avec node.js est un franc succès.?

Officiellement, JavaScript se nomme ECMAScript et il est normalisé. On trouve les dernières fonctionnalités et définitions dans la norme Ecma-262.

Dans ce cours, je vous présente ES6 qui conserve l’existant (donc tout ES5 reste valable) et ajoute de nombreuses et intéressantes possibilités, en particulier les modules et les classes.?

Ce cours n’est pas une initiation à JavaScript, mais s’adresse à ceux qui savent déjà coder avec ES5 et qui désirent aller plus loin avec les nouvelles possibilités d’ES6. 4 commentaires Donner une note à l´article (5)

Article lu   fois.

L'auteur

Site personnel

Liens sociaux

Viadeo Twitter Facebook Share on Google+   

I. Introduction

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.

II. 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 !

II-A. La syntaxe de base

À 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) :

 
Sélectionnez
1.
2.
3.
4.
5.
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 :

Image non disponible

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

II-B. Plusieurs lignes

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

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

Ce qui avec ES5 s'écrirait ainsi :

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

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

II-C. Interpolation

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

 
Sélectionnez
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 :

 
Sélectionnez
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 :

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

Le codage devient ainsi plus fluide, par exemple :

 
Sélectionnez
1.
2.
3.
4.
5.
6.
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 :

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

II-D. Étiquetage

?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 :

 
Sélectionnez
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
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 trois 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 :

 
Sélectionnez
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.

III. Identifier et répéter

III-A. 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 trois méthodes.

III-A-1. 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 :

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

III-A-2. startsWith

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

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

III-A-3. endsWith

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

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

III-A-4. Répéter

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

 
Sélectionnez
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.

IV. Les expressions rationnelles

IV-A. 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 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 :

 
Sélectionnez
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
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.

V. En résumé

  • Les littéraux de gabarits permettent l'écriture d'une chaîne sur plusieurs lignes, d'utiliser des interpolations 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.

Vous avez aimé ce tutoriel ? Alors partagez-le en cliquant sur les boutons suivants : Viadeo Twitter Facebook Share on Google+   

Copyright © 2018 Laravel. Aucune reproduction, même partielle, ne peut être faite de ce site ni de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.