Aller au contenu principal

Interpolation

Notions théoriques​

L'interpolation est une fonctionnalité de JavaScript qui permet d'insérer des variables directement dans des chaînes de caractères.

C'est une manière élégante et lisible de combiner des variables et du texte.

Pour utiliser l'interpolation, vous devez utiliser les guillemets inversés `, aussi appelés backticks, au lieu des guillemets simples ' ou doubles ".

À l'intérieur des backticks, vous pouvez insérer une variable en la plaçant entre ${ et }.

let prenom = "Jean";
let message = `Bonjour ${prenom} !`;
console.log(message); // Affiche "Bonjour Jean !"
Bonne pratique - Interpolation vs concatenation

Preferer les template literals `Bonjour ${nom}` a la concatenation "Bonjour " + nom pour la lisibilite.

Vous pouvez également utiliser des expressions plus complexes à l'intérieur des ${}, comme des opérations mathématiques ou des appels de fonction.

let age = 20;
let message = `Dans 10 ans, tu auras ${age + 10} ans.`;
console.log(message); // Affiche "Dans 10 ans, tu auras 30 ans."
Bonne pratique - Expressions complexes

Les template literals acceptent n'importe quelle expression JS dans ${}, y compris des appels de fonctions et des operateurs ternaires.

Exemple pratique​

let etudiant = {
    nom: "Dupont",
    prenom: "Jean",
    age: 20,
    notes: [15, 12, 14, 16, 13]
};

let message = `Bonjour ${etudiant.prenom} ${etudiant.nom}, tu as ${etudiant.age} ans.`;
console.log(message); // Affiche "Bonjour Jean Dupont, tu as 20 ans."

let somme = 0;
for(let i = 0; i < etudiant.notes.length; i++) {
  somme += etudiant.notes[i];
}
let moyenne = somme / etudiant.notes.length;
let messageNotes = `Ta moyenne est de ${moyenne}.`;
console.log(messageNotes); // Affiche "Ta moyenne est de 14."
Le même exemple avec reduce pour le parcours du tableau des notes

La méthode reduce() applique une fonction qui est un "réducteur" aux éléments du tableau (de gauche à droite) de manière à réduire le tableau à une seule valeur.

let etudiant = {
    nom: "Dupont",
    prenom: "Jean",
    age: 20,
    notes: [15, 12, 14, 16, 13]
};

let message = 'Bonjour ' + etudiant.prenom + ' ' + etudiant.nom + ', tu as ' + etudiant.age + ' ans.';
console.log(message); // Affiche "Bonjour Jean Dupont, tu as 20 ans."

let total = etudiant.notes.reduce(function(a, b) {
    return a + b;
}, 0);

let moyenne = total / etudiant.notes.length;
let messageNotes = 'Ta moyenne est de ' + moyenne + '.';
console.log(messageNotes); // Affiche "Ta moyenne est de 14."
Le même exemple avec reduce et une fonction flèchée
let etudiant = {
    nom: "Dupont",
    prenom: "Jean",
    age: 20,
    notes: [15, 12, 14, 16, 13]
};

let message = `Bonjour ${etudiant.prenom} ${etudiant.nom}, tu as ${etudiant.age} ans.`;
console.log(message); // Affiche "Bonjour Jean Dupont, tu as 20 ans."

let moyenne = (etudiant.notes.reduce((a, b) => a + b, 0)) / etudiant.notes.length;
let messageNotes = `Ta moyenne est de ${moyenne}.`;
console.log(messageNotes); // Affiche "Ta moyenne est de 14."

Test de mémorisation/compréhension​


Qu'est-ce que l'interpolation en JavaScript ?


Quel type de guillemets doit-on utiliser pour l'interpolation en JavaScript ?


Comment peut-on insérer une variable dans une chaîne de caractères en JavaScript ?


TP pour réfléchir et résoudre des problèmes​

Dans ce TP, vous allez travailler avec des objets et des tableaux et utiliser l'interpolation pour créer des messages personnalisés.

  1. Créez un objet etudiant qui contient les propriétés nom, prenom, age et notes (un tableau de cinq notes aléatoires entre 1 et 20).
  2. Utilisez l'interpolation pour créer un message de bienvenue pour l'étudiant, qui inclut son prénom, son nom et son âge.
  3. Calculez la moyenne des notes de l'étudiant et utilisez l'interpolation pour créer un message qui affiche cette moyenne.
  4. Affichez les deux messages sur la console.
Bonne pratique - Template literals multilignes

Les template literals supportent les retours a la ligne sans \n : simplement appuyer sur Entree dans le backtick.

Version avec reduce
let etudiant = {
    nom: "Dupont",
    prenom: "Jean",
    age: 20,
    notes: [15, 12, 14, 16, 13]
};

let message = `Bonjour ${etudiant.prenom} ${etudiant.nom}, tu as ${etudiant.age} ans.`;
console.log(message); // Affiche "Bonjour Jean Dupont, tu as 20 ans."

let moyenne = (etudiant.notes.reduce((a, b) => a + b, 0)) / etudiant.notes.length;
let messageNotes = `Ta moyenne est de ${moyenne}.`;
console.log(messageNotes); // Affiche "Ta moyenne est de 14."
Une solution