JavaScriptで文字列を浮動小数点数に変換し、数値を固定小数点で表示する方法
JavaScriptでのプログラミングにおいて、文字列を数値に変換することや、数値の表示方法を変更することは頻繁に発生します。
この記事では、parseFloat(string)メソッドとtoFixed([小数点以下の桁数])メソッドの使用方法とその重要性について解説します。
parseFloat(string): 文字列を浮動小数点数に変換
parseFloat()関数は、文字列を浮動小数点数に変換します。
これは特に、ユーザー入力やテキストファイルから得られたデータを数値として処理する場合に重要です。以下の例では、parseFloat()の使用方法を示しています。
ソースコード例
|
1 2 3 4 |
console.log(parseFloat("3.14")); console.log(parseFloat("314e-2")); console.log(parseFloat("0.0314E+2")); console.log(parseFloat("3.14more non-digit characters")); |
このコードを実行すると、文字列が浮動小数点数に変換された結果が出力されます。
出力結果
3.14
3.14
3.14
3.14
toFixed([小数点以下の桁数]): 小数点以下を固定桁数で表示
toFixed()メソッドは、数値を小数点以下の固定桁数で表示します。
これは特に、金額や計算結果の表示の際に役立ちます。以下の例では、toFixed()の使用方法を示しています。
ソースコード例
|
1 2 3 |
console.log((3.14159).toFixed(2)); console.log((3.14159).toFixed(3)); console.log((2).toFixed(2)); |
このコードを実行すると、数値が指定された桁数で丸められた文字列として出力されます。
出力結果
"3.14"
"3.142"
"2.00"
parseFloat()の応用例
parseFloat()は、ユーザーからの入力やデータファイルから数値を抽出する際に特に有用です。
数値計算やデータ変換を行う前に、この関数で数値を正しく解析することが重要です。
以下の例では、ユーザーからの入力を浮動小数点数に変換する実用的な使用例を示しています。
ソースコード例
|
1 2 3 4 5 6 7 8 9 10 11 |
function parseUserInput(input) { var number = parseFloat(input); if (!isNaN(number)) { console.log("入力された数値は: " + number); } else { console.log("有効な数値ではありません"); } } parseUserInput("5.67"); parseUserInput("abc123"); |
この関数は、入力された文字列が有効な数値かどうかを判断し、適切なメッセージを出力します。
出力結果
"入力された数値は: 5.67"
"有効な数値ではありません"
toFixed()の実践的な使用
toFixed()は、金額や精密度の高い計算結果の表示に特に適しています。以下の例では、金額の表示や科学的な計算結果を固定小数点数で表示する方法を示しています。
ソースコード例
|
1 2 |
console.log((123.456).toFixed(2)); // 金額表示 console.log((0.000123456).toFixed(5)); // 科学的計算結果 |
このコードを実行すると、数値が指定された桁数で丸められ、金額や計算結果が適切な形式で出力されます。
出力結果
"123.46"
"0.00012"
KindleUnlimited会員であれば、全ての本をご覧頂けます。 アロー関数と便利な関数を理解すれば、JavaScriptの世界が変わる
まとめ
この記事では、JavaScriptでのparseFloat()とtoFixed()の使い方とその応用例を詳しく解説しました。
これらのメソッドを使いこなすことで、プログラム内での数値の扱いがより柔軟で正確になります。
最後まで読んで頂き、ありがとうございました。少しでもお役にたてたなら幸いです！
