Template Literals – Dynamische Strings leicht gemacht
Mit der Einführung von ES6 (ECMAScript 2015) hat JavaScript zahlreiche nützliche Features erhalten. Eines der bemerkenswertesten ist das Template Literal (auch Template String genannt). Diese neue Art der String-Notation vereinfacht das Arbeiten mit Strings erheblich, insbesondere wenn es um die Einbettung von Variablen oder mehrzeilige Strings geht.
Was sind Template Literals?
Template Literals sind String-Literale, die mit Backticks ` statt mit einfachen ' oder doppelten Anführungszeichen " umschlossen werden. Sie ermöglichen:
- Interpolationen von Ausdrücken mittels
${expression}. - Mehrzeilige Strings ohne spezielle Zeichen oder Verkettungen.
- Einfache Einbindung von Variablen und Funktionen direkt im String.
Variable Interpolation
Vor ES6 musste man Variablen in Strings durch Verkettung einfügen:
const name = 'Anna';
const greeting = 'Hallo, ' + name + '!';
console.log(greeting); // Ausgabe: Hallo, Anna!
Mit Template Literals wird das wesentlich einfacher und lesbarer:
const name = 'Anna';
const greeting = `Hallo, ${name}!`;
console.log(greeting); // Ausgabe: Hallo, Anna!
Mehrzeilige Strings
Das Erstellen von mehrzeiligen Strings war früher umständlich und erforderte spezielle Zeichen oder Verkettungen:
const text = 'Erste Zeile\n' +
'Zweite Zeile\n' +
'Dritte Zeile';
console.log(text);
Mit Template Literals kannst du einfach Enter drücken:
const text = `Erste Zeile
Zweite Zeile
Dritte Zeile`;
console.log(text);
Ausdrücke innerhalb von Strings
Du kannst beliebige JavaScript-Ausdrücke innerhalb der ${}-Syntax verwenden:
const a = 5;
const b = 10;
console.log(`Die Summe von ${a} und ${b} ist ${a + b}.`);
// Ausgabe: Die Summe von 5 und 10 ist 15.
Auch Funktionen können aufgerufen werden:
function getUsername() {
return 'Max';
}
console.log(`Willkommen, ${getUsername()}!`);
// Ausgabe: Willkommen, Max!
Verschachtelte Template Literals
Template Literals können auch verschachtelt werden:
const isMember = true;
const greeting = `Guten Tag, ${isMember ? 'geschätztes Mitglied' : 'Gast'}!`;
console.log(greeting);
// Ausgabe: Guten Tag, geschätztes Mitglied!
Tagged Templates
Eine fortgeschrittene Funktion von Template Literals sind Tagged Templates. Dabei wird eine Funktion vor das Template Literal gesetzt, die den String verarbeitet:
function highlight(strings, ...values) {
return strings.reduce((result, string, i) => {
return `${result}${string}<strong>${values[i] || ''}</strong>`;
}, '');
}
const name = 'Lisa';
const age = 25;
const message = highlight`Name: ${name}, Alter: ${age}`;
console.log(message);
// Ausgabe: Name: <strong>Lisa</strong>, Alter: <strong>25</strong>
In diesem Beispiel formatiert die Funktion highlight den Text, indem sie die eingefügten Werte hervorhebt.
Rohdaten von Strings abrufen
Mit der Eigenschaft String.raw kannst du die Rohdaten eines Template Literals abrufen, was nützlich sein kann, wenn du Backslashes oder andere Sonderzeichen verwenden möchtest:
const filePath = String.raw`C:\Entwicklung\neues_projekt`;
console.log(filePath);
// Ausgabe: C:\Entwicklung\neues_projekt
Fazit
Template Literals sind ein mächtiges Werkzeug, um Strings in JavaScript dynamischer und lesbarer zu gestalten. Sie vereinfachen nicht nur die Einbettung von Variablen und Ausdrücken, sondern ermöglichen auch das einfache Erstellen von mehrzeiligen Strings und die Verwendung von Tagged Templates für fortgeschrittene String-Manipulationen.
Probiere Template Literals in deinem nächsten Projekt aus und erlebe, wie sie deinen Code vereinfachen können!