parseInt / parseFloat を一言でいうと
parseInt / parseFloat は、
「文字列の“先頭から読める数字の部分”を数値として取り出す関数」 です。
parseInt("123") → 整数 123parseFloat("3.14") → 小数 3.14
のように、
「文字列 → 数値」の変換をするために使います。
ここが重要です。parseInt / parseFloat は
「文字列の最初から読めるところまでを数字として読む」
「読めない（数字として解釈できない）ところで読むのをやめる」
という動きをします。Number() と挙動が違うところが多いので、その違いを意識しておくことが大切です。
parseInt の基本：文字列から整数を取り出す
一番シンプルな使い方
parseInt(文字列) は、
文字列の先頭から「整数として読める部分」を読み取って、number 型の整数として返します。
console.log(parseInt("123")); // 123
console.log(parseInt("42")); // 42
console.log(parseInt("-10")); // -10
console.log(parseInt("+7")); // 7
先頭が数字（あるいは + / - と数字）なら、その部分が整数になります。
途中に文字が混ざっていても、そこで読み止める
parseInt は、「読めるところまで数字として読む」という挙動をします。
console.log(parseInt("123px")); // 123
console.log(parseInt("12.34")); // 12（小数点で止まる）
console.log(parseInt("10abc20")); // 10（10 まで読んで止まる）
「先頭が数字で始まってさえいれば」、
途中に文字が混ざっていても、読めた分だけ数値として返します。
逆に、
先頭が数字として意味を成さないときは NaN です。
console.log(parseInt("abc123")); // NaN（最初から読めない）
console.log(parseInt(" 123")); // 123（前の空白は無視）
空白（スペース、タブなど）は最初にスキップされます。
その後「最初の文字」が数字として読めれば OK です。
先頭からどこまで読むのかイメージする
「parse“全体を”Int」ではなく、
「parse“先頭から読めるところまで”Int」
という名前だと考えると、挙動が理解しやすくなります。
ここが重要です。parseInt は、
「文字列全体がきれいな数字であること」を前提にしていません。
「先頭から見て、数字として解釈できる部分だけを取り出す」関数です。
CSS の "100px" など、「単位付きの数値」を扱うときによく使われるのは、この性質のためです。
parseInt の第2引数：基数（radix）を指定する
基数とは何か（10進数だけじゃない）
parseInt の第2引数は「基数（radix）」と呼ばれ、
その文字列が何進数なのか を指定できます。
構文はこうです。
parseInt(文字列, 基数);
例えば、"10" を 2 進数として読ませれば、それは「2」という意味になります。
console.log(parseInt("10", 10)); // 10（10進数で10）
console.log(parseInt("10", 2)); // 2 （2進数で10 → 2）
console.log(parseInt("10", 8)); // 8 （8進数で10 → 8）
console.log(parseInt("10", 16)); // 16 （16進数で10 → 16）
16進数の文字列を読む例
16進数では A〜F も桁として使います。
console.log(parseInt("FF", 16)); // 255
console.log(parseInt("0xFF", 16)); // 255（0x 付きでもOK）
console.log(parseInt("1A3", 16)); // 419
途中で「その進数ではありえない文字」が出たところで読み止めます。
console.log(parseInt("1G", 16)); // 1（"G"は16進数として無効なので、"1"まで）
第2引数は原則「必ず指定する」癖をつけたほうがいい
昔の JavaScript では、parseInt("08") のようなケースが 8進数として扱われることがありました（環境依存）。
現代の仕様では改善されていますが、
「何進数として読むのかを明示する」という意味で第2引数を指定する習慣 は非常に大事です。
console.log(parseInt("08")); // 環境によっては 8 になったり NaN になったりした歴史がある
console.log(parseInt("08", 10)); // 常に 8
ここが重要です。parseInt を使うときは、
「自分が何進数を期待しているのか」を明示するために、
原則として第2引数（radix）を指定する クセをつけてください。
特に "08" "09" のような文字列を扱うときに、安全性が段違いに上がります。
parseFloat の基本：文字列から小数を取り出す
シンプルな使い方
parseFloat(文字列) は、
文字列の先頭から「小数として読める部分」を読み取って、number 型として返します。
console.log(parseFloat("3.14")); // 3.14
console.log(parseFloat("-0.5")); // -0.5
console.log(parseFloat("10")); // 10（小数がなくても数値としてOK）
console.log(parseFloat("2.5e3")); // 2500（指数表現も読める）
parseFloat は、parseInt と違って
小数点・指数表現（e / E）も数値として解釈してくれます。
途中に文字がある場合
parseInt と同じく、
「先頭から読めるところまで」を数値として扱います。
console.log(parseFloat("3.14px")); // 3.14
console.log(parseFloat("10.5kg")); // 10.5
console.log(parseFloat("abc3.14")); // NaN（最初から読めない）
console.log(parseFloat(" 1.23")); // 1.23（前の空白は無視）
小数点以下も含めて読み、その先に文字があればそこで止まります。
ここが重要です。parseFloat は、「小数もありうる数値の文字列」を扱う標準的な変換関数です。
CSS などで "1.5rem" や "0.8em" から数字部分だけ取り出したいときなどに役立ちます。
parseInt / parseFloat と Number() の違い
Number() は「文字列全体」が数値である必要がある
Number(文字列) の場合、
文字列全体が数値として解釈できないと、NaN になります。
console.log(Number("123")); // 123
console.log(Number("3.14")); // 3.14
console.log(Number("123abc")); // NaN（全体として数値じゃない）
console.log(Number(" 10 ")); // 10（前後の空白はOK）
parseInt / parseFloat と比べてみます。
console.log(parseInt("123px", 10)); // 123
console.log(Number("123px")); // NaN
console.log(parseFloat("3.14kg")); // 3.14
console.log(Number("3.14kg")); // NaN
いつ parse 系を使って、いつ Number を使うか
文字列全体が「きれいな数値」であることを期待しているなら、Number() のほうが厳密でおすすめです。
途中に余計な文字があったら、即 NaN になります。
逆に、
「単位付きの数値」「末尾に余計な文字がありえる」といったケースでは、parseInt / parseFloat を使うほうが便利です。
例えば CSS：
const widthStr = "100px";
const width = parseInt(widthStr, 10);
console.log(width); // 100
ここが重要です。
Number は「全体として数値であるべき」場合の厳密変換、
parseInt / parseFloat は「先頭に書いてある数値部分だけ抜き取りたい」場合のゆるい変換。
「どれくらいの厳しさでチェックしたいか」で使い分けると、迷いにくくなります。
NaN と組み合わせたチェック（parse 系の結果検証）
parse の結果が NaN になるパターン
parseInt / parseFloat は、
「先頭から読めない」場合に NaN を返します。
console.log(parseInt("abc", 10)); // NaN
console.log(parseFloat("...3.14")); // NaN
console.log(parseInt(" ", 10)); // NaN
console.log(parseFloat("", 10)); // NaN（基数指定は無視されるが）
このとき、=== NaN ではチェックできないので、Number.isNaN を使います。
const value = parseInt("abc", 10);
if (Number.isNaN(value)) {
console.log("数値として解釈できませんでした");
}
ユーザー入力を parse する典型パターン
フォーム入力から「年齢」を受け取るようなケース。
const input = "20歳";
const age = parseInt(input, 10);
if (Number.isNaN(age)) {
console.log("年齢として不正な入力です");
} else {
console.log(`年齢は ${age} 歳です`);
}
ここで input = "20歳" のとき、parseInt("20歳", 10) → 20Number("20歳") → NaN
となるので、
「“数字＋単位”を許容したいかどうか」で、
どちらを使うかを決めることになります。
ここが重要です。
parse 系の戻り値は、必ず「NaN だった場合の扱い」とセットで設計する。
「NaN ならエラーにするのか」「デフォルト値を入れるのか」など、
振る舞いを明確にしておくと、後で困らなくなります。
よくある落とし穴と注意点
落とし穴①：基数を指定しない parseInt
歴史的な仕様や環境差のせいで、parseInt("08") が 8 になったり NaN になったり、
8進数として解釈されたりといった問題がありました。
現代の JavaScript ではだいぶマシになりましたが、
「何進数で読むのかは常に明示する」 というルールにしておくほうが安全です。
parseInt("08", 10); // 常に 8
落とし穴②：空文字や空白だけの文字列
console.log(parseInt("", 10)); // NaN
console.log(parseInt(" ", 10)); // NaN
console.log(parseFloat("")); // NaN
console.log(parseFloat(" ")); // NaN
見た目には「何もなさそう」ですが、
そのまま Number にしたり計算に使うと NaN 連鎖になります。
ユーザー入力などを parse する前に、trim() して空文字チェックをしておくのがベストです。
const raw = " ";
const s = raw.trim();
if (s === "") {
console.log("実質的に空の入力です");
} else {
const num = parseFloat(s);
// ...
}
落とし穴③：parseInt と map の組み合わせ
配列の map(parseInt) は有名な罠です。
console.log(["10", "20", "30"].map(parseInt));
// [10, NaN, NaN] になることがある
map はコールバックに
「(要素, インデックス, 配列)」
を渡します。
そのため、実際には
parseInt("10", 0);
parseInt("20", 1);
parseInt("30", 2);
のように呼ばれてしまい、
第2引数に「radix」としてインデックスが渡されてしまいます。
対策としては、
必ず自分でラップして使うことです。
console.log(["10", "20", "30"].map(x => parseInt(x, 10))); // [10, 20, 30]
ここが重要です。
parseInt は「第2引数に基数を取る」という仕様のせいで、
配列メソッドと組み合わせたときに思わぬ挙動をすることがあります。map(parseInt) のように、そのまま渡さないことを強くおすすめします。
初心者として parseInt / parseFloat で本当に押さえてほしいこと
parseInt / parseFloat は、
文字列の「先頭から読めるだけ」数値として読み取る関数。
途中に文字があれば、そこまでで止まる。
parseInt(str, 10) のように、
基数（radix）は原則必ず指定する。
特に "08" のようなケースのために、第2引数を付ける癖をつける。
parseFloat は小数・指数表現も読める。
CSS など「単位付き数値」の数値部分だけ欲しいときに便利。
文字列全体が数値であることを確認したいなら Number() のほうが厳密。
parse 系は「先頭の数値だけ」とる“ゆるめの変換”だと理解して使い分ける。
NaN が返る可能性があるので、
変換後は Number.isNaN でチェックし、「エラー扱い」か「デフォルト値」かを決めておく。
ここが重要です。
「文字列を数値にしたい」と思ったときに、
自分が本当にやりたいのは
“全体がきれいな数値か確かめたい” のか、
“先頭の数字だけ抜き出したい” のか。
この違いを意識して、Number / parseInt / parseFloat を選べるようになると、
文字列と数値の変換まわりで迷うことが一気に減ります。
最後に、parseInt / parseFloat の挙動を体感する小さな練習です。
const samples = [
"123",
"123px",
"3.14",
"3.14kg",
"abc123",
" 42 ",
"",
" ",
];
for (const s of samples) {
console.log(
`"${s}"`,
"parseInt:", parseInt(s, 10),
"parseFloat:", parseFloat(s),
"Number:", Number(s)
);
}
実行してみて、
「どこまで読まれているか」「どのケースで NaN になるか」を比べてみると、
それぞれの関数の“性格の違い”がかなりはっきり見えてくるはずです。