Littéraux de gabarits

Les littéraux de gabarits (ou en anglais: Template string/Template literal) permettent d'incorporer des variables ou expressions simples à l'intérieur d'une chaîne de caractères.

Pour ce faire cette chaine de caractère doit utiliser des "backticks" `…` plutôt que d'apostrophes standard tel quel "…" ou '…'. Les variables quant à elles doivent être précédées par le symbole de dollar $ et être entourées d'accolades {}.

Évolution

Anciennement, constituer une phrase à partir des variables produisait un code peu agréable à lire.

Par exemple:

const name = "Harold";
const salary = 15;
const msg = name + " gagne " + salary + " dollars de l'heure.";

Heureusement, depuis ES6 il est possible d'utiliser les littéraux de gabarits afin d'écrire la même expression de façon plus lisible.

Par exemple:

const name = "Harold";
const salary = 15;
const msg = `${name} gagne ${salary} dollars de l'heure.`;

Interpolation

Anciennement une interpolation dans une expression pouvait porter à confusion, surtout si elle utilisait le symbole +.

Par exemple:

const name = "Harold";
const salary = 15;
const bonus = 2;
const msg = name + " gagne " + (salary + bonus) + " dollars de l'heure passé 11h.";

Heureusement, cette confusion a maintenant disparue avec l'arrivée des littéraux de gabarits.

Par exemple:

const name = "Harold";
const salary = 15;
const bonus = 2;
const msg = `${name} gagne ${salary + bonus} dollars de l'heure passé 11h.`;

Multiligne

Anciennement la lisibilité d'une expression pouvait devenir hasardeuse, car l'expression était limitée à une seule ligne.

Par exemple:

const name = "Harold";
const salary = 15;
const msg = "<strong>" + name + "</strong><br> gagne " salary + " dollars de l'heure.";

Pour contrer ce problème les littéraux de gabarit acceptent les retour de ligne.

Par exemple:

const name = "Harold";
const salary = 15;
const msg = `<strong>${name}</strong><br> 
             gagne ${salary} dollars de l'heure.`;