Frontend Academy · Leçon

Littéraux de modèle et chaînage optionnel

Leçon 3 sur 413 étapes

Littéraux de modèle et chaînage optionnel est une leçon Frontend Academy gratuite sur CoddyKit. Ceci est la leçon 3 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Frontend Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Frontend Academy comprend 4 leçons au total.

Littéraux de gabarit : chaînes entre accents graves

Les littéraux de gabarit (chaînes entre accents graves) prennent en charge les chaînes multilignes et les expressions intégrées. Ils remplacent la concaténation de chaînes avec + et rendent l'intention plus claire.

// String concatenation (old way):
const msg = 'Hello, ' + name + '! You have ' + count + ' messages.';

// Template literal (modern):
const msg2 = `Hello, ${name}! You have ${count} messages.`;

Littéraux de gabarit multilignes

Les littéraux de gabarit conservent les sauts de ligne et l'indentation. Vous n'avez plus besoin de \n ni de concaténer des chaînes sur plusieurs lignes.

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

const sql = `
  SELECT *
  FROM users
  WHERE age > ${minAge}
  ORDER BY name
`;

Expressions dans les littéraux de gabarit

N'importe quelle expression JavaScript peut être placée dans ${} : opérateurs ternaires, appels de fonctions, opérations arithmétiques et appels de méthodes.

const tax = 0.2;
const price = 50;
const receipt = `
  Subtotal: $${price}
  Tax (${tax * 100}%): $${price * tax}
  Total: $${price * (1 + tax)}
  ${isPaid ? 'PAID' : 'UNPAID'}
`;

Littéraux de gabarit balisés

Un gabarit balisé appelle une fonction en lui transmettant les parties de la chaîne et les valeurs interpolées comme arguments. Cette technique est utilisée par des bibliothèques comme styled-components, GraphQL (gql``) et sql`` pour construire des requêtes sûres.

function highlight(strings, ...values) {
  return strings.reduce((acc, str, i) =>
    acc + str + (values[i] !== undefined ? `<mark>${values[i]}</mark>` : ''), '');
}
const msg = highlight`Hello ${name}, you have ${count} messages.`;

Chaînage optionnel : ?.

L'opérateur de chaînage optionnel ?. s'arrête et renvoie undefined au lieu de déclencher une erreur TypeError si le membre de gauche vaut null ou undefined. Il évite les vérifications défensives de nullité.

const user = null;

// Without optional chaining (throws TypeError):
// user.profile.avatar

// With optional chaining (returns undefined):
const avatar = user?.profile?.avatar;
console.log(avatar); // undefined — no error

Appels de méthodes optionnels

obj?.method() appelle la méthode uniquement si obj n'est ni null ni undefined. Si obj vaut null, l'expression renvoie undefined sans déclencher d'erreur.

const timer = getTimer(); // might return null
timer?.start(); // only calls start() if timer exists

// Also works on array access:
const firstItem = arr?.[0]; // undefined if arr is null

Coalescence des valeurs nulles : ??

L'opérateur de coalescence des valeurs nulles ?? renvoie le membre de droite uniquement si le membre de gauche vaut null ou undefined (et non une valeur fausse). Contrairement à ||, il ne considère pas 0 ni '' comme des valeurs nulles.

const port = config.port ?? 3000;  // 3000 only if port is null/undefined
const name = user.name ?? 'Anonymous';

// Compare with ||:
console.log(0 ?? 'default');   // 0 (not nullish)
console.log(0 || 'default');   // 'default' (falsy!)

Affectation conditionnelle pour les valeurs nulles : ??=

a ??= b affecte b à a uniquement si a vaut null ou undefined. C'est une forme abrégée de a = a ?? b. Cette syntaxe est utile pour initialiser conditionnellement les propriétés d'un objet.

let cache = {};
function getUser(id) {
  cache[id] ??= fetchUser(id); // only fetch if not cached
  return cache[id];
}

Opérateurs d'affectation logique

&&= affecte une valeur uniquement si le membre de gauche est considéré comme vrai. ||= affecte une valeur uniquement si le membre de gauche est considéré comme faux. Avec ??=, ces opérateurs permettent d'écrire des affectations conditionnelles concises.

user.name ||= 'Anonymous';  // set if falsy
user.role &&= user.role.toLowerCase(); // transform if exists

Combiner ?. et ??

Combinez le chaînage optionnel et la coalescence des valeurs nulles pour accéder à une propriété en toute sécurité avec une valeur par défaut.

const city = user?.address?.city ?? 'Unknown';
const total = cart?.items?.length ?? 0;

Les méthodes de chaînes à connaître

Méthodes courantes des chaînes : trim(), trimStart(), trimEnd(), padStart(), padEnd(), startsWith(), endsWith(), includes(), replaceAll(), at().

const str = '  Hello World  ';
str.trim();           // 'Hello World'
str.includes('World'); // true
'5'.padStart(3, '0'); // '005'
'abc'.at(-1);         // 'c'
'aabbcc'.replaceAll('b', 'x'); // 'aaxxcc'

Vérification rapide

Que renvoie const val = obj?.foo?.bar ?? 'default' si obj vaut null ?

Réponds-y dans la leçon interactive

Récapitulatif : littéraux de gabarit et chaînage optionnel

Les chaînes entre accents graves prennent en charge les expressions et les chaînes multilignes. Les gabarits balisés permettent de créer des DSL. ?. permet d'accéder aux propriétés en toute sécurité sans vérifications de nullité. ?? fournit une valeur par défaut lorsque la valeur vaut null ou undefined (et pas seulement lorsqu'elle est fausse). Combinez ces fonctionnalités pour accéder aux données de manière sûre et lisible, avec des valeurs par défaut.

Gratuit pour commencer

Apprends HTML avec un tuteur IA — gratuit

Écris et exécute du vrai code dans ton navigateur, obtiens de l'aide instantanée d'un tuteur IA disponible 24h/24, et reprends là où tu t'es arrêté sur le web ou dans l'app.

Cours: 41
Leçons: 163

Commencer gratuitement Voir le cours complet

Questions Fréquemment Posées

La leçon « Littéraux de modèle et chaînage optionnel » est-elle gratuite ?

Oui — le texte complet de « Littéraux de modèle et chaînage optionnel » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Frontend Academy, passe à CoddyKit PRO. Le cours Frontend Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Littéraux de modèle et chaînage optionnel » ?

Insérez des expressions dans des chaînes avec les littéraux de modèle, accédez aux propriétés imbriquées en toute sécurité avec ?. et interrompez l’évaluation avec l’opérateur de coalescence des vale… Tu pratiques Frontend Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer Frontend Academy ?

Aucune expérience préalable n'est requise. Frontend Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 3 sur 4.

Combien de temps prend la leçon « Littéraux de modèle et chaînage optionnel » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon Frontend Academy ?

Oui. Chaque leçon Frontend Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

Méthodes de tableau : map, filter, reduce et find
Déstructuration et opérateur spread des objets
Littéraux de modèle et chaînage optionnel
Modules : import et export

← Retour à Frontend Academy