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

3種類の引用符はどれも同じ 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] のような普通のインデックスアクセスは、インデックスが末尾を超えていても（実行時の値は undefined）型は string です。コンパイラーオプション noUncheckedIndexedAccess を有効にすると string | undefined になります。

文字列はイミュータブル

文字をその場で変更することはできません。TypeScriptはインデックスへの代入をエラー TS2542 Index signature in type 'String' only permits reading. として報告し、コンパイル後の strict モードの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 と出力され、ここでの2行目はまさにそうなります。テンプレートリテラルの構文は型のレベルでも使えます。type EventName = `on${string}` は on で始まる任意の文字列を受け付けます。