Littéraux de gabarits

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

Voir aussi

Étiquettes et contributeurs liés au document

 Contributeurs à cette page : SphinxKnight, pmdhaussy, Bat
 Dernière mise à jour par : SphinxKnight,