Littéraux de gabarits

2

Interpolation

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

Par exemple:

const nom = "Harold";
const age = 2;
const phrase = "Mon chien " + nom + " a " + age * 7 + "ans.";

N'est pas la plus facile à lire. Cependant, grâce aux littéraux de gabarits, il est possible d'écrire:

const nom = "Harold";
const age = 2;
const phrase = `Mon chien ${nom} a ${age * 7}ans.`;

Remarquez l'usage de backticks `...` plutôt que d'apostrophes "..." ou '...' pour déclarer la chaîne de caractères.

Le backtick est aussi connu chez les francophones sous le nom de accent grave

On remarque aussi que les extraits de code entre ${...} sont interprétés.

Multilignes

Une chaîne de caractères classique en JavaScript ne permet pas par défaut d'écrire sur plusieurs lignes. Cette restriction complique les choses dans les cas où la chaîne de caractères contient du code HTML.

Par exemple:

const html = "<div class='chien'><h2>Mon chien " + name + "</h2><p>a " + age * 7 +"</p></div>";

Heureusement, il est possible d'écrire la même ligne avec les littéraux de gabarits sur plusieurs lignes ainsi:

const html = `
<div class='chien'>
  <h2>Mon chien ${name}</h2>
  <p>a ${age * 7}</p>
</div>`;
Donnez votre opinion
sur les notes de cours sur cette page.
Merci d'avoir partagé ton opinion 😎
Pssst, c'est 💯 anonyme