String en TypeScript: interpolación, multilínea e includes

Un string de TypeScript es un string de JavaScript con el tipo string. Para interpolar, escribe un template literal: backticks con marcadores ${expression}. Las comillas simples y dobles crean strings normales sin interpolación.

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

Los tres estilos de comillas producen el mismo tipo, string. El primer $ de $${...} es un signo de dólar literal; solo ${ abre un marcador.

Interpolación de strings

Dentro de ${ } puedes poner una variable, una operación aritmética, una llamada a función, un ternario o un template literal anidado. El valor se convierte a string igual que lo haría String(value) (la excepción es symbol: interpolar uno es el error de compilación TS2731, y en tiempo de ejecución lanzaría un TypeError; escribe 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

Interpolar un objeto imprime [object Object], que casi nunca es lo que quieres. Elige los campos o usa JSON.stringify(obj).

Strings multilínea

Un template literal puede ocupar varias líneas. Se conservan los saltos de línea y también la sangría al inicio de cada línea, porque todo lo que hay entre los backticks forma parte del 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);

Cuando la sangría de tu código se colaría en el string, constrúyelo con un array y join("\n"), o pega las líneas del template literal al inicio de la línea.

Comprobar si un string contiene un substring

includes responde «¿lo contiene?» con un boolean. startsWith y endsWith comprueban los extremos. indexOf da la posición, o -1 cuando el substring no está. Todos distinguen mayúsculas y minúsculas.

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 también acepta una posición inicial: file.includes("R", 1) solo busca a partir del índice 1.

Métodos habituales y sus tipos

TypeScript conoce el tipo de retorno de cada método integrado. Los que pueden volver vacíos son los que hay que vigilar, porque con strict debes manejar null o undefined antes de usar el resultado.

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

La indexación simple, s[5], tiene tipo string incluso cuando el índice está fuera del final (donde el valor en tiempo de ejecución es undefined). La opción del compilador noUncheckedIndexedAccess hace que sea string | undefined.

Los strings son inmutables

No puedes cambiar un carácter en su sitio. TypeScript informa de la asignación a un índice como el error TS2542, Index signature in type 'String' only permits reading., y en el JavaScript en modo estricto al que compila, esa misma asignación lanzaría un TypeError en tiempo de ejecución. Todos los métodos que parecen modificar un string devuelven uno nuevo.

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

Para convertir otros valores en strings, o strings en números, consulta string a número.

Tipos literales de string

string acepta cualquier texto. Un tipo literal de string acepta un único valor exacto, y una unión de ellos forma un conjunto de strings permitidos parecido 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"));

Los tipos literales solo se comprueban en tiempo de compilación; en tiempo de ejecución label("deleted") se ejecutaría igualmente e imprimiría Post is deleted, que es lo que hace aquí la segunda línea. La sintaxis de template literal también funciona a nivel de tipos, como en type EventName = `on${string}`, que acepta cualquier string que empiece por on.