数値変換を一言でいうと
JavaScript の「数値変換」は、
文字列や真偽値などの値を、number 型として計算に使える形にすること です。
特に Web では、ユーザー入力・フォーム・URL パラメータなど、
ほとんどが 最初は文字列 として届きます。
そのままでは足し算・比較がうまくいかないので、
「いつ」「どの方法で」数値に変換するかがとても大事になります。
ここが重要です。
数値変換にはいろいろな方法がありますが、
目的に応じて正しく使い分ける 必要があります。
ざっくり言うと、
- きれいな数値か厳密にチェック →
Number - 先頭の数字だけ読み取りたい →
parseInt/parseFloat - 手っ取り早く数値化 → 単項
+（ユニary プラス）
という棲み分けを意識すると整理しやすいです。
Number 関数による変換（厳密に「全部」数値であるか確認）
Number(value) の基本
Number(value) は、
value 全体を「数値」として解釈できるか を判定しつつ、
成功すれば number に変換し、
ダメなら NaN を返します。
console.log(Number("123")); // 123
console.log(Number("3.14")); // 3.14
console.log(Number(" 10 ")); // 10（前後の空白はOK）
console.log(Number("123abc")); // NaN（全体として数値じゃない）
console.log(Number("abc")); // NaN
ポイントは「文字列全体」が数値として読める必要がある ことです。
途中に文字が混ざっていたら即 NaN です。
文字列以外にも使える
Number は、文字列以外にも使えます。
console.log(Number(true)); // 1
console.log(Number(false)); // 0
console.log(Number(null)); // 0
console.log(Number(undefined)); // NaN
console.log(Number("")); // 0（空文字 → 0）
このあたりは JavaScript の「型変換ルール」が関わっていますが、
初心者のうちは「ふーんそうなるのか」くらいで十分です。
ここが重要です。Number は「全体が数値であるべき」という前提で変換する関数です。
ユーザー入力や API のレスポンスなど、
「文字列がちゃんと数字になっているか厳密にチェックしたい」ときの第一候補 になります。
parseInt / parseFloat による変換（先頭の数字だけ抜きたいとき）
「先頭から読める範囲だけ」数値にする
parseInt / parseFloat は、
文字列の「先頭から読めるところまで」を数値として解釈 します。
console.log(parseInt("123px", 10)); // 123
console.log(parseFloat("3.14kg")); // 3.14
console.log(parseInt("10.5", 10)); // 10（小数点で止まる）
console.log(parseFloat("10.5")); // 10.5
先頭が数字なら、とにかく「読めるところまで」読んでくれます。
先頭が数字でない場合は NaN です。
console.log(parseInt("abc123", 10)); // NaN
console.log(parseFloat("abc3.14")); // NaN
Number との違い
console.log(Number("123px")); // NaN
console.log(parseInt("123px", 10)); // 123
Number は「全体がきれいな数値か」を見るのに対し、parseInt / parseFloat は「先頭だけ数値ならとりあえず読む」というイメージです。
CSS の "100px" など、「単位付きの数値」を扱うときにはparseInt("100px", 10) のように使うのが定番です。
ここが重要です。
文字列の末尾に単位や余計な文字が付きうる場合は parse～ 系、
そうでない場合は Number で厳密に、という使い分け を意識してください。
特に「年齢」「価格」のように、
変な文字があったらエラー扱いにしたい入力には Number のほうが向いています。
単項 +（ユニary プラス）による手軽な数値変換
+value で数値化できる
JavaScript には、
単項 +（ひとつだけ付けるプラス）を使った数値変換 があります。
console.log(+"123"); // 123
console.log(+"3.14"); // 3.14
console.log(+" 10 "); // 10
console.log(+"abc"); // NaN
console.log(+true); // 1
console.log(+false); // 0
console.log(+null); // 0
console.log(+undefined); // NaN
実はこれは Number(value) とほぼ同じ変換ルールです。
実務でよくある使い方
例えば、フォームの入力値（文字列）をすぐ数値化したいとき。
const input = "20";
const age1 = Number(input);
const age2 = +input; // 短く書いたバージョン
console.log(age1, age2); // 20 20
「この値は絶対に数値の文字列である」と分かっている場面では、+ で変換する書き方がよく使われます。
ここが重要です。
単項 + は「Number を短く書いた記号」だと考えてOKです。
ただし、パッと見で分かりづらいこともあるので、初学者のうちは Number(...) を使うほうが読みやすいコードになります。
「慣れてきたら + も使ってみる」くらいの順番で十分です。
暗黙の数値変換（自動で変わってしまうケース）
算術演算子が勝手に変換する
- * / % などの算術演算子は、
相手が文字列でも「数値として解釈できるなら数値に変換してから計算」 しようとします。
console.log("10" - 1); // 9
console.log("10" * 2); // 20
console.log("10" / 2); // 5
console.log("10" - "3"); // 7
数字として解釈できないと NaN になります。
console.log("abc" - 1); // NaN
ただし + は「足し算」と「文字列結合」の両方を持つ
console.log(1 + 2); // 3
console.log("1" + 2); // "12"（文字列結合）
console.log(1 + "2"); // "12"
console.log("1" + "2"); // "12"
どこか 1 つでも文字列が混ざると、+ は数値の足し算ではなく 文字列結合 として動きます。
ここが重要です。
暗黙の変換は便利な半面、
「自分がいつ数値として扱っていて、いつ文字列として扱っているか」
がぼやけてしまう原因にもなります。
バグを減らすためには、
「大事な計算の前では明示的に Number や parse～ で数値にする」
というスタンスを持っておくのが安心です。
数値変換と NaN（変換失敗のサイン）
変換に失敗すると NaN になる
Number / 単項 + / parseInt / parseFloat などは、
変換できない場合に NaN（Not a Number） を返します。
console.log(Number("abc")); // NaN
console.log(+"abc"); // NaN
console.log(parseInt("abc", 10)); // NaN
console.log(parseFloat("abc")); // NaN
NaN は「数値型だけど、意味のある数ではない」特別な値です。
NaN かどうかのチェック
NaN は自分自身とすら等しくないので、value === NaN では絶対に判定できません。
console.log(NaN === NaN); // false
NaN かどうかを調べるには、Number.isNaN(value) を使います。
const n = Number("abc");
if (Number.isNaN(n)) {
console.log("数値に変換できませんでした");
}
ここが重要です。
数値変換を書いたら、セットで「変換に失敗した場合はどうするか」も考える のが大事です。
エラーにするのか、デフォルト値（0 など）を使うのか、入力をやり直してもらうのか。
NaN は「変換失敗のサイン」なので、無視せずきちんと扱うようにしましょう。
具体的なパターン別おすすめ変換
ユーザー入力（テキスト）を「ちゃんとした数値」として扱いたい
たとえば年齢入力フォーム：
const raw = " 20 "; // フォームから来る文字列
const s = raw.trim(); // 前後の空白を削る
const n = Number(s); // 数値に変換
if (s === "" || Number.isNaN(n)) {
console.log("数値として不正な入力です");
} else {
console.log("年齢:", n);
}
ここでは、
trimで空白だけの入力を弾くNumberで全体が数値かを確認Number.isNaNで変換失敗を検出
という流れにしています。
CSS の「100px」のような文字列から数字だけ欲しい
const widthStr = "100px";
const width = parseInt(widthStr, 10);
if (Number.isNaN(width)) {
console.log("幅が数値として解釈できません");
} else {
console.log("幅:", width);
}
URL パラメータや JSON の数値文字列を手早く数値化したい
const pageStr = "3"; // たとえば ?page=3
const page = +pageStr; // あるいは Number(pageStr)
console.log(page + 1); // 4
この場合、
「絶対に数字形式で来る」前提なら + でも問題ありませんが、
安全を重視するなら Number と Number.isNaN でチェックするほうが堅牢です。
ここが重要です。
毎回「どんなデータが入ってくる可能性があるか」を想像して、
「厳しめにチェックしたい」か「多少ゆるくてもいい」かを決める。
その上で Number / parse～ / + を選び分けるのが、“数値変換の設計” です。
初心者として数値変換で本当に押さえてほしいこと
Number(value) / +value は、「文字列全体が数値であるか」を厳密に見て変換する。
途中に余計な文字があれば NaN。
parseInt / parseFloat は、「先頭から読めるところまで」を数値として読む。"123px" のような「数字＋単位」から数字だけ欲しいときに便利。
暗黙の変換（"10" - 1 など）は便利だが、+ だけは「足し算」と「文字列結合」の両方の意味を持つので特に注意する。
変換に失敗すると NaN。
NaN かどうかのチェックには Number.isNaN を使う。
ここが重要です。
数値変換は「とりあえず動けばいい」ではなく、
「どこで変換するか」「失敗したらどうするか」までセットで設計するものです。
フォーム入力や API のレスポンスを扱うときに、
毎回“変換ポイント”を自覚してコードを書くようにすると、
後から「なんでこれ文字列なの？」「なんで NaN？」と迷子になる回数が劇的に減ります。
もし練習してみたくなったら、次のコードでNumber / parseInt / parseFloat / + の違いを確かめてみてください。
const samples = [
"123",
" 123 ",
"123px",
"3.14",
"3.14kg",
"",
" ",
"abc",
];
for (const s of samples) {
console.log(
`"${s}" ->`,
"Number:", Number(s),
"| +:", +s,
"| parseInt:", parseInt(s, 10),
"| parseFloat:", parseFloat(s)
);
}
それぞれの結果を見比べると、
「どれが厳密で、どれがゆるいのか」がかなり鮮明に見えてくるはずです。
