JavaScript 初心者が 「数値変換」 に出会うと、必ず迷うのが
「
Number()とparseInt()とparseFloat()と+の違いって何？」
ですよね。
それぞれ似たように「文字列などを数値に変える」ことができますが、ルールや結果が全然違います。
ざっくり一言まとめ（イメージ）
| 変換方法 | 何をする？ | 向いてる用途 | 主な特徴 |
|---|---|---|---|
Number() | 全体を数値に変換 | 厳密な変換が必要なとき | 「全体が数値でないと NaN」になる厳しめ |
parseInt() | 整数として読む | 整数だけ欲しいとき | 途中まで読めたらOK、後半は無視される |
parseFloat() | 小数として読む | 小数も扱いたいとき | parseInt()よりゆるい、小数点OK |
+（単項プラス） | 暗黙的に数値化 | 簡単な変換・省略形 | Number()とほぼ同じ結果、短いけど可読性低め |
1. Number() の特徴（厳格）
Number(value) は「全体がちゃんと数値として読めるなら変換する」。
そうでないと NaN（Not a Number）になります。
console.log(Number('123')); // 123
console.log(Number('123.45')); // 123.45
console.log(Number(' 50 ')); // 50 ← 前後の空白はOK
console.log(Number('10px')); // NaN ← 全体が数値でないとNG
console.log(Number('abc')); // NaN
console.log(Number(true)); // 1
console.log(Number(false)); // 0
console.log(Number(null)); // 0
console.log(Number(undefined)); // NaN
console.log(Number(['123'])); // 123 （配列1要素ならOK）
console.log(Number(['1','2'])); // NaN （複数要素はNG）
✅ ポイント
- 「全部が数値ならOK」
- 「少しでも文字が混じるとNG」
- 正確で信頼できるが、やや厳しい。
2. parseInt() の特徴（整数として先頭から読む）
parseInt(value) は「文字列の先頭から数字を読めるだけ読む」。
途中で数字以外が来たら、そこで読むのをやめます。
先頭に数字がなければ NaN。
console.log(parseInt('123px')); // 123 ← 数字の部分だけ読む
console.log(parseInt('50.8')); // 50 ← 小数点以降は無視
console.log(parseInt(' 42abc')); // 42 ← 空白OK、文字は無視
console.log(parseInt('abc123')); // NaN ← 数字が最初にない
console.log(parseInt(true)); // NaN ← 文字列でないと読めない
console.log(parseInt('010')); // 10 ← 8進数扱いは廃止済み
✅ ポイント
- 数字が「途中まで」でもOK（途中の文字は無視）
- 常に「整数」になる
- 小数や単位が混じったデータを読み取るのに便利
3. parseFloat() の特徴（小数も読む）
parseFloat(value) は parseInt() と似ていますが、小数点を含む数値を読めます。
console.log(parseFloat('123.45px')); // 123.45 ← 小数点OK
console.log(parseFloat('50.0abc')); // 50
console.log(parseFloat('3.14.15')); // 3.14 ← 2個目の小数点でストップ
console.log(parseFloat('abc3.14')); // NaN ← 数字が最初にない
✅ ポイント
- 数字 + 小数点まで読む
- 途中の文字は無視される
- CSS のように「数字 + 単位」を処理するのに最適（例：
"15px"→ 15）
4. +（単項プラス）の特徴（暗黙変換）
+value は「Number(value) とほぼ同じ」。
短く書けるけど、コードを読む人には分かりにくいのが欠点です。
console.log(+'123'); // 123
console.log(+'12.34'); // 12.34
console.log(+'10px'); // NaN ← 全体が数値でないとNG
console.log(+'true'); // NaN ← 文字列"true"はNG
console.log(+true); // 1
console.log(+false); // 0
console.log(+null); // 0
console.log(+undefined); // NaN
✅ ポイント
Number()とほぼ同じ動作- ショートカット的に書ける
- でも「意図が伝わりにくい」ため、初心者には非推奨
比較まとめ表
| 入力値 | Number() | parseInt() | parseFloat() | +（単項プラス） |
|---|---|---|---|---|
'123' | 123 | 123 | 123 | 123 |
'123.45' | 123.45 | 123 | 123.45 | 123.45 |
'123px' | NaN | 123 | 123 | NaN |
' 42 ' | 42 | 42 | 42 | 42 |
'abc123' | NaN | NaN | NaN | NaN |
true | 1 | NaN | NaN | 1 |
false | 0 | NaN | NaN | 0 |
null | 0 | NaN | NaN | 0 |
undefined | NaN | NaN | NaN | NaN |
['12.3'] | 12.3 | 12 | 12.3 | 12.3 |
どれを使えばいいの？
| 目的 | おすすめ関数 | 理由 |
|---|---|---|
| 入力を厳密に数値に変換したい | Number() | 信頼性が高く明確 |
| 文字列の先頭の数字だけ抜き出したい | parseInt() | 途中で単位や文字があってもOK |
| 小数も許容したい・単位付き数値を扱う | parseFloat() | px などを削って数値化できる |
| **素早く変換（短いコード）**がしたい | + | Number() の省略形。ただし可読性注意 |
例題（実践で違いを体感）
let str1 = "42px";
let str2 = "3.14abc";
let str3 = "abc100";
let str4 = " 10.5 ";
console.log(Number(str1)); // NaN
console.log(parseInt(str1)); // 42
console.log(parseFloat(str1)); // 42
console.log(+str1); // NaN
console.log(Number(str2)); // NaN
console.log(parseFloat(str2)); // 3.14
console.log(Number(str3)); // NaN
console.log(parseInt(str3)); // NaN ← 数字が先頭でない
console.log(parseFloat(str4)); // 10.5 ← 空白OK
まとめ（初心者の覚え方）
- 「厳しい」順番で覚えると理解しやすい！
Number() ≒ + ← 全体が数字でないとダメ（厳しい）
parseFloat() ← 小数点もOK、途中の文字は無視
parseInt() ← 整数だけ、途中の文字は無視
See the Pen Numeric Conversion Test by MONO365 -Color your days- (@monoqlo365) on CodePen.