Строки в TypeScript: интерполяция, многострочность, includes

Строка в TypeScript это строка JavaScript с типом string. Для интерполяции пишите шаблонный литерал: обратные кавычки с подстановками ${expression}. Одинарные и двойные кавычки создают обычные строки без интерполяции.

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

Все три вида кавычек дают один и тот же тип, string. Первый $ в $${...} это обычный знак доллара; подстановку начинает только ${.

Интерполяция строк

Внутри ${ } можно поставить переменную, арифметику, вызов функции, тернарный оператор или вложенный шаблонный литерал. Значение превращается в строку так же, как это сделал бы String(value) (исключение составляет symbol: его интерполяция даёт ошибку компиляции TS2731, а во время выполнения бросила бы TypeError; пишите 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

Интерполяция объекта печатает [object Object], а это почти никогда не то, что нужно. Выберите нужные поля или используйте JSON.stringify(obj).

Многострочные строки

Шаблонный литерал может занимать несколько строк. Переводы строк сохраняются, как и любые отступы в начале каждой строки, потому что всё между обратными кавычками входит в строку.

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

Если отступы кода просачиваются в строку, соберите её из массива через join("\n") или прижмите строки шаблонного литерала к началу строки.

Проверка вхождения подстроки

includes отвечает на вопрос «содержит ли» значением boolean. startsWith и endsWith проверяют начало и конец. indexOf даёт позицию или -1, если подстроки нет. Все они чувствительны к регистру.

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 также принимает начальную позицию: file.includes("R", 1) ищет только начиная с индекса 1.

Основные методы и их типы

TypeScript знает возвращаемый тип каждого встроенного метода. Следить стоит за теми, что могут вернуть пустое значение: в режиме strict нужно обработать null или undefined, прежде чем использовать результат.

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

Обычная индексация, s[5], имеет тип string, даже если индекс за пределами строки (где во время выполнения значение равно undefined). Опция компилятора noUncheckedIndexedAccess делает этот тип string | undefined.

Строки неизменяемы

Изменить символ на месте нельзя. TypeScript сообщает о присвоении по индексу как об ошибке TS2542, Index signature in type 'String' only permits reading., а в JavaScript в строгом режиме, в который код компилируется, такое присвоение бросило бы TypeError во время выполнения. Каждый метод, который вроде бы меняет строку, возвращает новую.

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

О том, как превращать другие значения в строки или строки в числа, читайте на странице строка в число.

Строковые литеральные типы

string принимает любой текст. Строковый литеральный тип принимает одно точное значение, а их объединение задаёт похожий на 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"));

Литеральные типы проверяются только во время компиляции; во время выполнения label("deleted") всё равно выполнится и напечатает Post is deleted, что и делает здесь вторая строка. Синтаксис шаблонных литералов работает и на уровне типов, как в type EventName = `on${string}`: такой тип принимает любую строку, которая начинается с on.