TypeScript 字符串：插值、多行字符串与包含判断

TypeScript 字符串就是类型为 string 的 JavaScript 字符串。要做插值，就写模板字面量：用反引号包裹，并用 ${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 接受任意文本。字符串字面量类型只接受一个确切的值，多个字面量组成的联合类型就构成了一组类似枚举的允许值：

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 开头的字符串。