Template literal en JavaScript : composer du texte avec des variables

Assembler du texte avec des +, des guillemets à refermer et des espaces oubliés au milieu est l'une des écritures les plus fatigantes du langage. Un accent grave à la place des guillemets, et le problème disparaît.

Le template literal insère les variables à leur place dans le texte et garde les retours à la ligne tels qu'ils sont écrits.

Définition

Un template literal est une String (chaîne de caractères) écrite entre accents graves. Chaque expression placée entre ${ et } est évaluée, convertie en texte, puis insérée à cet endroit.

const prenom = "Alice";
const places = 3;

console.log(`Bonjour ${prenom}, il reste ${places} places.`);
// "Bonjour Alice, il reste 3 places."

console.log("Bonjour " + prenom + ", il reste " + places + " places.");
// le même résultat, en quatre concaténations

Le résultat est une chaîne ordinaire : toutes les méthodes habituelles s'y appliquent, String.trim(), String.split() ou String.replace() comme sur tout autre texte.

Le texte sur plusieurs lignes

Les retours à la ligne écrits dans le gabarit sont conservés, ce qui évite d'empiler des \n dans une concaténation illisible.

const prenom = "Alice";

const message = `Bonjour ${prenom},

Votre place est réservée.`;

console.log(message.split("\n").length);  // 3

Ce que l'on peut placer entre les accolades

N'importe quelle expression : un calcul, un appel de fonction, un Opérateur ternaire (?:), un autre gabarit. En revanche, pas d'instruction : ni if, ni boucle, ni déclaration de variable.

const prix = 49.9;
const stock = 0;

console.log(`Total : ${(prix * 1.2).toFixed(2)} euros`);       // "Total : 59.88 euros"
console.log(`Statut : ${stock > 0 ? "en stock" : "épuisé"}`);  // "Statut : épuisé"
console.log(`Objet : ${{ a: 1 }}`);                            // "Objet : [object Object]"

La dernière ligne rappelle que la conversion en texte est automatique, et rarement lisible pour un Object (objet) : passez par JSON pour afficher son contenu.

Les gabarits étiquetés

Une fonction placée juste avant l'accent grave reçoit les morceaux de texte d'un côté et les valeurs de l'autre, et peut donc les traiter avant l'assemblage.

function surligne(parties, ...valeurs) {
  return parties.reduce(
    (texte, partie, i) =>
      texte + partie + (valeurs[i] !== undefined ? `**${valeurs[i]}**` : ""),
    ""
  );
}

console.log(surligne`Il reste ${3} places`);  // "Il reste **3** places"

C'est le mécanisme des bibliothèques qui écrivent du CSS ou des requêtes de base de données dans un gabarit : l'étiquette voit les valeurs séparément du texte, et peut les échapper.

Questions fréquentes

Non. Pour une chaîne fixe, les guillemets simples ou doubles restent parfaitement lisibles et signalent qu'aucune variable n'est insérée. L'accent grave se justifie dès qu'il y a une valeur à intercaler ou plusieurs lignes à écrire.

Parce que l'insertion convertit la valeur en texte, et que la conversion par défaut d'un objet donne exactement cette chaîne. Écrivez JSON.stringify(objet) dans les accolades, ou affichez la propriété voulue. Un tableau, lui, se convertit en ses éléments séparés par des virgules.

Techniquement oui, et c'est un piège de sécurité classique. Une valeur saisie par un visiteur, insérée dans un gabarit puis affectée à innerHTML, peut faire exécuter du code dans le navigateur des autres. Passez par textContent pour du texte, ou échappez les caractères sensibles avant l'insertion.