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.

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

Compatibilité des navigateurs

Voir aussi

• String
• String.raw()
• Grammaire lexicale de JavaScript
• Syntaxe compatible avec ES3 pour des équivalents de gabarits
• ES6 en détails : les gabarits de chaînes sur tech.mozfr.org