Littéraux de gabarit

Les littéraux de gabarit utilisent des backticks (`) au lieu de guillemets simples ou doubles. Ils débloquent deux fonctionnalités puissantes : l'interpolation de chaînes et les chaînes multi-lignes.

La fonctionnalité la plus utile est l'interpolation de chaînes avec ${expression}. N'importe quelle expression JavaScript valide peut aller à l'intérieur des ${}:

const name = 'Alice';
const age = 30;

// Ancienne façon — concaténation de chaînes
const greeting = 'Hello, ' + name + '! You are ' + age + ' years old.';

// Nouvelle façon — littéral de gabarit
const greeting2 = `Hello, ${name}! You are ${age} years old.`;

L'expression à l'intérieur de ${} peut être n'importe quoi qui produit une valeur — des variables, des opérations arithmétiques, des appels de fonction, des opérateurs ternaires :

console.log(`2 + 3 = ${2 + 3}`);           // '2 + 3 = 5'
console.log(`Uppercase: ${'hello'.toUpperCase()}`); // 'Uppercase: HELLO'
console.log(`Status: ${age >= 18 ? 'adult' : 'minor'}`); // 'Status: adult'

Les backticks te permettent aussi d'utiliser librement des guillemets simples et doubles à l'intérieur de la chaîne sans avoir à les échapper :

const quote = `She said "it's fine" and walked away.`;

Cela fait des littéraux de gabarit la syntaxe de chaîne préférée en JavaScript moderne.

Les littéraux de gabarit préservent les sauts de ligne et les espaces exactement comme ils sont écrits. Cela élimine le besoin de caractères d'échappement \n ou de concaténation de chaînes maladroite :

// Ancienne façon
const old = 'Line 1\n' +
  'Line 2\n' +
  'Line 3';

// Nouvelle façon — appuie simplement sur Entrée
const poem = `Roses are red,
Violets are blue,
Template literals
Are awesome too.`;

C'est particulièrement utile pour construire des gabarits HTML en JavaScript :

const card = `
  <div class="card">
    <h2>${title}</h2>
    <p>${description}</p>
  </div>
`;

Une chose à surveiller : tous les espaces sont préservés, y compris l'indentation. Si tu indentes le littéral de gabarit pour correspondre à ton style de code, cette indentation devient partie de la chaîne :

function getHTML() {
  return `
    <p>Hello</p>
  `;
  // La chaîne commence avec un saut de ligne et 4 espaces !
}

Pour la plupart des utilisations DOM (comme innerHTML), l'espace supplémentaire est inoffensif car HTML réduit les espaces de toute façon. Mais garde cela à l'esprit quand les espaces importent (comme les balises <pre> ou lors de comparaisons de chaînes).

Les gabarits étiquetés sont une fonctionnalité avancée où tu places un nom de fonction avant le littéral de gabarit. La fonction reçoit les parties de chaîne et les valeurs interpolées comme arguments séparés :

function highlight(strings, ...values) {
  let result = '';
  strings.forEach((str, i) => {
    result += str;
    if (i < values.length) {
      result += `<strong>${values[i]}</strong>`;
    }
  });
  return result;
}

const name = 'Alice';
const role = 'developer';
const html = highlight`Welcome ${name}, you are a ${role}!`;
// 'Welcome <strong>Alice</strong>, you are a <strong>developer</strong>!'

La fonction étiquette reçoit :

• strings — un tableau des morceaux de chaînes littérales : ['Welcome ', ', you are a ', '!']
• ...values — les expressions évaluées : ['Alice', 'developer']

Tu rencontreras des gabarits étiquetés dans des bibliothèques populaires :

• styled-components : styled.div`color: red;`
• GraphQL : gql`query { users { name } }`
• Lit HTML : html`<p>${text}</p>`

Tu n'as pas besoin d'écrire tes propres gabarits étiquetés souvent, mais comprendre le concept aide lors de la lecture de code de bibliothèque.