ES6 – Template Strings, modèles littéraux ou chaînes de modèles

En Javascript, la gestion des interface utilisateur peut se faire directement dans un système de Class qui vont injecter du HTML dans le DOM.
On peut dynamiser l’affichages des datas en utilisant une des fonctionnalités de Javascript ES6, c’est le Template String.

Bref rappel sur ce qu’est que le Template Sting

Il d’agit d’une manière d’afficher les variable avec du text standard. C’est une nouvelle méthode de concaténation.

let name = 'toto'
console.log(`Salut je m’appel ${name}`)

Jusque la c’est bon mais je vais vous monter que l’on peut aller beaucoup plus loin avec cette nouvelle feature d’ES6.

Utiliser le Template Sting pour faire de calcule

Voici une exmple très parlant qui montre comment faire des calcule en utilisant la technique du Template String

let a = 50
let b = 10
console.log(`${(a+b)/2}`)
// 30

Construit du HTML avec le Template String

Ecrire du HTML en JS est un supplice. Maintenant il y à le Template String :

let name = 'toto'
let block = `
	<h1>Hello ${name}</h1>
	C’est trop cool le Template String
 `;

Faire de boucle avec avec le Template String

Une autre caractéristique de cette feature c’est que l’on peut imbriquer cette syntaxe pour effectuer des opération complexe comme des boucle!

let fruits = ['pomme', 'poire', 'orange']
let list = `
	<p>Liste de fruits (${fruits.length})</p>
	<ul>
		${fruits.map((fruit, index)=>{
			return `<li id="${index}">${fruit}</li>`
		}).join(' ')}
	</ul>
 `;

Les conditions avec le Template String

On peut aussi utiliser les conditions habituelles de javascript pour effectuer des tests

let fruits = ['pomme', 'poire', 'orange']
let list = `
	<p>Liste de fruits (${fruits.filter(a=>{return a != 'pomme'}).length})</p>
	<ul>
		${fruits.map((fruit, index)=>{
			return (fruit != 'pomme' )? `<li id="${index}">${fruit}</li>`: null
		}).join(' ')}
	</ul>

Cela fonctionne super bien et permet donc de pouvoir générer du HTML très facilement avec du Javascript. On peut Même imaginer des fonction ou méthode dédiée qui retournent le bloc HTML construit. Je vous laisse vous amuser avec cette feature ES6 et vous retrouve tout bientôt avec d’autre infos pratiques.

mail_outline
Souscrit à ma newsletter pour recevoir les derniers articles et mise à jours