parseInt / parseFloat の使い方 — parseInt('12', 10)（基数指定）
JavaScript では文字列を数値に変換する方法として parseInt と parseFloat があります。
初心者は「整数にしたいなら parseInt、小数も扱いたいなら parseFloat」と覚えると理解しやすいです。
基本のコード例
console.log(parseInt("12", 10)); // → 12 （文字列 → 整数）
console.log(parseInt("12px", 10)); // → 12 （数字部分だけ変換）
console.log(parseFloat("3.14")); // → 3.14 （文字列 → 浮動小数点数）
console.log(parseFloat("3.14円")); // → 3.14 （数字部分だけ変換）
parseInt(string, radix)string: 変換したい文字列radix: 基数（10なら十進数、16なら十六進数など）
parseFloat(string)- 小数点を含む数値を変換
よく使うテンプレート集
基数指定（radix）
console.log(parseInt("1010", 2)); // → 10 （2進数 → 10進数）
console.log(parseInt("A", 16)); // → 10 （16進数 → 10進数）
console.log(parseInt("77", 8)); // → 63 （8進数 → 10進数）
文字列から数値を取り出す
console.log(parseInt("42px", 10)); // → 42
console.log(parseFloat("99.5kg")); // → 99.5
不正な文字列は NaN
console.log(parseInt("abc", 10)); // → NaN
console.log(parseFloat("xyz")); // → NaN
例題: CSS の数値を取り出す
function getPxValue(str) {
return parseInt(str, 10);
}
console.log(getPxValue("100px")); // → 100
console.log(getPxValue("20em")); // → 20
- 効果:
"100px"のような文字列から数値部分だけを取り出せる。
実務でのコツ
- 必ず基数を指定する:
parseInt("08")のように基数を省略すると環境によって解釈が変わることがある。- 推奨:
parseInt("08", 10)
- 推奨:
- 小数を扱うなら
parseFloat:parseInt("3.14")→3になってしまう。 - 数値変換全般: 単純に数値変換したいなら
Number("123")の方が厳密。
ありがちなハマりポイントと対策
- 基数を省略して誤判定:
parseInt("010")→ 古い環境では 8進数扱いになることがある。- 対策: 必ず
parseInt("010", 10)と書く。
- 小数が切り捨てられる:
parseInt("3.14", 10)→3- 小数を扱いたいなら
parseFloat。
練習問題（16進カラーコードを数値に変換）
function hexToDecimal(hex) {
return parseInt(hex, 16);
}
console.log(hexToDecimal("FF")); // → 255
console.log(hexToDecimal("A")); // → 10
- 効果: 16進数の文字列を 10進数に変換できる。
直感的な指針
parseInt(str, 10)= 文字列を整数に変換（必ず基数を指定）。parseFloat(str)= 文字列を小数に変換。- 数字以外の文字が混じっていても先頭が数字なら変換可能。
- 初心者は「CSSのpx」「16進数」「小数の文字列」で練習すると理解が深まる。
これを覚えれば「文字列から数値を安全に取り出す」「基数を指定して正しく変換する」といった場面で自在に使えるようになります。