TypeScriptで文字列を数値に変換（数値を文字列に）

TypeScriptで文字列を数値に変換するには Number(text) を呼びます。結果の型は number で、テキストが正しい数値でなければ NaN になります。"42px" のように後ろに文字が続くテキストには parseInt(text, 10) か parseFloat(text) を使います。

const input: string = "42";

const a = Number(input);       // 42
const b = parseInt(input, 10); // 42 (whole numbers)
const c = parseFloat("3.75");  // 3.75
const d = +input;              // 42 (unary plus, same as Number)

console.log(a + 1, b + 1, c + 1, d + 1); // 43 43 4.75 43

// And back: number to string
const text: string = String(a);
console.log(text, text.length); // 42 2

4つの変換はどれも number 型を返します。TypeScriptはテキストが正しかったかどうかを知りません。不正な文字列でも number が返り、その値が NaN になるだけです。

変換が必要な理由

フォームの入力、URLのパラメーター、環境変数、ファイルの内容は文字列として届きます。TypeScriptは、数値が期待される場所で文字列を使うことを許しません:

// This does not compile: a string is not a number.
const quantity: string = "3";
const total: number = quantity * 10;
console.log(total);

index.ts(3,23): error TS2362: The left-hand side of an arithmetic operation must be of type 'any', 'number', 'bigint' or an enum type.

文字列に対する -、*、/ の計算はエラーです。+ は許されますが連結になるので、"3" + 10 は文字列 "310" になります。だからこそ先に変換が必要です: Number(quantity) * 10。

型アサーションも役に立ちません。quantity as number は拒否され（TS2352）、as unknown as number で無理に通してもコンパイラーを黙らせるだけで、実行時の値は文字列のままです。

Number、parseInt、parseFloat、単項プラスの違い

4つの関数はきれいな入力では同じ結果になり、それ以外ではすべて食い違います。次の表は、Node でそれぞれを実行した実際の出力です:

表の背景にあるルール:

• Number と単項 + はまったく同じです。前後の空白を取り除いたうえで文字列全体を変換し、1e3 や 0x の16進数を理解し、何か残れば NaN を返します。空文字列や空白だけの文字列は 0 になります。
• parseInt と parseFloat は先頭から読み、使えない文字が出たところで止まるので、"42px" や "1,000" は途中までの数値になります。空文字列は NaN です。
• parseInt は小数部を切り捨て、指数表記を理解しません: "1e3" は e で止まります。
• 数値の区切り文字（12_000）はソースコードでは有効ですが、文字列の中では使えません。

入力の検証には、より厳密な Number が向いています。parseInt と parseFloat は、CSSのサイズのように単位や接尾辞が本当に付いているテキストに向いています。

不正な入力の扱い: NaN

NaN の型は number なので、コンパイラーは警告を出しません。結果は自分で Number.isNaN か Number.isFinite でチェックします:

function toNumber(text: string): number | undefined {
    if (text.trim() === "") return undefined; // Number("") would be 0
    const n = Number(text);
    return Number.isFinite(n) ? n : undefined;
}

for (const s of ["12.5", "", "abc", "7 ", "Infinity"]) {
    console.log(JSON.stringify(s), toNumber(s));
}

const age = toNumber("30");
if (age !== undefined) {
    console.log(age + 1); // age is number here
}

戻り値を number | undefined にすると失敗が型の一部になり、呼び出し側は計算の前に必ずそれを処理することになります。Number.isFinite は Infinity も弾きます。Number("Infinity") は平然と Infinity を返すからです。

グローバルの isNaN(x) は避けてください。引数を先に変換するので、JavaScriptでは isNaN("abc") が true になります。TypeScriptの宣言は number しか受け付けないので、文字列を渡すとエラー TS2345 になります。これは、変換済みの値に Number.isNaN を使えというヒントです。

文字列を整数に変換する

parseInt には必ず2番目の引数である基数を渡してください。10進数のテキストなら 10 です。省略もできますが、意図が明確になり、ほかの基数では重要になります。小数の文字列から整数を得るには、変換してから明示的に丸めます。

console.log(parseInt("0042", 10)); // 42
console.log(parseInt("ff", 16));   // 255
console.log(parseInt("1010", 2));  // 10

const price = Number("19.99");
console.log(Math.trunc(price), Math.round(price), Math.floor(price)); // 19 20 19

console.log(Number.isInteger(Number("7")));   // true
console.log(Number.isInteger(Number("7.5"))); // false

console.log(BigInt("9007199254740993")); // 9007199254740993n

parseInt は文字列を受け取るので、parseInt(12.7) はコンパイルエラー（TS2345）になります。これは役に立つエラーです。JavaScriptの parseInt は数値を先にテキストに変換するため、0.0000005 のような値では間違った答え（5）を返すからです。数値には Math.trunc を使います。Number.MAX_SAFE_INTEGER を超える整数は、BigInt(text) なら値全体を解析できます（不正なテキストでは NaN を返す代わりに SyntaxError を投げます）。

数値を文字列に変換する

String(n)、n.toString()、`${n}` のどれでも、数値をいちばん短い文字列の形に変換できます。書式を細かく決めるにはフォーマット用のメソッドを使います:

const n = 1234.5678;

console.log(String(n));            // 1234.5678
console.log(n.toString());         // 1234.5678
console.log(`${n}`);               // 1234.5678
console.log(n.toFixed(2));         // 1234.57
console.log(n.toPrecision(3));     // 1.23e+3
console.log(n.toLocaleString("en-US")); // 1,234.568
console.log((255).toString(16));   // ff
console.log((5).toString().padStart(3, "0")); // 005

const label: string = n.toFixed(1); // every method here returns string
console.log(label);                 // 1234.6

toFixed は入力した10進数ではなく2進数の値を丸めるので、(1.005).toFixed(2) は "1.00" になります。1.005 は1.005よりわずかに小さい値として保持されているからです。金額は整数のセント単位で持つか、Intl.NumberFormat でフォーマットしてください。

String(n) は null や undefined にも使えます（結果は "null" と "undefined"）。一方 n.toString() は、値がないかもしれないため strict のもとではコンパイルエラーになります。

早見表