String en TypeScript : interpolation, multiligne et contains

Une chaîne TypeScript est une chaîne JavaScript de type string. Pour l'interpolation, écrivez un template literal : des backticks avec des emplacements ${expression}. Les guillemets simples et doubles créent des chaînes simples, sans 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}`);

Les trois styles de guillemets produisent le même type, string. Le premier $ de $${...} est un signe dollar littéral ; seul ${ ouvre un emplacement.

L'interpolation de chaînes

Dans ${ }, vous pouvez placer une variable, un calcul, un appel de fonction, un ternaire ou un template literal imbriqué. La valeur est convertie en chaîne comme le ferait String(value) (le symbol fait exception : en interpoler un provoque l'erreur de compilation TS2731, et lèverait une TypeError à l'exécution ; écrivez 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

Interpoler un objet affiche [object Object], ce qui n'est presque jamais ce que vous voulez. Choisissez les champs, ou utilisez JSON.stringify(obj).

Les chaînes multilignes

Un template literal peut s'étendre sur plusieurs lignes. Les retours à la ligne sont conservés, tout comme l'indentation au début de chaque ligne, car tout ce qui se trouve entre les backticks fait partie de la chaîne.

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

Quand l'indentation de votre code risque de se retrouver dans la chaîne, construisez-la avec un tableau et join("\n"), ou collez les lignes du template literal au début de la ligne.

Vérifier si une chaîne contient une sous-chaîne

includes répond à « est-ce qu'elle contient » par un boolean. startsWith et endsWith vérifient les extrémités. indexOf donne la position, ou -1 quand la sous-chaîne est absente. Toutes ces méthodes sont sensibles à la casse.

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 accepte aussi une position de départ : file.includes("R", 1) ne cherche qu'à partir de l'indice 1.

Les méthodes courantes et leurs types

TypeScript connaît le type de retour de chaque méthode intégrée. Celles qui peuvent revenir vides sont à surveiller, car avec strict vous devez traiter null ou undefined avant d'utiliser le résultat.

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'accès simple par indice, s[5], est de type string même quand l'indice dépasse la fin (où la valeur vaut undefined à l'exécution). L'option de compilation noUncheckedIndexedAccess le transforme en string | undefined.

Les chaînes sont immuables

Vous ne pouvez pas modifier un caractère sur place. TypeScript signale l'assignation à un indice par l'erreur TS2542, Index signature in type 'String' only permits reading., et dans le JavaScript en mode strict produit par la compilation, la même assignation lèverait une TypeError à l'exécution. Chaque méthode qui semble modifier une chaîne en renvoie une nouvelle.

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

Pour convertir d'autres valeurs en chaînes, ou des chaînes en nombres, voir convertir une chaîne en nombre.

Les types littéraux de chaîne

string accepte n'importe quel texte. Un type littéral de chaîne accepte une seule valeur exacte, et une union de ces types forme un ensemble de chaînes autorisées, à la manière d'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"));

Les types littéraux ne sont vérifiés qu'à la compilation ; à l'exécution, label("deleted") s'exécuterait quand même et afficherait Post is deleted, ce que fait ici la deuxième ligne. La syntaxe des template literals fonctionne aussi au niveau des types, comme dans type EventName = `on${string}`, qui accepte toute chaîne commençant par on.