Template literals · Chaînes modèles (Template literals)
This page needs a recent browser (with SharedArrayBuffer support). Please update Chrome, Edge, Firefox or Safari to the latest version. · Cette page nécessite un navigateur récent (avec support SharedArrayBuffer). Veuillez mettre à jour Chrome, Edge, Firefox ou Safari vers la dernière version.
English
A cleaner way to build strings
- Wrap a string in backticks
`and you can drop values straight in with${...}. - This is a template literal — much tidier than joining with lots of
+.
Français
Une façon plus propre de construire des chaînes
- Entourez une chaîne de caractères avec des backticks
`et vous pouvez y intégrer directement des valeurs grâce à${...}. - C'est une chaîne littérale — beaucoup plus propre que joindre avec beaucoup de
+.
let name = "Ada";
let age = 15;
console.log(`${name} is ${age}`); // → Ada is 15
English
Any expression fits inside ${ }
- Whatever you write inside
${...}is worked out first, then dropped into the string.
Français
N'importe quelle expression tient dans ${ }
- Tout ce que vous écrivez à l'intérieur de
${...}est évalué d'abord, puis inséré dans la chaîne.
let a = 3;
let b = 4;
console.log(`${a} + ${b} = ${a + b}`); // → 3 + 4 = 7
English
Same string, two ways
+and a template literal can build exactly the same text.- In backticks, spaces and punctuation stay where you type them, so a missing space is easy to see.
Français
Même chaîne, deux façons
+et une chaîne littérale peuvent construire exactement le même texte.- Dans les accents graves, les espaces et la ponctuation restent là où vous les tapez, donc un espace manquant est facile à voir.
let item = "pen";
let price = 3;
console.log("A " + item + " costs " + price + " yuan."); // → A pen costs 3 yuan.
console.log(`A ${item} costs ${price} yuan.`); // → A pen costs 3 yuan.
English
Watch out
- Backticks
`are not the same as quotes'or".${...}only works inside backticks. - Bonus: a backtick string can span several lines — handy for longer messages.
Français
Attention
- Les backticks
`ne sont pas identiques aux guillemets'ou".${...}ne fonctionne qu'à l'intérieur des backticks. - Bonus : une chaîne d'accent grave peut s'étendre sur plusieurs lignes — pratique pour des messages plus longs.
English
Common mistakes
- Template literals use backticks and
${...}:`Hi ${name}`, not quotes. - Inside
${...}you can put any expression.
Français
Erreurs courantes
- Les littéraux de modèle utilisent des backticks et
${...}:`Hi ${name}`, et non des guillemets. - À l'intérieur de
${...}, vous pouvez mettre n'importe quelle expression.
English
Now you try
- Use backticks and
${...}. - Press Check answer to test it.
Français
À vous maintenant
- Utilisez des accents graves et
${...}. - Appuyez sur Vérifier la réponse pour tester.
let name = "Sam". Use a template literal (backticks) to log Hello, Sam!. · let name = "Sam". Utilisez une chaîne de modèle (backticks) pour journaliser Hello, Sam!.
Click Run to see the output here. · Cliquez sur Exécuter pour voir le résultat ici.
a is 3 and · et b is 4. Use a template literal to log 3 + 4 = 7 (put a + b inside ${ }). · a est 3 et b est 4. Utilisez une chaîne de modèle pour journaliser 3 + 4 = 7 (mettez a + b à l'intérieur de ${ }).
Click Run to see the output here. · Cliquez sur Exécuter pour voir le résultat ici.
Use a template literal to log Total: 10, working out the 10 as 5 * 2 inside ${ }. · Utiliser une chaîne modèle pour log Total: 10, en calculant la 10 comme 5 * 2 à l'intérieur de ${ }.
Click Run to see the output here. · Cliquez sur Exécuter pour voir le résultat ici.