JavaScriptのNumberオブジェクト parseFloat() メソッドの使い方メソッドについて記載します。
概要、実際のサンプルコードを交えて構文などの使い方をまとめてみました。
JavaScriptのNumberオブジェクトとは？
JavaScriptのNumber オブジェクトは、整数または浮動小数点数といった数値の日付を表します。
ブラウザでは、数値リテラルを自動的に数値クラスのインスタンスに変換するので、Numberオブジェクトについて心配する必要はありません。
それでは、次に本題の説明に移ります。
JavaScriptのNumberオブジェクト parseFloat() メソッドの使い方概要
parseFloat() メソッドは、文字列を浮動小数点数に変換します。
文字列の先頭が数字でない場合は、NaN（Not a Number）を返します。
構文、使い方
構文:
parseFloat(string)
使い方:
文字列を浮動小数点数に変換します。
文字列の先頭が数値に該当する場合は、その数値を返します。
そうでない場合は、NaNを返します。
引数について
引数として文字列を渡し、その文字列を浮動小数点数に変換して返す。
返り値について
parseFloat() メソッドは、文字列をパースして浮動小数点数を返します。
このメソッドを利用した便利なテクニック
parseFloat() メソッドを使うと、文字列を数値に変換することができます。
例えば、文字列の「1.5」を数値の1.5に変換することができます。
このテクニックは、フォーム入力などで数値を取得する際に便利です。
現場で実際にどのように使われているか
parseFloat() メソッドは、文字列を数値に変換するために使用されます。
例えば、文字列 “”3.14″” を数値 3.14 に変換する場合、次のようにします。
|
1 |
let num = parseFloat(""3.14""); |
JavaScriptのNumberオブジェクト parseFloat() メソッドの使い方と一緒によく使われる処理
parseFloat() メソッドを使用して、文字列を数値に変換する処理がよく使われます。
なぜなら、JavaScriptでは文字列と数値を混在させることができるため、文字列を数値に変換する必要があるからです。
使用する上での注意点
– 文字列の先頭が数値でない場合は、NaNを返します。
– 文字列が空である場合は、NaNを返します。
– 文字列が数値を表す文字列以外の文字を含む場合は、NaNを返します。
JavaScriptのNumberオブジェクト parseFloat() メソッドの使い方と似た処理のJSメソッド、違い
parseInt() と似ていますが、下記の違いがあります。
- parseInt() メソッド: 文字列を整数に変換する。
- parseFloat() メソッド: 文字列を浮動小数点数に変換する。
JavaScriptのNumberオブジェクト parseFloat() メソッドの使い方を使ったサンプルコードの紹介
parseFloat()メソッドを使ったサンプルコード1
|
1 2 3 |
let num1 = ""123.45""; let result1 = parseFloat(num1); console.log(result1); |
parseFloat()メソッドを使ったサンプルコード2
|
1 2 3 |
let num2 = ""123.45abc""; let result2 = parseFloat(num2); console.log(result2); |
parseFloat()メソッドを使ったサンプルコード3
|
1 2 3 |
let num3 = ""abc123.45""; let result3 = parseFloat(num3); console.log(result3); |
JavaScript Numberオブジェクトの他メソッドについて
JavaScriptのNumberオブジェクトの他メソッドについては、下記記事にもまとめていますので参考にしてみてください
| メソッド名 | 機能 | リンク |
| isFinite() | 値が有限数かどうかを確認します | JavaScriptのNumberオブジェクト isfiniteメソッドの使い方 |
| isInteger() | 値が整数であるかどうかを確認します | JavaScriptのisIntegerオブジェクト isIntegerメソッドの使い方 |
| isNaN() | 値がnumber.nanであるかどうかを確認します | JavaScriptのNumberオブジェクト isNaNメソッドの使い方 |
| isSafeInteger() | 値が安全な整数であるかどうかを確認します | JavaScriptのNumberオブジェクト isSafeIntegerメソッドの使い方 |
| parseFloat() | 文字列を解析しますanは番号を返します | JavaScriptのNumberオブジェクト parseFloatメソッドの使い方 |
| parseInt() | 文字列を解析すると、整数が返されます | JavaScriptのNumberオブジェクト parseIntメソッドの使い方 |
| toExponential(x) | 数値を指数表記に変換します | JavaScriptのNumberオブジェクト toExponentialメソッドの使い方 |
| toFixed(x) | 小数点以降にx数の数字で数字をフォーマットします | JavaScriptのNumberオブジェクト toFixedメソッドの使い方 |
| toLocaleString() | ロケール設定に基づいて、数値を文字列に変換します | JavaScriptのNumberオブジェクト toLocaleStringメソッドの使い方 |
| toPrecision(x) | 数字をxの長さをフォーマットします | JavaScriptのNumberオブジェクト toPrecisionメソッドの使い方 |
| toString() | 数字を文字列に変換します | JavaScriptのNumberオブジェクト toStringメソッドの使い方 |
| valueOf() | 数のプリミティブ値を返します | JavaScriptのNumberオブジェクト valueofメソッドの使い方 |
また、JavaScriptの公式ドキュメントであるMDNで記載されているNumberオブジェクトのparseFloatメソッドについても補足としてリンクを貼っておきます。参考にしてみてください。
