Les template strings en JavaScript

Astucejavascript

Publié par le (12793 lectures)

javascript string template

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émentation1 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.

Commentaires

Merci pour cet article. L'accent grave ressort malheureusement en erreur dans le panneau de rapport JSLint de Brackets. :(

Est-ce qu'il existe une possibilité de gérer des templates dans des variables ou en "run time" ?

Mes chaînes de caractères venant d'une base, et étant différente (par exemple en fonction de la langue....), et je voudrais bien faire:

var kiwis = 3;

var maString = "J'ai ${kiwis} kiwis dans mon panier";

var monLabel = ` ${maString}`

ou encore:

var monLabel = String.raw({raw: maString});

Mais monLabel ressemble toujours à maString avec son "...${kiwis}..." :-((

Est-ce qu'il existe une possibilité de gérer des templates dans des variables ou en "run time" ?

Mes chaînes de caractères venant d'une base, et étant différente (par exemple en fonction de la langue....), et je voudrais bien faire:

var kiwis = 3;

var maString = "J'ai ${kiwis} kiwis dans mon panier";

var monLabel = ` ${maString}`

ou encore:

var monLabel = String.raw({raw: maString});

Mais monLabel ressemble toujours à maString avec son "...${kiwis}..." :-((

didou68

14 Novembre 2018 à 18h37

Est-ce qu'il existe une possibilité de gérer des templates dans des variables ou en "run time" ?

<script type="text/javascript"> `use strict`;

var kiwis = 3;

var maString = `J'ai ${kiwis} kiwis dans mon panier`;

var monLabel = `${maString}`;

console.log(monLabel);

// J'ai 3 kiwis dans mon panier test.html:8:3

console.log(String.raw`${maString}`);

// KO

</script>

@didou68 :

didou68

14 Novembre 2018 à 18h37

Est-ce qu'il existe une possibilité de gérer des templates dans des variables ou en "run time" ?

<script type="text/javascript"> `use strict`;

var kiwis = 3;

var maString = `J'ai ${kiwis} kiwis dans mon panier`;

var monLabel = `${maString}`;

console.log(monLabel);

// J'ai 3 kiwis dans mon panier test.html:8:3

console.log(String.raw`${maString}`);

// KO

</script>

Commenter

Vous devez être inscrit et identifié pour utiliser cette fonction.

Connectez-vous (déjà inscrit)

Oubli de mot de passe ? Pas de panique, on va le retrouver

Pas encore inscrit ? C'est très simple et gratuit.