# Template literals

# Probleem bij concatenatie

Bij het concateneren van een string met variabelen moet je normaalgezien steeds de string afsluiten om de concatenatie te verrichten en achteraf terug openen om verder te gaan met de tekst. Neem het volgende voorbeeld:

const leeftijd = 39;
const naam = "Bart";

document.write("Dag " + naam + ", je bent " + leeftijd + " jaar oud.");

Hoewel het bovenstaande perfect werkt is het vervelend om te schrijven en te lezen. Een alternatief is het gebruik van template literals.

# Template literals gebruiken

Een template literal is een string waarin je de mogelijkheid hebt Javascript expressies op te nemen via placeholders.. Een template literal vervangt ook de aanhalingstekens " " met backticks ` `. Omdat een template literal ook gewoon een string is kan je in principe elke string met backticks schrijven.

console.log("String met aanhalingstekens");
console.log(`Template literal met backticks`);

Toch duiden de template literals eerder op de intentie om Javascript expressies binnen de string te gebruiken, zonder hiervoor de string te moeten eindigen en te concateneren. Om een Javascript expressie op te nemen schrijf je ze binnen een placeholder ${}. De placeholder opent met ${ en eindigt met de sluitingsacolade }. Binnen de placeholder kan eender welke Javascript expressie uitgevoerd worden, waarna de waarde in de string wordt geïnjecteerd.

const leeftijd = 39;
const naam = "Bart";

document.write(`Dag ${naam}, je bent ${leeftijd} jaar oud.`);

Javascript expressies kunnen uitgebreider zijn dan het gebruik van een enkele variabele. Ze kunnen ook ganse bewerkingen bevatten.

const breedte = 7;
const lengte = 10;

document.write(`De oppervlakte is ${breedte * lengte}m².`);