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 !"

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."

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 ?

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

C'est une fonctionnalité qui permet de convertir directement des variables en chaînes de caractères.

C'est une fonctionnalité qui permet de remplacer directement des variables par des chaînes de caractères.

Aucune des réponses précédentes.

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

Les guillemets simples ('').

Les guillemets doubles ("").

Les guillemets inversés (``).

Aucun des trois.

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

En utilisant l'opérateur + à l'intérieur de la chaîne de caractères en JavaScript.

En utilisant l'opérateur & à l'intérieur de la chaîne de caractères en JavaScript.

En utilisant les ${} à l'intérieur des guillemets inversés.

Aucune des réponses précédentes.

---

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.

Une solution possible

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."

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."

---