文字列を数値に変換
このレッスンで分かること
Number(値)は値全体を数値として解釈、parseInt(str, 10)は先頭から整数を切り出す- 変換失敗は
NaN、NaN === NaNはfalse、判定はNumber.isNaN(値)- 最小例は
function toNumber(s) { const n = Number(s); return Number.isNaN(n) ? 0 : n; }
文字列を数値に変換 とは
Number / parseInt / parseFloat を使い分けて文字列を数値に変換する。本レッスンでは、文字列を数値に変換 の基本から実際の使いどころまでを整理し、現場で迷わず使える形に落とし込みます。
文字列を数値に変換
フォームの入力やクエリパラメータから受け取る値は、ほとんどの場合 文字列 です。"42" のように見た目は数字でも、JavaScript からすると単なる文字の並びでしかありません。これを足し算したり比較したりするには、数値型に変換 する必要があります。本レッスンでは代表的な 3 つの方法、Number()、parseInt()、parseFloat() の違いを押さえます。
ポイント
"42" + 1は43ではなく"421"です。文字列のままだと+は連結になります。
Number 関数
Number(value) は値を まるごと数値として解釈 します。たとえば Number("42") は 42、Number("3.14") は 3.14 を返します。文字列の末尾に余計な文字が混ざっていると NaN になります。Number("42px") は NaN です。完全に数字だけの文字列を変換したいときに最適です。
JavaScript
console.log(Number("42")); // 42
console.log(Number("3.14")); // 3.14
console.log(Number(" 10 ")); // 10 (前後の空白は無視)
console.log(Number("42px")); // NaN
console.log(Number("")); // 0 (空文字は 0)注意
Number("")が0になるのは要注意。空入力を 0 と誤認したくない場合は別途チェックします。
parseInt と parseFloat
parseInt(str, 10) は 整数として読み取れるところまで を切り出します。"42px" を渡すと 42 を返してくれるのが特徴です。第 2 引数の 10 は基数 (10 進数で読む) という意味で、付け忘れると古いブラウザで 8 進数や 16 進数として解釈される事故が起きるため必ず付ける癖を付けましょう。parseFloat(str) は小数点を含めて読み取り、"3.14abc" から 3.14 を取り出せます。
JavaScript
console.log(parseInt("42px", 10)); // 42
console.log(parseInt(" 10 ", 10)); // 10
console.log(parseFloat("3.14abc")); // 3.14
console.log(parseInt("abc", 10)); // NaN3 つの違いを比較
用途で使い分けるとコードがクリアになります。
| 関数 | 入力例 | 結果 | 向いている場面 |
|---|---|---|---|
Number("42") | 完全に数字だけ | 42 | フォームの数値項目 |
Number("42px") | 末尾に文字 | NaN | 厳密な数字チェック |
Number("") | 空文字 | 0 | 注意、0 扱いになる |
parseInt("42px", 10) | 先頭が数字 | 42 | "100px" → 100 |
parseFloat("3.14abc") | 小数 + 文字 | 3.14 | サイズ文字列の小数 |
parseInt("abc", 10) | 数字なし | NaN | — |
フローで整理してみます。
ヒント 大体の場面で
Number()で十分です。先頭から数字を切り出したいときだけparseIntを選びます。
NaN の取り扱い
変換に失敗すると NaN (Not a Number) が返ります。困ったことに NaN === NaN は false です。判定したいときは Number.isNaN(value) を使います。古い isNaN(value) は型変換が走るので、現代では Number.isNaN が推奨です。
JavaScript
const n = Number("abc");
console.log(n); // NaN
console.log(n === NaN); // false 落とし穴
console.log(Number.isNaN(n)); // trueよくある間違い
1 つ目は parseInt の基数を省略することです。parseInt("08") が古い処理系では 0 を返す事故があり、必ず parseInt(str, 10) と書く習慣にしましょう。2 つ目は +"42" のような単項プラスでの変換。動くものの可読性が低いのでチームコードでは Number("42") のほうが親切です。3 つ目は NaN を === で比較しようとして失敗するパターンです。Number.isNaN(value) を使えば確実に判定できます。
注意 ユーザー入力を扱うときは「変換失敗ならどうするか」を必ず設計します。
Before / After で比較
初学者は文字列のまま計算してしまい、結果が文字列の連結になる事故をよく起こします。Before / After で見ておきましょう。
JavaScript
// Before 文字列のまま足し算
const a = "10";
const b = "20";
console.log(a + b); // "1020" 連結になる
// After 数値に変換してから足し算
const a2 = Number("10");
const b2 = Number("20");
console.log(a2 + b2); // 30フォーム経由のデータは特に文字列が紛れ込みやすいので、関数の入口で Number() を通すと安全です。
ここまでの要点
Number() は全体変換、parseInt(str, 10) は先頭切り出し、parseFloat は小数 OK。失敗は NaN、判定は Number.isNaN。parseInt の第 2 引数は必ず 10。
やってみよう
文字列を 1 つ受け取り、数値に変換 した値を返す関数 toNumber を作ってください。手順は次のとおりです。
function toNumber(s) { ... }で関数を定義するNumber(s)で変換した結果を変数に入れるNumber.isNaN(結果)のときは0を返す- それ以外は変換結果をそのまま返す
- 空文字、
"42"、"abc"の各ケースが pass するか確認
空文字や "42" のような典型ケース、変換不能な "abc" のテストケースが用意されています。
よくある質問
Q. ブラウザと Node.js で動作は変わりますか？
A. JavaScript の構文・組み込み機能（配列・文字列・Promise 等）はどちらでも同じです。違いは DOM API（ブラウザ専用）と fs などのファイル系（Node 専用）など、実行環境固有の機能です。コアロジックは両方で動くため、テストもしやすくなります。
Q. ES6 以降の新機能は使っても大丈夫ですか？
A. 現代のブラウザ・Node.js は ES2020 以降の機能をほぼサポートしています。古い IE 等を対象にする必要が無ければ、let/const、アロー関数、分割代入、async/await を積極的に使ってください。トランスパイル（Babel/Vite）が必要なケースは年々減っています。
Q. TypeScript に進む価値はありますか？
A. 型情報があるとリファクタやエディタ補完が劇的に効くため、規模が大きくなるなら TypeScript への移行を強くおすすめします。最初は any を許容しつつ徐々に型を付ければ、JS の知識をそのまま活かせます。
次のレッスン
次は 数値を文字列に変換 で、Number / parseInt / parseFloat を使い分けて文字列を数値に変換する を学びます。
事前確認 — 進む前に次の 3 つができることを確認しましょう。
- 文字列→数値 の要点を自分の言葉で説明できる
- このレッスンの最小コード (または操作手順) を見ずに書ける
- 練習問題やクイズで間違えた箇所を読み直して理解した
理解度チェック (30 秒)
Q. 文字列→数値 とは何か、1 文で説明してください。
A. 本文の「このレッスンで分かること」または冒頭の説明文を見直し、自分の言葉で要約できれば OK。詰まったら本レッスンの最初の H2 セクションを読み返してみましょう。
関連レッスン
要件
- Number 関数を使って変換する
- Number.isNaN で変換失敗をチェックする
- 失敗時は 0 を返す
入出力例
test-cases.txt
toNumber("42") → 42
toNumber("3.14") → 3.14
toNumber(" 10 ") → 10
toNumber("") → 0
toNumber("abc") → 0