Wat zijn template literals en waar worden ze voor…

Template literals, ook bekend als template strings, zijn een syntax-sugar in JavaScript die het mogelijk maken om expressies in strings te embedden met behulp van backticks (``).

Ze worden gebruikt voor:

Een handigere interpolatie van variabelen en expressies in strings:

const name = "Wereld";
const greeting = `Hallo, ${name}!`; // Variabele embedden
console.log(greeting); // Hallo, Wereld!

const sum = 2 + 3;
const result = `Som: ${sum}.`; // Expressie embedden
console.log(result); // Som: 5.

Het maken van meerregelige strings zonder gebruik te maken van het newline-teken (\n):

const multilineString = `
Dit
is een
meerregelige
string.
`;
console.log(multilineString);

Het bouwen van complexe string-uitdrukkingen, zoals bestandspaden of SQL-query's, met meer leesbaarheid:

const userId = 123;
const query = `SELECT * FROM users WHERE id = ${userId}`;
console.log(query);

Het gebruik van getagde templates (tagged templates) voor uitgebreide functionaliteit: Getagde templates stellen je in staat om een functie aan te roepen met een template-literal. Het eerste argument van de functie is een array van string-deelstukken, en de volgende argumenten zijn de waarden van de geïnterpoleerde uitdrukkingen.

function highlight(strings, ...values) {
  let str = '';
  strings.forEach((string, i) => {
    str += string;
    if (values[i]) {
      str += `<b>${values[i]}</b>`; // Bijvoorbeeld, vet maken
    }
  });
  return str;
}

const user = "Frontend";
const role = "ontwikkelaar";
const message = highlight`Hallo, ${user}! Jij bent een ${role}.`;
console.log(message); // Hallo, <b>Frontend</b>! Jij bent een <b>ontwikkelaar</b>.

Op deze manier maken template literals het werken met strings in JavaScript flexibeler, begrijpelijker en voorkomen ze complexiteit die gepaard gaat met string-concatenatie met het symbool +.

Wat zijn template literals en waar worden ze voor gebruikt?