コンテンツにスキップ

JavaScript/Number/parseFloat

リンクを追加
出典: フリー教科書『ウィキブックス（Wikibooks）』
isSafeInteger JavaScript
parseFloat 		parseInt

Number.parseFloat() は、ECMAScript における Number オブジェクトのメソッドで、文字列を解析して浮動小数点数を返します。このメソッドはグローバルの parseFloat() 関数と同じ機能を持ち、文字列の先頭から数値を解析します[1]。

構文

[編集]
Number.parseFloat(string)

パラメータ

[編集]
  • string: 解析する文字列。文字列でない値は文字列に変換されます。

戻り値

[編集]

指定された文字列から解析された浮動小数点数を返します。文字列の先頭に有効な数値がない場合は NaN を返します。

特性

[編集]

Number.parseFloat() には、以下のような特性があります：

  • 静的メソッド: このメソッドは Number コンストラクタに属し、Number インスタンスからは直接呼び出せません。
  • グローバル関数のエイリアス: Number.parseFloat() は、グローバルの parseFloat() 関数と同じ実装を共有します。
  • 先頭から解析: 文字列の先頭から解析を開始し、有効な数値文字を解析し続けます。
  • 空白の無視: 文字列の先頭の空白は無視されます。
  • ECMAScript 6: このメソッドは ECMAScript 6（ES2015）で導入されました。

例

[編集]

基本的な使用法

[編集]

以下のプログラムは、Number.parseFloat() の基本的な使用法を示しています。 

// 基本的な数値文字列の解析
console.log(Number.parseFloat('3.14')); // 3.14
console.log(Number.parseFloat('42')); // 42
console.log(Number.parseFloat('-10.5')); // -10.5
console.log(Number.parseFloat('0.0314E+2')); // 3.14

// 先頭の空白は無視される
console.log(Number.parseFloat('  3.14')); // 3.14

// 数値以外の文字で解析が停止
console.log(Number.parseFloat('3.14abc')); // 3.14
console.log(Number.parseFloat('3.14.15')); // 3.14

// 数値で始まらない文字列
console.log(Number.parseFloat('abc')); // NaN
console.log(Number.parseFloat('')); // NaN

このプログラムでは、Number.parseFloat() が様々な文字列を浮動小数点数に解析する例を示しています。先頭の空白は無視され、数値以外の文字が出現すると解析が停止します。数値で始まらない文字列に対しては NaN を返します。

グローバルの parseFloat() との比較

[編集]

以下のプログラムは、Number.parseFloat() とグローバルの parseFloat() 関数の同等性を示しています。 

// Number.parseFloat() と グローバルの parseFloat() の比較
const testStrings = [
  '3.14',
  '  -10.5',
  '42',
  '3.14abc',
  'abc',
  '0xFF', // 16進数表記
  '1.2e3', // 指数表記
  'Infinity'
];

console.log('Number.parseFloat() === parseFloat():', Number.parseFloat === parseFloat); // true

console.log('\n結果の比較:');
testStrings.forEach(str => {
  const numResult = Number.parseFloat(str);
  const globalResult = parseFloat(str);
  console.log(`${str}: ${numResult} === ${globalResult} (${numResult === globalResult})`);
});

このプログラムでは、Number.parseFloat() とグローバルの parseFloat() 関数が同じ関数オブジェクトを参照していること、および両者が様々な入力に対して同じ結果を返すことを示しています。

数値表記の解析

[編集]

以下のプログラムは、Number.parseFloat() で様々な数値表記を解析する例を示しています。 

// 様々な数値表記の解析
console.log(Number.parseFloat('3.14')); // 3.14 (10進数)
console.log(Number.parseFloat('314e-2')); // 3.14 (指数表記)
console.log(Number.parseFloat('0.0314E+2')); // 3.14 (指数表記)
console.log(Number.parseFloat('0x1A')); // 0 (16進数は先頭の '0' のみ解析される)
console.log(Number.parseFloat('0b1010')); // 0 (2進数は先頭の '0' のみ解析される)
console.log(Number.parseFloat('0o777')); // 0 (8進数は先頭の '0' のみ解析される)
console.log(Number.parseFloat('Infinity')); // Infinity
console.log(Number.parseFloat('-Infinity')); // -Infinity

このプログラムでは、Number.parseFloat() が様々な数値表記をどのように解析するかを示しています。10進数と指数表記は正しく解析されますが、16進数（0x）、2進数（0b）、8進数（0o）はサポートされず、先頭の '0' のみが解析されます。"Infinity" と "-Infinity" はそれぞれ Infinity と -Infinity に解析されます。

実用的な例

[編集]

ユーザー入力の解析

[編集]

以下のプログラムは、ユーザー入力から浮動小数点数を解析する例を示しています。 

// フォーム入力から浮動小数点数を解析するクラス
class NumericInputProcessor {
  constructor(maxDecimalPlaces = 2) {
    this.maxDecimalPlaces = maxDecimalPlaces;
  }
  
  // 入力を浮動小数点数に解析
  parseUserInput(input) {
    // 入力の検証
    if (input === null || input === undefined || input === '') {
      return { valid: false, value: 0, error: '入力が空です' };
    }
    
    // 数値に変換
    const parsedValue = Number.parseFloat(input);
    
    // NaN チェック
    if (Number.isNaN(parsedValue)) {
      return { valid: false, value: 0, error: '有効な数値ではありません' };
    }
    
    // 小数点以下の桁数を指定された数に制限
    const roundedValue = this.roundToDecimalPlaces(parsedValue, this.maxDecimalPlaces);
    
    return {
      valid: true,
      value: roundedValue,
      originalValue: parsedValue,
      formatted: this.formatNumber(roundedValue)
    };
  }
  
  // 指定された小数点以下の桁数に丸める
  roundToDecimalPlaces(num, decimalPlaces) {
    const factor = Math.pow(10, decimalPlaces);
    return Math.round(num * factor) / factor;
  }
  
  // 数値を読みやすい形式にフォーマット
  formatNumber(num) {
    return num.toLocaleString(undefined, {
      minimumFractionDigits: 0,
      maximumFractionDigits: this.maxDecimalPlaces
    });
  }
}

// 使用例
const processor = new NumericInputProcessor(2);

// 有効な入力
console.log(processor.parseUserInput('3.14159'));
// { valid: true, value: 3.14, originalValue: 3.14159, formatted: '3.14' }

console.log(processor.parseUserInput('1000.5'));
// { valid: true, value: 1000.5, originalValue: 1000.5, formatted: '1,000.5' }

// 無効な入力
console.log(processor.parseUserInput('abc'));
// { valid: false, value: 0, error: '有効な数値ではありません' }

console.log(processor.parseUserInput(''));
// { valid: false, value: 0, error: '入力が空です' }

このプログラムでは、ユーザー入力から浮動小数点数を解析し、指定された小数点以下の桁数に丸め、読みやすい形式にフォーマットするクラスの例を示しています。Number.parseFloat() を使用して入力文字列を浮動小数点数に変換し、Number.isNaN()> で結果が有効かどうかを確認しています。

CSV データの解析

[編集]

以下のプログラムは、CSV データから数値を解析する例を示しています。 

// CSV データから数値を解析する関数
function parseCSVData(csvString) {
  // CSV の行に分割
  const rows = csvString.trim().split('\n');
  
  // ヘッダー行を取得
  const headers = rows[0].split(',');
  
  // データ行を解析
  const data = [];
  for (let i = 1; i < rows.length; i++) {
    const values = rows[i].split(',');
    const rowData = {};
    
    for (let j = 0; j < headers.length; j++) {
      const header = headers[j];
      const value = values[j];
      
      // 数値かどうかを判断して適切に変換
      const trimmedValue = value.trim();
      if (trimmedValue !== '' && !isNaN(Number.parseFloat(trimmedValue))) {
        rowData[header] = Number.parseFloat(trimmedValue);
      } else {
        rowData[header] = trimmedValue;
      }
    }
    
    data.push(rowData);
  }
  
  return {
    headers,
    data
  };
}

// 使用例
const csvData = `name,age,height,weight
Alice,28,165.5,55.2
Bob,35,182.3,76.8
Charlie,42,175.0,68.5`;

const parsedData = parseCSVData(csvData);
console.log(parsedData.headers); // ['name', 'age', 'height', 'weight']
console.log(parsedData.data);
/*
[
  { name: 'Alice', age: 28, height: 165.5, weight: 55.2 },
  { name: 'Bob', age: 35, height: 182.3, weight: 76.8 },
  { name: 'Charlie', age: 42, height: 175, weight: 68.5 }
]
*/

このプログラムでは、CSV 形式の文字列からデータを解析し、数値フィールドを適切な JavaScript の数値型に変換する例を示しています。Number.parseFloat() を使用して、数値を表す文字列を浮動小数点数に変換しています。

通貨文字列の解析

[編集]

以下のプログラムは、通貨表記の文字列から数値を抽出する例を示しています。 

// 通貨文字列から数値を抽出する関数
function extractNumberFromCurrency(currencyString) {
  // 通貨記号、カンマ、空白を削除
  const cleanedString = currencyString
    .replace(/[$€£¥]/g, '') // 通貨記号を削除
    .replace(/,/g, '')      // カンマを削除
    .replace(/\s/g, '')     // 空白を削除
    .trim();
  
  // 浮動小数点数として解析
  const value = Number.parseFloat(cleanedString);
  
  // 解析結果を検証
  if (Number.isNaN(value)) {
    return { success: false, value: 0, error: '有効な通貨値ではありません' };
  }
  
  return { success: true, value };
}

// 使用例
console.log(extractNumberFromCurrency('$1,234.56')); // { success: true, value: 1234.56 }
console.log(extractNumberFromCurrency('€2,000.00')); // { success: true, value: 2000 }
console.log(extractNumberFromCurrency('¥10,000')); // { success: true, value: 10000 }
console.log(extractNumberFromCurrency('£ 500.50')); // { success: true, value: 500.5 }
console.log(extractNumberFromCurrency('1.234,56 €')); // { success: true, value: 1.234 } (注: 小数点としてのカンマは未対応)
console.log(extractNumberFromCurrency('price: $abc')); // { success: false, value: 0, error: '有効な通貨値ではありません' }

このプログラムでは、通貨表記の文字列から数値を抽出する関数の例を示しています。通貨記号やカンマなどの書式文字を削除した後、Number.parseFloat() を使用して数値を抽出しています。

Number.parseFloat() と他の変換メソッドの比較

[編集]

JavaScript には文字列を数値に変換するいくつかの方法があります。以下は Number.parseFloat() と他の変換メソッドの比較です：

  • Number() コンストラクタ: 文字列全体が有効な数値でなければ NaN を返します。
  • parseFloat() 関数: Number.parseFloat() と同じ挙動です。
  • Number.parseInt()> メソッド: 整数部分のみを解析し、小数部分は無視します。
  • 単項プラス演算子 (@): Number() コンストラクタと同様の挙動です。
// 数値変換メソッドの比較
const testStrings = [
  '3.14',
  '42',
  '3.14abc',
  ' 3.14 ',
  'abc',
  '0xFF',
  ''
];

console.log('変換メソッドの比較:');
testStrings.forEach(str => {
  console.log(`\n入力: "${str}"`);
  console.log(`Number.parseFloat(): ${Number.parseFloat(str)}`);
  console.log(`Number(): ${Number(str)}`);
  console.log(`Number.parseInt(): ${Number.parseInt(str, 10)}`);
  console.log(`単項プラス演算子 (+): ${+str}`);
});

/*
変換メソッドの比較:

入力: "3.14"
Number.parseFloat(): 3.14
Number(): 3.14
Number.parseInt(): 3
単項プラス演算子 (+): 3.14

入力: "42"
Number.parseFloat(): 42
Number(): 42
Number.parseInt(): 42
単項プラス演算子 (+): 42

入力: "3.14abc"
Number.parseFloat(): 3.14
Number(): NaN
Number.parseInt(): 3
単項プラス演算子 (+): NaN

入力: " 3.14 "
Number.parseFloat(): 3.14
Number(): 3.14
Number.parseInt(): 3
単項プラス演算子 (+): 3.14

入力: "abc"
Number.parseFloat(): NaN
Number(): NaN
Number.parseInt(): NaN
単項プラス演算子 (+): NaN

入力: "0xFF"
Number.parseFloat(): 0
Number(): 255
Number.parseInt(): 0
単項プラス演算子 (+): 255

入力: ""
Number.parseFloat(): NaN
Number(): 0
Number.parseInt(): NaN
単項プラス演算子 (+): 0
*/

このプログラムでは、様々な入力に対する Number.parseFloat() と他の数値変換メソッドの結果を比較しています。主な違いは以下の通りです：

  • Number.parseFloat() と parseFloat() は文字列の先頭から解析を開始し、数値以外の文字が出現すると解析を停止します。
  • Number() と単項プラス演算子は文字列全体が有効な数値でなければ NaN を返します。
  • Number.parseInt()> は整数部分のみを解析します。
  • 16進数表記（0xFF）に対して、Number() と単項プラス演算子は 255 に変換しますが、Number.parseFloat() は先頭の '0' のみを解析します。
  • 空文字列に対して、Number() と単項プラス演算子は 0 を返しますが、Number.parseFloat() は NaN を返します。

その他の Number オブジェクトのメソッド

[編集]

ECMAScript は、Number オブジェクトに他の便利なメソッドも定義しています：

脚註

[編集]
  1. ^ Number.parseFloat() は、ECMAScript 6 でグローバル parseFloat() 関数への参照として導入されました。

外部リンク

[編集]


isSafeInteger JavaScript
parseFloat 		parseInt
"https://ja.wikibooks.org/w/index.php?title=JavaScript/Number/parseFloat&oldid=270659" より作成