String w TypeScript: interpolacja, wiele linii i includes

String w TypeScript to string JavaScriptu z typem string. Do interpolacji napisz template literal: backticki z placeholderami ${expression}. Apostrofy i cudzysłowy tworzą zwykłe stringi bez interpolacji.

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}`);

Wszystkie trzy rodzaje cudzysłowów dają ten sam typ, string. Pierwszy $ w $${...} to zwykły znak dolara: placeholder zaczyna dopiero ${.

Interpolacja stringów

Wewnątrz ${ } możesz wstawić zmienną, obliczenie, wywołanie funkcji, operator warunkowy albo zagnieżdżony template literal. Wartość jest zamieniana na string tak samo, jak zrobiłoby to String(value) (wyjątkiem jest symbol: jego interpolacja to błąd kompilacji TS2731, a w czasie wykonania rzuciłaby TypeError, więc napisz 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

Interpolacja obiektu wypisuje [object Object], a to prawie nigdy nie jest to, czego chcesz. Wybierz konkretne pola albo użyj JSON.stringify(obj).

Stringi wielolinijkowe

Template literal może obejmować wiele linii. Znaki nowej linii zostają, podobnie jak wcięcie na początku każdej linii, bo wszystko między backtickami jest częścią stringa.

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);

Gdy wcięcie kodu przeciekałoby do stringa, zbuduj go z tablicy przez join("\n") albo zacznij linie template literal od samego początku linii.

Sprawdzanie, czy string zawiera podciąg

includes odpowiada na pytanie „czy zawiera” wartością boolean. startsWith i endsWith sprawdzają początek i koniec. indexOf podaje pozycję albo -1, gdy podciągu nie ma. Wszystkie rozróżniają wielkość liter.

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 przyjmuje też pozycję startową: file.includes("R", 1) szuka dopiero od indeksu 1.

Najczęstsze metody i ich typy

TypeScript zna typ zwracany każdej wbudowanej metody. Uważaj na te, które mogą nic nie zwrócić, bo w trybie strict musisz obsłużyć null albo undefined, zanim użyjesz wyniku.

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' ] ]

Zwykłe indeksowanie, s[5], ma typ string, nawet gdy indeks wychodzi poza koniec (a w czasie wykonania wartość to wtedy undefined). Opcja kompilatora noUncheckedIndexedAccess zmienia ten typ na string | undefined.

Stringi są niemutowalne

Nie da się zmienić znaku w miejscu. TypeScript zgłasza przypisanie do indeksu jako błąd TS2542, Index signature in type 'String' only permits reading., a w JavaScripcie w trybie strict, do którego kod jest kompilowany, to samo przypisanie rzuciłoby TypeError w czasie wykonania. Każda metoda, która pozornie zmienia string, zwraca nowy.

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

Jak zamieniać inne wartości na stringi albo stringi na liczby, przeczytasz w string na number.

Typy literałów stringowych

string przyjmuje dowolny tekst. Typ literału stringowego przyjmuje jedną konkretną wartość, a unia takich typów tworzy przypominający enum zbiór dozwolonych stringów:

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"));

Typy literałów są sprawdzane tylko w czasie kompilacji: w czasie wykonania label("deleted") i tak by się wykonało i wypisało Post is deleted, co robi tutaj druga linia. Składnia template literal działa też na poziomie typów, jak w type EventName = `on${string}`, co przyjmuje każdy string zaczynający się od on.