Template literals
Des templates de texte entre guillemets inversés : ils insèrent des valeurs via ${} et peuvent s’étendre sur plusieurs lignes.
- Renvoie
- Une nouvelle chaîne avec les valeurs des expressions insérées à la place de
${...}. Un template otagué renvoie ce que la fonction du tag renvoie.
Exemple
#const name = 'Emma'
const points = 120
const goal = 200
console.log(`Salut, ${name} ! Vous avez ${points} pts.`)
console.log(`Il manque ${goal - points} pts pour l’objectif.`)Définition et utilisation
#Les template literals, c’est-à-dire les templates de texte, s’écrivent entre guillemets inversés `. À l’intérieur, vous pouvez insérer n’importe quelle expression JavaScript dans ${...} : une variable, un calcul, un appel de fonction ou un opérateur conditionnel. Le résultat sera converti en texte et inséré à cet endroit.
Un template peut s’étendre sur plusieurs lignes. Les sauts de ligne et les indentations du code se retrouvent dans la chaîne exactement comme ils sont écrits, donc vous n’avez besoin ni de \n ni de concaténation avec +. C’est pratique pour construire des messages et des fragments HTML.
Un nom de fonction écrit juste avant le template, par ex. highlight`Vous avez ${points} pts`, crée un template otagué (tagged template). La fonction reçoit séparément les fragments de texte fixes et les valeurs insérées, et peut donc les traiter comme elle le souhaite. Le tag intégré String.raw renvoie le texte sans interpréter des séquences comme \n.
Syntaxe
#`texte`
`texte ${expression} texte`
`ligne 1
ligne 2`
tag`texte ${expression}`Plus d’exemples
#const course = 'JavaScript'
const lessons = 12
const card = `Cours : ${course}
Leçons : ${lessons}
Statut : ${lessons > 10 ? 'long' : 'court'}`
console.log(card)const tasks = ['Variables', 'Boucles']
const list = `<ul>${tasks.map((task) => `<li>${task}</li>`).join('')}</ul>`
console.log(list)function highlight(strings, ...values) {
return strings.reduce((result, text, i) => {
const value = i < values.length ? `[${values[i]}]` : ''
return result + text + value
}, '')
}
const player = 'Lucas'
const exp = 45
console.log(highlight`Joueur ${player} a obtenu ${exp} EXP`)
console.log(String.raw`C:\nouveau\dossier`)Compatibilité des navigateurs
#Largement disponible
Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.
- Chrome
- Edge
- Firefox
- Safari
Bonnes pratiques
#- N’insérez pas de données utilisateur dans du HTML sans les protéger. Le template ne convertit pas les caractères
<et>, donc un tel code ouvre la porte aux attaques XSS. Insérez le texte viatextContent. - Dans un template multiligne, les indentations du code font partie de la chaîne. Si elles dérangent, commencez les lignes suivantes depuis le bord gauche, ou assemblez un tableau de lignes avec
join("\n"). - Un objet inséré via
${}se transforme en[object Object]. Insérez un champ précis ou utilisezJSON.stringify().
Entrées associées
#- String.prototype.replace()Renvoie une nouvelle chaîne dans laquelle la première occurrence d’un motif (ou toutes, avec le flag g) a été remplacée par un autre texte.
- String.prototype.padStart()Complète une chaîne à gauche avec le texte donné jusqu’à ce qu’elle atteigne la longueur indiquée. Idéal pour les zéros initiaux.
- ? :L’opérateur conditionnel (ternaire) renvoie l’une de deux valeurs selon une condition, en une seule expression courte.
- Array.prototype.join()Assemble les éléments du tableau en une seule chaîne avec le séparateur choisi.
- String.prototype.split()Découpe une chaîne en un tableau de fragments selon un séparateur : un caractère, un texte ou une expression régulière.
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.