Met ES6 (of ES2015 als je wilt) kunnen we template strings maken met Template Literals. Sjabloon-literalen zijn strings waarin we variabelen en functies kunnen injecteren. Ze stellen ons in staat om te schrijven zonder gebruik te maken van plustekens + om strings en variabelen aan elkaar te plakken. Deze strings gebruiken een back-tick ` in plaats van enkele of dubbele aanhalingstekens.

Variabele aaneenschakeling:

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

Template literal met variabele:

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

Het verschil hier is het gebruik van een dollarteken en accolades${} rond een variabelenaam en geen plustekens ${variableName} . Dit maakt het gebruik van strings en variabelen samen leesbaarder.

Lijn aaneenschakeling:

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

Template literal lijnen:

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

Nu beginnen we te zien dat template literals veel op template engines lijken. Laten we eens kijken hoe dat eruit zou kunnen zien:

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

Een template letterlijk voegde de object gegevens toe aan de string voor ons om te gebruiken. We kunnen variabelen en objecten gebruiken om de gegevens in de string te informeren. Alles tussen de accolades wordt geëvalueerd, van getallen tot voorwaarden tot functies.

Math:

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

Ternaire voorwaarde:

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

Door dit alles samen te voegen, kunnen we functies bouwen om herhaalde inhoud te verwerken, zoals een array.

Functie: