TypeScript String: Interpolation, mehrzeilig und contains

Ein TypeScript-String ist ein JavaScript-String mit dem Typ string. Für Interpolation schreibst du ein Template-Literal: Backticks mit ${expression}-Platzhaltern. Einfache und doppelte Anführungszeichen erzeugen einfache Strings ohne Interpolation.

const author: string = "Ada";
const year = 1843;

// String interpolation with a template literal
const intro = `${author} published her notes in ${year}.`;
console.log(intro);

// Any expression works inside ${ }
const price = 19.5;
const qty = 3;
console.log(`Total: $${(price * qty).toFixed(2)}`); // Total: $58.50
console.log(`${qty > 1 ? "items" : "item"} in cart: ${qty}`);

Alle drei Schreibweisen ergeben denselben Typ, string. Das erste $ in $${...} ist ein wörtliches Dollarzeichen; nur ${ beginnt einen Platzhalter.

String-Interpolation

In ${ } kannst du eine Variable, eine Rechnung, einen Funktionsaufruf, einen ternären Ausdruck oder ein verschachteltes Template-Literal setzen. Der Wert wird so in einen String umgewandelt, wie String(value) es täte (ein symbol ist die Ausnahme: Es zu interpolieren ist der Compilerfehler TS2731, und zur Laufzeit würde ein TypeError geworfen; schreibe String(sym)).

type User = { name: string; roles: string[]; lastLogin: Date | null };

const user: User = {
    name: "grace",
    roles: ["admin", "editor"],
    lastLogin: new Date("2024-03-15T10:30:00Z"),
};

const capitalize = (s: string) => s[0].toUpperCase() + s.slice(1);

console.log(`User: ${capitalize(user.name)}`);
console.log(`Roles: ${user.roles.join(", ")}`);
console.log(`Last login: ${user.lastLogin?.toISOString() ?? "never"}`);
console.log(`Raw array: ${user.roles}`); // arrays join with commas

Ein Objekt zu interpolieren ergibt [object Object], was fast nie gewollt ist. Wähle die Felder aus oder nutze JSON.stringify(obj).

Mehrzeilige Strings

Ein Template-Literal kann über mehrere Zeilen gehen. Die Zeilenumbrüche bleiben erhalten, ebenso jede Einrückung am Zeilenanfang, denn alles zwischen den Backticks gehört zum String.

const poem = `Roses are red,
Violets are blue,
Types are erased,
And so are you.`;
console.log(poem);

function card(title: string, body: string): string {
    return `
    [${title}]
    ${body}`; // the leading spaces and first newline are in the string
}
console.log(JSON.stringify(card("Note", "Hi")));

// Alternatives without the indentation problem:
const lines = ["first line", "second line"].join("\n");
console.log(lines);

Wenn die Einrückung deines Codes in den String gelangen würde, baue ihn mit einem Array und join("\n") oder lass die Zeilen des Template-Literals ganz links beginnen.

Prüfen, ob ein String einen Teilstring enthält

includes beantwortet die Frage „enthält er das?“ mit einem boolean. startsWith und endsWith prüfen Anfang und Ende. indexOf liefert die Position oder -1, wenn der Teilstring fehlt. Alle unterscheiden Groß und Kleinschreibung.

const file = "Report-2024.PDF";

console.log(file.includes("2024"));    // true
console.log(file.includes("pdf"));     // false: case-sensitive
console.log(file.toLowerCase().endsWith(".pdf")); // true
console.log(file.startsWith("Report")); // true
console.log(file.indexOf("-"));        // 6
console.log(file.indexOf("x"));        // -1

// A regular expression for patterns, with the i flag for case-insensitive
console.log(/report-\d{4}/i.test(file)); // true

includes akzeptiert auch eine Startposition: file.includes("R", 1) sucht erst ab Index 1.

Gängige Methoden und ihre Typen

TypeScript kennt den Rückgabetyp jeder eingebauten Methode. Aufpassen musst du bei denen, die leer zurückkommen können, denn unter strict musst du null oder undefined behandeln, bevor du das Ergebnis verwendest.

const log = "error=404 path=/users";

const match = log.match(/error=(\d+)/);
// match is RegExpMatchArray | null: check before indexing
if (match) {
    console.log(Number(match[1])); // 404
}

const last = "abc".at(-1); // string | undefined
console.log(last?.toUpperCase()); // C

const parts = log.split(" ").map((p) => p.split("="));
console.log(parts); // [ [ 'error', '404' ], [ 'path', '/users' ] ]

Einfacher Indexzugriff, s[5], hat den Typ string, auch wenn der Index hinter dem Ende liegt (wo der Wert zur Laufzeit undefined ist). Die Compileroption noUncheckedIndexedAccess macht daraus stattdessen string | undefined.

Strings sind unveränderlich

Ein Zeichen lässt sich nicht an Ort und Stelle ändern. TypeScript meldet eine Zuweisung an einen Index als Fehler TS2542, Index signature in type 'String' only permits reading., und im JavaScript im Strict Mode, in das kompiliert wird, würde dieselbe Zuweisung zur Laufzeit einen TypeError werfen. Jede Methode, die einen String scheinbar ändert, gibt einen neuen zurück.

let word = "hello";

// @ts-expect-error: Index signature in type 'String' only permits reading.
const change = () => { word[0] = "H"; };

word = "H" + word.slice(1); // build a new string instead
console.log(word);          // Hello

Wie du andere Werte in Strings oder Strings in Zahlen umwandelst, steht unter String in Zahl umwandeln.

String-Literaltypen

string akzeptiert jeden Text. Ein String-Literaltyp akzeptiert genau einen Wert, und eine Union davon ergibt eine enum-ähnliche Menge erlaubter Strings:

type Status = "draft" | "published" | "archived";

function label(status: Status): string {
    return `Post is ${status}`;
}

console.log(label("draft"));
// @ts-expect-error: Argument of type '"deleted"' is not assignable to parameter of type 'Status'.
console.log(label("deleted"));

Die Literaltypen werden nur beim Kompilieren geprüft; zur Laufzeit würde label("deleted") trotzdem laufen und Post is deleted ausgeben, und genau das macht die zweite Zeile hier. Die Template-Literal-Syntax funktioniert auch auf Typebene, etwa type EventName = `on${string}`, das jeden String akzeptiert, der mit on beginnt.