MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

Les littéraux de modèle (template literals) sont des littéraux de chaînes de caractères permettant d'intégrer des expressions. Avec eux, vous pouvez utiliser des chaînes de caractères multi-lignes, ainsi que des fonctionnalités d'interpolation de chaînes.

Syntaxe

`texte`

`ligne de texte 1
ligne de texte 2`

`texte ${expression} texte`

etiquette `texte ${expression} texte`

Description

Les littéraux de modèle sont délimités par des carractères accent grave (` `)  au lieu des apostrophes doubles ou simples. Les littéraux de modèle peuvent contenir des marqueurs (placeholders). Ceux-ci sont indiqués par le signe dollar ($) et des accolades (${expression}). Les expressions dans les marqueurs et le texte entre eux sont passés à une fonction. La fonction par défaut concatène simplement les différentes parties en une seule chaîne. Si une expression précède le littéral de modèle (ici etiquette), le littéral de modèle est appelé "littéral de modèle étiqueté". Dans ce cas, l'expression d'étiquette (habituellement, une fonction)  est appelée avec le littéral de modèle traité, que vous pouvez manipuler avant envoi. Pour échapper un accent grave, mettez une barre oblique inverse  (\) avant l'accent grave :

`\`` === "`"; // true

Les chaînes de caractères multi-lignes

Tous les caractères de saut de ligne insérés dans la source font partie du littéral de modèle. Avec des chaînes de caractères normales, il vous aurait fallu utiliser la syntaxe suivante pour obtenir des chaînes multi-lignes :

console.log('ligne de texte 1\n'+
'ligne de texte 2');
// "ligne de texte 1
// ligne de texte 2"

Pour obtenir le même effet avec les chaînes multi-lignes, vous pouvez maintenant écrire :

console.log(`ligne de texte 1
ligne de texte 2`);
// "ligne de texte 1
//  ligne de texte 2"

Interpolation d'expressions

Pour intégrer des expressions dans des chaînes de caractères normales, il vous fallait utiliser la syntaxe suivante :

var a = 5;
var b = 10;
console.log('Quinze vaut ' + (a + b) + ' et\nnon ' + (2 * a + b) + '.');
// "Quinze vaut 15 et
// non 20."

Maintenant, avec les littéraux de modèle, vous pouvez faire usage de sucre syntaxique rendant les sustitutions comme celle-ci plus lisibles :

var a = 5;
var b = 10;
console.log(`Quinze vaut ${a + b}
et non ${2 * a + b}.`);
// "Quinze vaut 15 et
// non 20."

Imbriquer des templates

Il est possible d'imbriquer des templates afin d'avoir une syntaxe plus concise. Pour cela, on pourra ajouter ${( )} à l'intérieur d'un template afin de pouvoir écrire une paire  de ` à l'intérieur.

Par exemple avec ES5 :

var classes = 'header'
classes += (isLargeScreen() ?
   '' : item.isCollapsed ?
     ' icon-expander' : ' icon-collapser');

Avec ES2015/ES6, sans imbrication :

const classes = `header ${ isLargeScreen() && item.isCollapsed ?
    'icon-expander' : 'icon-collapser' }`;

Avec ES2015/ES6, avec l'imbrication :

const classes = `header ${( isLargeScreen() &&
 `icon-${item.isCollapsed ? 'expander' : 'collapser'}` )}`;

Les littéraux de modèle étiquetés

Une forme plus avancée de littéraux de modèle est constituée par littéraux de modèle étiquetés. Les étiquettes vous permettent de faire analyser les littéraux de modèle par une fonction. Le premier argument d'une fonction d'étiquette contient un tableau de valeurs de chaînes. Les arguments restants concernent les expressions. Finalement, votre fonction peut retourner votre chaîne remaniée (ou elle peut retourner quelque chose de complètement différent, comme décrit dans l'exemple suivant). Le nom de la fonction utilisée pour l'étiquette peut être tout nom que vous souhaitez.

var personne = 'Michou';
var age = 28;

function monEtiquette(chaines, expPersonne, expAge) {

  var chn0 = chaines[0]; // "ce "
  var chn1 = chaines[1]; // " est un "

  // Techniquement, il y a une chaîne après
  // l'expression finale (dans notre exemple),
  // mais elle est vide (""), donc n'en tenez pas compte.
  // var chn2 = chaines[2];

  var chnAge;
  if (expAge > 99){
    chnAge = 'centenaire';
  } else {
    chnAge = 'jeunot';
  }

  return chn0 + expPersonne + chn1 + chnAge;

}

var sortie = monEtiquette`ce ${ personne } est un ${ age }`;

console.log(sortie);
// ce Michou est un jeunot

Il n'est pas nécessaire que les fonctions d'étiquette renvoient une chaîne, comme le montre l'exemple suivant :

function modele(chaines, ...cles) {
  return (function(...valeurs) {
    var dict = valeurs[valeurs.length - 1] || {};
    var resultat = [chaines[0]];
    cles.forEach(function(cle, i) {
      var valeur = Number.isInteger(cle) ? valeurs[cle] : dict[cle];
      resultat.push(valeur, chaines[i + 1]);
    });
    return resultat.join('');
  });
}

var t1Fin = modele`${0}${1}${0}!`;
t1Fin('C', 'HI');  // "CHIC!"
var t2Fin = modele`${0} ${'truc'}!`;
t2Fin('Hello', {truc: 'World'});  // "Hello World!"

Les chaînes brutes

La propriété spéciale raw, disponible sur le premier argument  de la fonction des littéraux de modèle étiquetés, vous permet d'accéder aux chaînes brutes, telles qu'elles ont été entrées, sans traiter les séquences d'échappement.

function etiquette(chaines, ...valeurs) {
  console.log(chaines.raw[0]);
}

etiquette`ligne de texte 1 \n ligne de texte 2`;
// affichera dans la console : 
// "ligne de texte 1 \n ligne de texte 2"

En outre, la méthode String.raw() a pour fonction de créer des chaînes de caractères brutes, exactement comme la fonction de modèle par défaut le ferait :

var chn = String.raw`Salut\n${2+3}!`; 
// "Salut\n5!"

chn.length;
// 9

chn.split('').join(',');
// "S,a,l,u,t,\,n,5,!"

Les littéraux de modèle étiquetés et les séquences d'échappement

À partir de ES2016, les littéraux de modèle se conforment aux règles de séquences d'échappement suivantes :

  • Les séquences d'échappement Unicode commencent par "\u", par exemple\u00A9
  • Les séquences d'échappement pour les points de codet Unicode sont indiquées par "\u{}", par exemple \u{2F804}
  • Les séquences d'échappement hexadécimales commencent par "\x", par exemple \xA9
  • Les séquences d'échappement octales commencent par "\" et un (plusieurs) chiffre(s), par exemple \251.

Cela a pour conséquence que le littéral de modèle suivant pose problème, du fait que, selon la grammaire ECMAScript, un analyseur recherchera une séquence d'échappement Unicode valide mais trouvera une syntaxe mal formée :

latex`\unicode`
// Génère, dans les anciennes versions ECMAScript (ES2016 et précédentes)
// SyntaxError: malformed Unicode character escape sequence

Les littéraux de modèle étiquetés doivent permettre l'intégration d'autres langages (par exemple, des DSL ou du LaTeX), dans lesquels les séquences d'échappement sont fréquentes. La proposition Template Literal Revision pour ECMAScript (étape 4, à intégrer dans le standard ECMAScript 2018) lève la restriction syntaxique des séquences d'échappement dans les littéraux de modèle étiquetés.

Toutefois, les séquences d'échappement illégales doivent toujours être représentées dans la version "bidouillée". Dans le tableau "bidouillé", elles seront affichées comme un élément undefined :

function latex(chn) { 
 return { "bidouillee": chn[0], "brute": chn.raw[0] }
} 

latex`\unicode`

// { bidouillee: undefined, brute: "\\unicode" }

Notez que la restriction sur les séquences d'échappement est uniquement levée pour les littéraux de modèle étiquetés, et non pour les littéraux de modèle non étiquetés :

let mauvaise = `mauvaise séquence d'échappement : \unicode`;

Spécifications

Spécification État Commentaire
ECMAScript 2015 (6th Edition, ECMA-262)
La définition de 'Template Literals' dans cette spécification.
Standard Définition initiale. Définie dans plusieurs sections de la spécification : Template Literals, Tagged Templates
ECMAScript Latest Draft (ECMA-262)
La définition de 'Template Literals' dans cette spécification.
Standard évolutif Définie dans plusieurs sections de la spécification : Template Literals, Tagged Templates

Compatibilité des navigateurs

Fonctionnalité Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Support de base 41 (Oui) 34 (34) Pas de support 28.0 9
Template Literal Revision Pas de support Pas de support 53 (53) Pas de support Pas de support Pas de support
Fonctionnalité Android Chrome pour Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Support de base Pas de support 41.0 34.0 (34) Pas de support 28.0 9
Template Literal Revision Pas de support Pas de support 53.0 (53) Pas de support Pas de support Pas de support

Voir aussi

Étiquettes et contributeurs liés au document

 Contributeurs à cette page : SphinxKnight, HollyPony, edspeedy, NemoNobobyPersonne, kdex, JVirant, pmdhaussy, Bat
 Dernière mise à jour par : SphinxKnight,