数値変換とは何か
数値変換は、文字列や真偽値などを「数値として計算できる形」にすることです。フォーム入力やCSV処理など、プログラムでは文字列で受け取った値を数値に変えて計算する場面が多くあります。JavaScriptには複数の変換手段があり、用途に応じて使い分けるのが安全です。
代表的な変換方法
Number関数での厳密変換
Number(…) は文字列全体が数値として妥当かを評価し、変換できなければ NaN を返します。空白は無視されますが、単位や文字が混ざっていると失敗します。
Number("42"); // 42
Number(" 3.5 "); // 3.5
Number("12px"); // NaN
Number(""); // 0
Number(" "); // 0
parseInt / parseFloat で先頭から読み取る
parseInt は整数、parseFloat は小数や指数表記を「文字列の先頭から読めるところまで」取り出します。十進数の整数なら parseInt に 10 を指定して誤解釈を避けます。
parseInt("123px", 10); // 123
parseFloat("7.5kg"); // 7.5
parseFloat("1.2e3"); // 1200
parseInt("abc", 10); // NaN
単項プラス（+）で素早く変換
先頭に + を付けると Number と同様に厳密変換を行います。短く書けますが、可読性に注意が必要です。
+"10"; // 10
+"3.14"; // 3.14
+"12px"; // NaN
文字列からの変換の挙動
空文字や空白のみの文字列
空文字 “” や空白だけの文字列は Number で 0 になります。意図しないゼロ扱いを避けたいなら、空チェックを別途行うのが安全です。
Number(""); // 0
Number(" "); // 0
小数・指数表記の扱い
Number と parseFloat は指数表記（e 記法）を理解します。parseInt は小数点より前までしか読みません。
Number("1.5e2"); // 150
parseFloat("1.5e-2"); // 0.015
parseInt("10.9", 10); // 10
真偽値・null・undefinedの変換
真偽値の変換
true は 1、false は 0 に変換されます。数値化して足し引きに使う場面もあります。
Number(true); // 1
Number(false); // 0
null と undefined の違い
null は 0、undefined は NaN になります。未入力を 0 として扱うかエラーにするか、要件に合わせて分岐しましょう。
Number(null); // 0
Number(undefined); // NaN
NaNの扱いと判定
NaNの検出はNumber.isNaNで行う
NaN は「数値ではない」を示す特別な値で、計算に混ざると結果が NaN に伝播します。判定には Number.isNaN を使うのが安全です。
const n = Number("12px"); // NaN
Number.isNaN(n); // true
isNaNとの違いに注意
グローバル isNaN は型変換後に判定するため、意図せず true になることがあります。基本は Number.isNaN を使います。
isNaN("foo"); // true（数値化できないから）
Number.isNaN("foo"); // false（値そのものは NaN ではない）
実用パターン
入力を安全に数値化する関数
先に Number で変換し、NaN なら null を返すなど扱いやすい形に整えます。
function toNumberSafe(s) {
const n = Number(s);
return Number.isNaN(n) ? null : n;
}
toNumberSafe("42"); // 42
toNumberSafe("abc"); // null
単位付き文字列から数値を取り出す
単位が混ざるなら parseFloat / parseInt を使い、必要に応じて前処理で数字部分を抽出します。
parseFloat("72.5kg"); // 72.5
parseInt("size=42px".replace(/^\D+/, ""), 10); // 42
配列の数値化と集計
数値化してから NaN を除外し、合計や平均を計算します。
const raw = ["10", "x", "20", "", "3.5"];
const nums = raw.map(Number).filter(n => !Number.isNaN(n));
const sum = nums.reduce((a, b) => a + b, 0); // 33.5
const avg = nums.length ? sum / nums.length : 0; // 11.166...
よくある落とし穴と回避策
parseIntの基数は常に明示する
十進数のつもりなら第二引数に 10 を付けて、環境や表記の違いによる誤解釈を防ぎます。
parseInt("08", 10); // 8
空文字が0になる仕様に注意する
「未入力はエラー」にしたいなら、空チェックを先に行います。未入力を 0 として扱うなら明示的にデフォルト値を与えます。
function parsePrice(s) {
if (s.trim() === "") return "入力が空です";
const n = Number(s);
return Number.isNaN(n) ? "数値にしてください" : n;
}
小数が必要ならparseFloatかNumberを使う
parseInt は小数を切り捨てるため、誤って精度を失わないように選択します。
parseInt("9.99", 10); // 9
parseFloat("9.99"); // 9.99
まとめ
数値変換は「厳密に全体を評価する Number」「先頭から読めるところまで取り出す parseInt / parseFloat」「短い書き方の単項プラス」の三本柱を用途で使い分けます。NaN は Number.isNaN で判定し、空文字や単位付きなどの入力特性に応じて前処理を挟むと安全です。基数指定、空チェック、NaN除外の三点を押さえるだけで、初心者でも数値処理のトラブルを大幅に減らせます。