Stringhe in TypeScript: interpolazione, multiriga e contains

Una stringa TypeScript è una stringa JavaScript con il tipo string. Per l'interpolazione, scrivi un template literal: backtick con segnaposto ${expression}. Apici singoli e doppi creano stringhe semplici senza interpolazione.

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

Tutti e tre gli stili di virgolette producono lo stesso tipo, string. Il primo $ in $${...} è un simbolo del dollaro letterale; solo ${ apre un segnaposto.

Interpolazione di stringhe

Dentro ${ } puoi mettere una variabile, un calcolo, una chiamata di funzione, un ternario o un template literal annidato. Il valore viene convertito in stringa come farebbe String(value) (l'eccezione è symbol: interpolarne uno è l'errore di compilazione TS2731, e in esecuzione lancerebbe un TypeError; scrivi 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

Interpolare un oggetto stampa [object Object], che non è quasi mai ciò che vuoi. Scegli i campi, oppure usa JSON.stringify(obj).

Stringhe su più righe

Un template literal può occupare più righe. I ritorni a capo vengono conservati, e anche l'indentazione all'inizio di ogni riga, perché tutto ciò che sta tra i backtick fa parte della 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);

Quando l'indentazione del codice finirebbe dentro la stringa, costruiscila con un array e join("\n"), oppure allinea le righe del template literal all'inizio della riga.

Verificare se una stringa contiene una sottostringa

includes risponde a "la contiene?" con un boolean. startsWith ed endsWith controllano gli estremi. indexOf dà la posizione, o -1 quando la sottostringa manca. Tutti distinguono maiuscole e minuscole.

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 accetta anche una posizione di partenza: file.includes("R", 1) cerca solo a partire dall'indice 1.

Metodi comuni e i loro tipi

TypeScript conosce il tipo restituito da ogni metodo built-in. Quelli da tenere d'occhio sono quelli che possono tornare vuoti, perché con strict devi gestire null o undefined prima di usare il risultato.

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

L'indicizzazione semplice, s[5], ha tipo string anche quando l'indice va oltre la fine (dove in esecuzione il valore è undefined). L'opzione del compilatore noUncheckedIndexedAccess la rende invece string | undefined.

Le stringhe sono immutabili

Non puoi cambiare un carattere sul posto. TypeScript segnala l'assegnazione a un indice come errore TS2542, Index signature in type 'String' only permits reading., e nel JavaScript in modalità strict in cui compila, la stessa assegnazione lancerebbe un TypeError in esecuzione. Ogni metodo che sembra modificare una stringa ne restituisce una nuova.

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

Per trasformare altri valori in stringhe, o stringhe in numeri, vedi da stringa a numero.

Tipi letterali stringa

string accetta qualsiasi testo. Un tipo letterale stringa accetta un solo valore esatto, e una union di questi crea un insieme di stringhe ammesse simile a un enum:

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

I tipi letterali vengono controllati solo in compilazione; in esecuzione label("deleted") girerebbe comunque e stamperebbe Post is deleted, che è proprio ciò che fa qui la seconda riga. La sintassi dei template literal funziona anche a livello di tipi, come in type EventName = `on${string}`, che accetta qualsiasi stringa che inizia con on.