Strings & Template Literals — JavaScript

Strings sind in JavaScript unveränderliche Zeichenfolgen in UTF-16. Du schreibst sie mit einfachen oder doppelten Anführungszeichen oder mit Backticks. Backticks erzeugen Template Literals. Damit kannst du Werte direkt in den Text einsetzen und über mehrere Zeilen schreiben. Sobald Werte in den String sollen, sind sie heute die erste Wahl.

Drei Schreibweisen

const a = 'einfach';
const b = "doppelt";
const c = `Backtick`;
const pfad = 'C:\\temp\\datei.txt'; // Backslash escapen

' und " funktionieren genau gleich. Nutze im ganzen Projekt eine Variante und lass sie von Prettier oder ESLint durchsetzen.

Interpolation und Mehrzeiligkeit

In ${…} darf jeder beliebige Ausdruck stehen. Sein Ergebnis wird in einen String umgewandelt.

const user = { name: 'Lea', punkte: 42 };
const text = `${user.name} hat ${user.punkte * 2} Punkte.`;

const liste = `
  <ul>
    ${['A', 'B'].map((x) => `<li>${x}</li>`).join('')}
  </ul>`;

Fallstricke: Einrückungen und Zeilenumbrüche stehen genau so im String, wie du sie tippst. Objekte werden zu [object Object], dafür brauchst du JSON.stringify(). Setz Nutzereingaben nie ungeprüft in HTML ein, sonst droht XSS.

Tagged Templates

Steht eine Funktion direkt vor dem Backtick, bekommt sie die festen Textteile und die eingesetzten Werte getrennt übergeben. Das ist nützlich für Escaping, Übersetzungen (i18n) oder SQL-Builder.

const safe = (strings, ...values) =>
  strings.reduce((out, str, i) => {
    const v = String(values[i - 1] ?? '')
      .replace(/[<>&]/g, (ch) => `&#${ch.charCodeAt(0)};`);
    return out + v + str;
  });

const eingabe = '<img onerror=alert(1)>';
safe`Hallo ${eingabe}!`; // 'Hallo &#60;img onerror=alert(1)&#62;!'

String.raw`C:\temp\neu`; // Backslashes bleiben erhalten

Wichtige Methoden

const s = '  JavaScript  ';
s.trim();                     // 'JavaScript'
s.includes('Script');         // true
'abc'.at(-1);                 // 'c'
'7'.padStart(3, '0');         // '007'
'a-b-c'.replaceAll('-', '/'); // 'a/b/c'
'a,b'.split(',');             // ['a', 'b']

Jede dieser Methoden gibt einen neuen String zurück, das Original bleibt unverändert. length zählt UTF-16-Einheiten, deshalb zählen viele Emojis doppelt. Die tatsächlich sichtbaren Zeichen zählst du mit [...str].length.

← Vorheriges Kapitel Arrays & Iterables Nächstes Kapitel → Objekte & Prototypen