JavaScript Strings & Template Literals verstehen

Drei Möglichkeiten, einen String zu schreiben

In JavaScript stehen dir drei verschiedene String-Begrenzer zur Verfügung. Zwei davon sind austauschbar – der dritte, die sogenannten Template Literals mit Backticks, kann deutlich mehr.

Einfache und doppelte Anführungszeichen erzeugen identische Strings – such dir eins aus und bleib dabei (die meisten modernen Codebases setzen standardmäßig auf einfache Anführungszeichen oder überlassen die Entscheidung einem Formatter). Backticks dagegen erzeugen ein Template Literal – und genau hier wird's spannend: Sie erlauben String-Interpolation und mehrzeilige Strings.

Unter der Haube kommt bei allen drei Varianten derselbe primitive String-Typ heraus. Welches Zeichen du als Begrenzer nimmst, ist reine Syntaxfrage.

Escape-Sequenzen und eingebettete Anführungszeichen

Innerhalb eines Strings leitet ein Backslash eine Escape-Sequenz ein. Die gängigsten sind \n (Zeilenumbruch), \t (Tabulator), \\ (literaler Backslash) sowie \" bzw. \', wenn du dasselbe Anführungszeichen einbetten willst, mit dem du den String geöffnet hast:

Die meisten Escapes kannst du dir einfach sparen, indem du die jeweils andere Anführungszeichen-Variante nimmst: Sie sagte "hallo" und ging. kommt ganz ohne Backslashes aus. Pragmatisch schlägt dogmatisch.

Template Literals: die Superkraft der Backticks

Ein Template Literal in JavaScript kann zwei Dinge, die normale Strings nicht können. Zum einen lassen sich damit Ausdrücke per ${...} direkt in den String einsetzen:

Alles, was zwischen ${...} steht, ist ein beliebiger JavaScript-Ausdruck – nicht nur ein Variablenname. Rechenoperationen, Funktionsaufrufe, Ternary-Operatoren und sogar verschachtelte Template Literals sind problemlos möglich:

Zweitens funktionieren Template Literals auch über mehrere Zeilen hinweg, ganz ohne \n:

Zeilenumbrüche im Quelltext landen direkt im String. Für alles, was länger als ein kurzes Label ist, sind Backticks fast immer die richtige Wahl.

String-Interpolation statt Konkatenation

Bevor es Template Literals gab, blieb nur der +-Operator, um dynamische Strings zusammenzubauen:

Beide Varianten liefern exakt dasselbe Ergebnis. Das Template Literal liest sich wie der Satz, den es zusammenbaut – bei der +-Variante musst du dagegen ständig auf Anführungszeichen, Leerzeichen und Verkettungsoperatoren achten. Setze + nur ein, wenn du eine kleine Sache an einen bestehenden String anhängst. Für alles Längere greifst du besser zu den Backticks.

Strings sind unveränderlich (immutable)

Jede Methode, die so aussieht, als würde sie einen String verändern, gibt in Wahrheit einen neuen zurück:

Wenn du die Änderung willst, musst du das Ergebnis irgendwo zuweisen. Genau hier fallen Einsteiger rein, die s.replace("a", "b") schreiben und erwarten, dass sich s dadurch ändert. Tut es aber nicht. Strings funktionieren in JavaScript wie Zahlen: Der Wert selbst lässt sich nicht verändern – nur die Variable kann auf einen neuen Wert zeigen.

Die JavaScript String-Methoden, die du wirklich brauchst

Die komplette String-API ist riesig. Das sind die paar Methoden, zu denen du im Alltag tatsächlich greifst:

Ein paar Dinge, die man sich merken sollte:

• length ist eine Eigenschaft, keine Methode – also ohne Klammern.
• replace mit einem einfachen String ersetzt nur das erste Vorkommen. Für alle Treffer nimmst du replaceAll oder einen regulären Ausdruck mit dem Flag g.
• slice(start, end) arbeitet mit einem halboffenen Intervall: Das Zeichen an der Position end gehört nicht mehr dazu.
• Negative Indizes bei slice zählen vom Ende her: s.slice(-3) liefert die letzten drei Zeichen.

Zeichen indizieren und durchlaufen

Strings verhalten sich wie schreibgeschützte Arrays aus Zeichen. Du kannst per Index darauf zugreifen und sie durchlaufen, einer bestimmten Position aber keinen neuen Wert zuweisen:

for...of iteriert über Code Points und kommt damit mit den meisten Unicode-Zeichen korrekt klar. Wenn du dagegen mit Indizes (s[i]) arbeitest, läufst du über UTF-16 Code Units – und das kann Emojis oder andere Zeichen außerhalb der BMP mittendrin zerlegen. Bei reinem ASCII-Text ist beides in Ordnung; sobald aber User-Input ins Spiel kommt, nimm lieber for...of oder [...s].

Tagged Template Literals

Es gibt noch eine weitere Variante, die du kennen solltest – auch wenn du sie selten selbst schreibst. Ein Tagged Template Literal ruft eine Funktion auf und übergibt dabei die statischen String-Teile und die interpolierten Werte als getrennte Argumente:

Die Tag-Funktion entscheidet, wie der fertige String am Ende aussieht – sie kann HTML escapen, SQL sicher zusammenbauen, CSS kompilieren oder GraphQL parsen. In der Praxis begegnet dir dieses Muster viel häufiger in Bibliotheken wie styled-components, graphql-tag oder lit-html, als dass du selbst eins schreibst. Wenn du aber doch mal eigene String-Verarbeitung brauchst, sind Tagged Templates das sauberste Werkzeug dafür.

Typische Stolperfallen

Ein paar Sachen, über die viele immer wieder stolpern:

• Rückgabewerte von Methoden vergessen zuzuweisen. s.trim() allein bewirkt gar nichts.
• Mit + eine Zahl und einen String zusammenkleben. "Age: " + 30 + 5 ergibt "Age: 305", nicht "Age: 35". Mit Template Literals umgehst du das elegant: `Age: ${30 + 5}`.
• == und String-Vergleiche durcheinanderbringen. Gleichheit schauen wir uns später noch im Detail an, aber schon mal vorweg: "1" == 1 ist true, "1" === 1 dagegen false. Nimm lieber immer ===.
• Annehmen, dass length der Anzahl der Zeichen entspricht. Bei Emojis und anderen Surrogate-Pair-Zeichen gibt "".length den Wert 2 zurück, nicht 1. Wenn du die tatsächlich wahrgenommenen Zeichen zählen willst, nutz [..."".length] oder Array.from(s).length.

Als Nächstes: Numbers und BigInt

Strings sind nur ein primitiver Typ – Zahlen sind ein anderer, und JavaScripts Zahlensystem hat seine ganz eigenen Eigenheiten: ein einziger Number-Typ für Integer und Fließkommazahlen, plus BigInt für alles, was darüber hinausgeht. Darum geht's auf der nächsten Seite.