Les template strings en JavaScript

Vous savez déjà certainement que les chaînes de caractères en JavaScript peuvent être contenues indifféremment entre des guillements simples ' (apostrophes en français) et doubles ".

Une nouveauté bien intéressante d'ECMAScript 2015 (= ES6) permet d'utiliser les backquotes ` (accent grave) pour déliminer des chaînes de texte dans lesquelles on peut interpréter des variables ou portions de code. Très pratique pour ne pas avoir à concaténer texte "en dur" et variables, et pour y placer des quotes classiques (' et ") sans risquer l'erreur de syntaxe.

const message = `Hello tout le monde`;

On appelle ceci les template strings ou aussi template literals. Le côté template est justement pensé pour constituer des modèles de blocs de texte réutilisables.

L'implémentation¹ dans tous les navigateurs modernes - en mettant de côté le vénérable Internet Explorer - permet de s'en servir sans se poser trop de question.

Variables

L'usage de base consiste à imbriquer des variables dans les chaînes, entre ${ et }. Elles se verront "remplacées" par leur valeur au moment de l'exécution.

var kiwis = 3;
const message = `J'ai ${kiwis} kiwis dans mon panier`;
// Résultat : J'ai 3 kiwis dans mon panier

On retrouve ici le même concept qu'en PHP avec les chaînes de texte entre guillemets doubles qui interprètent les variables : echo "Ma variable : $kiwis";

Expressions et fonctions

En réalité, cela fonctionne aussi avec des expressions, c'est-à-dire tout ce qui retourne une valeur, ce qui est encore plus pratique :

var kiwis = 3;
var mangues = 5;
var prix = 13.37;
const message = `J'ai ${kiwis+mangues} fruits dans mon panier`;
// Résultat : J'ai 8 fruits dans mon panier
const total = `Kiwis : ${kiwis*prix} €`;
// Résultat : Kiwis : 40.11 €

function timestamp() { return new Date().getTime() }
const message = `Le timestamp actuel est ${timestamp()}`;

De même avec des objets :

var fruits = {kiwis:3, mangues:5};
const message = `J'ai ${fruits.kiwis + fruits.mangues} kiwis dans mon panier`;

Chaînes multilignes

Cette nouvelle façon de procéder permet des retours à la ligne sans utiliser d'autres astuces telles que la concaténation ou l'échappement avec .

const message = `J'ai des kiwis
dans mon panier
et c'est très bon.`;

Templates

Avec tout ceci on peut imaginer des fonctions retournant des portions de document HTML, réutilisables, prenant en paramètres des données brutes.

<ul class="js-fruits"></ul>

let kiwi = {
  nom: "kiwi",
  poids: "100g",
  vitamines: "C, B, E"
};
let citron = {
  nom: "citron",
  poids: "300g",
  vitamines: "C"
};
function htmlFruit(data) {
  return `<li>Le ${data.nom} pèse ${data.poids} et contient des vitamines ${data.vitamines}</li>`;
}
document.querySelector('.js-fruits').innerHTML += htmlFruit(kiwi) + htmlFruit(citron);

Template strings avec tags

L'usage le plus avancé et complexe des template strings reste celui avec des tags, pour générer des chaînes en passant par l'intermédiaire de fonctions. La fonction est placée en amont des backquotes :

function transfo(strings, ...values) {
   let str = '';
   strings.forEach((string, i) => {
       if(values[i]) str += string + values[i] + "!";
   });
   return str;
}
var fruit = "kiwi";
var vitamines = "C";
var message = transfo`Le ${fruit} contient des vitamines ${vitamines}`;
// Résultat : "Le kiwi! contient des vitamines C!"

Pour ceci je vous renvoie à l'article de Wes Bos qui décrit bien leur fonctionnement et ce que l'on peut en faire concrètement : Tagged Template Literals

Frameworks et bibliothèques

Etant donné qu'il s'agit d'une structure de base du langage, on peut s'en servir dans du code JavaScript vanilla et avec des outils tels que jQuery, Angular, React.