Avec ES6 (ou ES2015 si vous préférez), nous pouvons créer des chaînes de caractères de gabarit avec des littéraux de gabarit. Les littéraux de gabarit sont des chaînes de caractères dans lesquelles nous pouvons injecter des variables et des fonctions. Ils nous permettent d’écrire sans utiliser les signes plus + pour concaténer les chaînes et les variables. Ces chaînes utilisent un back-tick ` au lieu de guillemets simples ou doubles.

Concaténation de variables:

var name = "Josh";
var string = "Hello " + name;// output = <p>Hello Josh</p>

Littéral de modèle avec variable:

let name = "Josh";
let string = `Hello ${name}`;// output = <p>Hello Josh</p>

La différence ici est d’utiliser un signe dollar et des accolades${} autour d’un nom de variable et aucun signe plus ${variableName} . Cela rend l’utilisation de chaînes et de variables ensemble plus lisible.

Concaténation de lignes:

var string = "The quick brown fox " +
"jumps over " +
"the lazy dog";

Lignes de littéraux de modèles:

let string = `The quick brown fox
jumps over
the lazy dog`;

Maintenant, nous commençons à voir que les littéraux de modèles ressemblent beaucoup aux moteurs de modèles. Voyons à quoi cela pourrait ressembler :

let data = { greeting: 'Hello', name: 'Josh' };
let template = `<p>${data.greeting} {data.name}</p>`;
element.innerHTML = template;// output = <p>Hello Josh</p>

Un littéral de gabarit a ajouté les données de l’objet dans la chaîne pour que nous puissions les utiliser. Nous pouvons utiliser des variables et des objets pour informer les données dans la chaîne. Tout ce qui se trouve entre les accolades est évalué, des nombres aux conditions en passant par les fonctions.

Math:

let number = `${2 * 5}`;// output = 10

Condition ternaire:

let time = 'night';
let string = `Good ${time === 'night' ? 'evening' : 'day'}, Josh`;// output = Good evening, Josh

En rassemblant tout cela, nous pourrions construire des fonctions pour gérer un contenu répété tel qu’un tableau.

Fonction:

.