Javascript : Template Strings

Dès les débuts de Javascript, les chaînes de caractères peuvent être contenues entre des guillemets simples (') et guillemets doubles (").

Depuis ECMAScript 6, on peut utiliser les templates strings ou template literals. Ce n'est pas seulement une déclaration de caractères comme nous allons le voir dans cet article.

Vous trouverez sur le blog un article sur les Web Components. Les templates strings peuvent être très utiles dans les Web Components.

Déclaration de caractères

Vous pouvez utiliser les templates strings comme les guillemets simples et doubles.

const hello = `Bonjour !`;

Les variables, expressions et fonctions

L'avantage et la nouveauté des templates strings, par rapport aux guillemets simples ou doubles, sont l'utilisation de variables.

Les variables ressemblent au data binding d'AngularJS ou ReactJS.

var firstname = "Ronan";
const hello = `Bonjour ${name} !`;

${name} va être remplacé par la valeur de la variable.

On peut aussi se servir d'expressions et de fonctions pour calculer les valeurs à afficher.

const x = 1;
const y = 2;
const result = `${x} + ${y} = ${x + y}`; // 1 + 2 = 3

Ou directement de fonction :

function addTwo(nb) {
  return nb + 2;
}
const result = `${addTwo(2)}`; // 4

Vous pouvez même utiliser les objets.

var person = {firstname: "John", lastname: "Doe"};
const message = `${person.firstname} {person.lastname}`; // John Doe

Template strings avec tags

On peut créer des templates avec des fonctions.

function personPresentation(strings, ...values) {
   let str = '';
   strings.forEach((string, i) =< {
       str += string + (values[i] || '');
   });
   return str;
}
var name = "John Doe";
var age = "30";
var message = personPresentation`${name} a ${age} ans`;

Et on peut aussi créer des templates HTML directement et qui sont très utiles pour les Web Components.

function personHTML(name){
   return `<h2>${name}</h2>`;
}