parseFloat()は、JavaScriptで文字列を数値（浮動小数点数）に変換する際に使用する関数です。この記事では、parseFloat()の基本的な使い方から実践的な例まで詳しく解説します。

基本的な使い方

parseFloat()は、文字列を浮動小数点数に変換します。

const result = parseFloat("123.45");
console.log(result); // 123.45
console.log(typeof result); // "number"

主な特徴

1. 先頭の空白は無視されます

console.log(parseFloat("  123.45")); // 123.45

2. 数値として解釈できない文字が出現した時点で変換を終了します

console.log(parseFloat("123.45abc")); // 123.45
console.log(parseFloat("abc123.45")); // NaN

3. 小数点を含む数値を正しく解析できます

console.log(parseFloat("123.45")); // 123.45
console.log(parseFloat("0.123")); // 0.123

よくあるユースケース

フォーム入力値の数値変換

const inputValue = "123.45";
const number = parseFloat(inputValue);
if (!isNaN(number)) {
    // 数値として有効な場合の処理
    console.log(number * 2); // 246.9
}

計算処理での利用

const price = "1200.50";
const quantity = "2.5";
const total = parseFloat(price) * parseFloat(quantity);
console.log(total); // 3001.25

注意点

1. 無効な入力の場合はNaNを返します

console.log(parseFloat("abc")); // NaN
console.log(parseFloat("")); // NaN

2. nullやundefinedを渡した場合もNaNとなります

console.log(parseFloat(null)); // NaN
console.log(parseFloat(undefined)); // NaN

3. 科学的記数法にも対応しています

console.log(parseFloat("1.234e-5")); // 0.00001234

まとめ

parseFloat()は以下のような特徴を持つ便利な関数です：

  • 文字列を浮動小数点数に変換できる
  • 先頭の空白を無視する
  • 数値として解釈できない文字までを変換
  • フォーム入力値の処理に適している

適切に使用することで、文字列形式の数値データを扱う際の強力なツールとなります。

関連情報

  • parseInt()：整数への変換に使用
  • Number()：より厳密な数値変換に使用
  • isNaN()：NaNかどうかの判定に使用

これらの関数と組み合わせることで、より柔軟な数値処理が可能になります。