Les littéraux de gabarits (template literals) sont des littéraux de chaînes de caractères qui intègrent des expressions. Il est possible d'utiliser des chaînes de caractères sur plusieurs lignes ainsi que les fonctionnalités d'interpolation de chaînes.
Note : Un nouveau nom « template literal » (ou littéral de gabarit) a été adapté par la suite.
Syntaxe
`chaîne de texte` `chaîne ligne 1 chaîne ligne 2` `texte ${expression} texte chaîne` tag `texte ${expression} texte chaîne`
Description
Les littéraux de gabarits de caractères sont délimités par des accents graves seuls (backticks) (` `) et non avec des doubles ou simples quotes. Les templates de gabarits peuvent contenir des éléments de substitution (placeholders). Ceux-ci sont indiqués par le signe dollar ($) et des accolades : ${expression}
. Les expressions contenues dans les éléments de substitution et le texte sont ensuite passés à une fonction. La fonction par défaut permet de concaténer les différentes parties en une seule chaîne de caractères. Si une expression précède le gabarit (par exemple : tag ci-avant), le gabarit de chaîne est appelé un gabarit étiqueté. Dans ce cas, l'expression qui étiquette (généralement, ce sera un fonction) le gabarit est appelée pour traiter le gabarit. Pour échapper un accent grave, il faudra le précéder d'une barre oblique inversée avant (\) :
`\`` === "`"; // true
Les chaînes de caractères sur plusieurs lignes
Tout caractère de saut de ligne peut être inséré dans le gabarit. Avec des chaînes de caractères classiques, il aurait fallu utilise la syntaxe suivante :
console.log("ligne de texte 1\n"+ "ligne de texte 2"); // "ligne de texte 1 // ligne de texte 2"
Désormais, avec les littéraux de gabarits, il est possible d'écrire :
console.log(`ligne de texte 1 ligne de texte 2`); // "ligne de texte 1 // ligne de texte 2"
Interpolation d'expression
Pour intégrer des expressions dans des chaînes de caractères « normales », il fallait utiliser la syntaxe suivante :
var a = 5; var b = 10; console.log("Quinze est " + (a + b) + " et n'est pas " + (2 * a + b) + "."); // "Quinze est 15 et n'est pas 20."
Désormais, avec les gabarits, on peut utiliser le sucre syntaxique pour rendre la chaîne plus lisible :
var a = 5; var b = 10; console.log(`Quinze est ${a + b} et n'est pas ${2 * a + b}.`); // "Quinze est 15 et n'est pas 20."
Les gabarits étiquetés
Il est possible d'utiliser les gabarits de manière plus avancée grâce à l'étiquetage de gabarits. Cette fonction d'étiquette (tag) permettra de modifier la chaîne résultante d'un gabarit. Le premier argument de la fonction est un tableau de littéraux de chaînes de caractères ("Coucou " et " monde" dans l'exemple). Les arguments suivants représentent les valeurs qui sont à traiter (on parle parfois de valeurs cuisinées ou cooked en anglais) dans les expressions de substitutions ("15" et "50" dans l'exemple). Finalement, la fonction renvoie la chaîne résultante du gabarit. Le nom pris pour l'étiquette ci-après n'est qu'un exemple, le nom utilisé pour la fonction peut être n'importe quel nom valide.
var a = 5; var b = 10; function tag(strings, ...values) { console.log(strings[0]); // "Coucou " console.log(strings[1]); // " monde " console.log(strings[2]); // "" console.log(values[0]); // 15 console.log(values[1]); // 50 return "Bazinga !"; } tag`Coucou ${ a + b } monde ${ a * b }`; // "Bazinga !"
Il n'est pas nécessaire que les fonctions d'étiquette renvoient une chaîne de caractères, par exemple :
function template(strings, ...keys) { return (function(...values) { var dict = values[values.length - 1] || {}; var result = [strings[0]]; keys.forEach(function(key, i) { var value = Number.isInteger(key) ? values[key] : dict[key]; result.push(value, strings[i + 1]); }); return result.join(''); }); } template`${0}${1}${0} !`('B', 'O'); // "BOB !" template`${0} ${'toto'} !`('Hello', {toto: 'World'}); // "Hello World !"
Les chaînes brutes
La propriété spéciale raw
, est une propriété du premier argument de la fonction d'étiquette vue ci-avant. Elle permet d'accéder aux chaînes brutes, telles qu'elles ont été entrées.
function tag(strings, ...values) { console.log(strings.raw[0]); } tag`chaîne ligne 1 \n chaîne ligne 2`; // affichera dans la console : // "chaîne ligne 1 \n chaîne ligne 2"
De plus, la méthode String.raw()
permet de créer des chaînes de caractères brutes, de la même façon qu'avec la concaténation par défaut des gabarits :
String.raw`Salut\n${2+3}!`; // "Salut\\n5!"
Securité
Les gabarits de caractères ne doivent pas être manipulés par les utilisateurs finaux car il permettent d'accéder aux variables et fonctions.
`${console.warn("this is",this)}`; // "this is" Window let a = 10; console.warn(`${a+=20}`); // "30" console.warn(a); // 30
Spécifications
Spécification | État | Commentaires |
---|---|---|
ECMAScript 2015 (6th Edition, ECMA-262) La définition de 'Template Literals' dans cette spécification. |
Standard | Définition initiale. Défini dans plusieurs sections de la spécification : les littéraux de gabarits, les gabarits étiquetés |
ECMAScript 2017 Draft (ECMA-262) La définition de 'Template Literals' dans cette spécification. |
Projet | Définis dans plusieurs sections de la spécification : les littéraux de gabarits, les gabarits étiquetés |
Compatibilité des navigateurs
Fonctionnalité | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Support simple | 41 | (Oui) | 34 (34) | Pas de support | 28.0 | 9 |
Fonctionnalité | Android | Chrome pour Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
Support simple | Pas de support | 41.0 | 34.0 (34) | Pas de support | 28.0 | 9 |