1. parseInt・parseFloatとは？

JavaScriptで文字（文字列）として書かれた数字を、実際に計算で使える「数値」に変える関数です。

parseIntは「整数（小数点なしの数字）」に変換し、parseFloatは「小数点を含む数字」に変換します。

2. parseIntの基本的な使い方

parseIntは文字列の中から、先頭の数字だけを読み取って整数に変換します。


console.log(parseInt("123"));     // 123（整数）
console.log(parseInt("123abc"));  // 123（数字だけ読み取る）
console.log(parseInt("abc123"));  // NaN（数字が先頭にないので変換できない）

文字列の先頭に数字があると、その部分だけ数字として取り出します。数字が先頭にない場合はNaN（Not a Numberの略で「数字じゃない」という意味）になります。

3. parseFloatの基本的な使い方

parseFloatは小数点も含めて数字を取り出します。たとえば小数の計算をしたい時に便利です。


console.log(parseFloat("3.14"));       // 3.14（小数点ありの数字）
console.log(parseFloat("3.14abc"));    // 3.14（数字だけ読み取る）
console.log(parseFloat("abc3.14"));    // NaN（先頭に数字がないので変換できない）

4. なぜparseIntやparseFloatを使うの？

ブラウザで入力フォームなどから受け取った値は「文字列」として扱われます。そのままだと計算ができません。

たとえば、"10"と"20"を足すと「1020」という文字のつながりになってしまいます。


console.log("10" + "20");   // "1020"（文字列の結合）

そこで、parseIntやparseFloatで文字列を数字に変換すると、正しく足し算できます。


console.log(parseInt("10") + parseInt("20"));   // 30（数字の足し算）

5. parseIntの基数（進数）指定について

parseIntは、数字が何進法かを指定することができます。たとえば2進数（0と1だけの数字）や16進数（0〜9とA〜F）を扱う場合です。


console.log(parseInt("1010", 2));    // 10（2進数の1010は10進数の10）
console.log(parseInt("1A", 16));     // 26（16進数の1Aは10進数の26）

ただし、普段は省略しても10進数（普通の数字）として扱われます。

6. parseInt・parseFloatの注意点

文字列の途中に数字以外の文字があっても、先頭から数字部分だけ読み取ります。
数字が先頭にない文字列はNaNになります。NaNは計算に使えない特別な値です。
parseIntは小数点以下を切り捨てて整数にします。
parseFloatは小数点以下もそのまま数字にします。

7. 便利な数値変換テクニック

parseIntやparseFloatの他にも、数値変換の方法はいくつかあります。

Number()関数：文字列を数字に変換。小数も整数も変換可能。
プラス記号（+）：文字列の前に付けると数字に変換する簡単な方法。


// Number関数の例
console.log(Number("123.45"));   // 123.45

// +を使った変換の例
console.log(+"123.45");          // 123.45

ただし、Number()や+は文字列全体が数字でないとNaNになるので注意が必要です。


console.log(Number("123abc"));  // NaN
console.log(+"123abc");         // NaN

8. 実用的な使い方の例

ユーザーが入力した値を計算に使う場合は、parseIntやparseFloatで変換してから計算すると安全です。


let input = "50.5";             // ユーザーの入力（文字列）
let price = parseFloat(input);  // 小数に変換
let quantity = 3;
let total = price * quantity;   // 正しい計算になる
console.log(total);             // 151.5