Littéraux de gabarits

Les littéraux de gabarits (templates literals) sont des chaînes de caractères qui nous permettent d'intégrer des expressions. Il nous sera donc possible d'additionner ou plutôt “concaténer” différentes valeurs afin d'en créer une chaîne de caractère.

Pour rappel, une chaîne de caractères est symbolisée par des guillemets, qu'ils soient simples ou doubles, entre lesquels se trouve un caractère ou une suite de caractère. Par exemple:

const currentJob = "Enseignant";

Ou encore:

const firstName = 'Michel';

Il est important de toujours commencé et terminé par le même type de guillemet, sans quoi, la chaine de caractère n'est pas valide. Le fait qu'il y a plusieurs types de guillemets pour la même utilisation vient du fait qu'il est par exemple possible d'utiliser un guillemet simple dans une phrase et donc, nécessaire d'avoir une solution pour éviter de créer des valeurs invalides.

Par exemple:

const quote = 'l'apostrophe' ;

Cette notation est invalide, car le guillemet simple est utilisé pour l'apostrophe et donc termine la chaine de caractère. Pour régler ce problème, il faudra utiliser le guillemet double et donc écrire:

conste quote = "l'apostrophe";

Maintenant que nous avons des chaines de caractère, il nous est parfaitement possible de les additionner. C'est là que nous parlons de concaténation. C'est à dire, que chaque chaîne va s'ajouter à la précédente de sort à ne former qu'une seule grande chaine de caractère. Par exemple:

const firstName = "Michel";

const lastName = "Sauteur";

console.log(firstname + lastName);

Le résultat affichera “MichelSauteur”, car nous n'avons pas ajouté d'espace. Pour résoudre ce problème, il nous suffit d'écrire:

console.log(firstname + " " + lastName);

Maintenant l'affichage se fait avec un espace, car celui-ci a été rajouté par nos soins entre les deux variables. Il est néanmoins relativement pénible de devoir ajouter à chaque fois des espaces. C'est pourquoi nous pouvons utiliser une autre approche, l'approche des littoraux de gabarits (templates literals)

Le but de cette approche est d'écrire notre chaine de caractère comme si nous écrivions du texte et d'y intégrer nos expressions. Pour cela, nous n'utiliserons plus des guillemets, mais des accents graves (backtick). Les expressions seront écrites directement à l'intérieur de la chaine de caractère, mais il nous faudra l'intégrer dans la notation suivante:

${expression}

Ce qui nous donne, par rapport à notre dernier exemple:

console.log(`${firstName} ${lastName}`);

On remarque ici que je n'ai pas rajouté de chaine de caractère afin de séparer mes mots comme si j'écrivais de manière fluide.

L'autre particularité de cette approche est qu'elle nous permet de faire facilement de la multiligne, c'est à dire, un retour à la ligne avec une nouvelle chaine de caractère. Lorsqu'on utilise des guillemets simple ou double, le retour à la ligne se fait de cette manière:

console.log("je suis une phrase \n\ sur deux lignes.");

Ce qui n'est pas très pratique. Dans l'approche des gabarits littéraux, il suffit de faire un retour à la ligne pour que celui-ci soit effectif.

console.log(`Je suis une phrase
sur deux lignes.`);