JavaScriptで小数点以下2桁をスマートに扱う！3つの方法とサンプルコード

2024-06-24

JavaScript で小数点以下2桁の浮動小数点数を解析する方法

parseFloat() 関数は、文字列を数値に変換するために使用されます。小数点以下の桁数に制限はありませんが、デフォルトでは入力された文字列の小数点以下の桁数すべてを保持します。

const inputString = "12.3456";
const parsedNumber = parseFloat(inputString);
console.log(parsedNumber); // 12.3456

この例では、inputString 変数に "12.3456" という文字列が格納されています。parseFloat() 関数は、この文字列を数値に変換し、parsedNumber 変数に格納します。このとき、parsedNumber 変数は小数点以下4桁の浮動小数点数 "12.3456" になります。

toFixed() メソッドは、数値を文字列に変換し、指定された小数点以下の桁数に丸めます。

const inputNumber = 12.3456;
const parsedString = inputNumber.toFixed(2);
console.log(parsedString); // 12.35

この例では、inputNumber 変数に 12.3456 という浮動小数点数が格納されています。toFixed() メソッドは、この数値を小数点以下2桁に丸め、文字列に変換して parsedString 変数に格納します。このとき、parsedString 変数は "12.35" という文字列になります。

手動で桁数を切り捨てる

上記の方法に加えて、以下のように手動で桁数を切り捨てる方法もあります。

const inputString = "12.3456";
const parsedNumber = parseFloat(inputString);
const fixedNumber = parsedNumber.toFixed(2);
console.log(fixedNumber); // 12.35

この例では、まず parseFloat() 関数を使用して inputString 変数を数値に変換します。その後、toFixed() メソッドを使用して、変換された数値を小数点以下2桁に丸め、文字列に変換します。

入力された文字列が必ず小数点以下2桁であることがわかっている場合は、toFixed() メソッドを使用するのが最も簡潔です。
入力された文字列の小数点以下の桁数が不定である場合は、parseFloat() 関数を使用して数値に変換し、その後 toFixed() メソッドを使用して小数点以下2桁に丸める必要があります。
どうしても文字列として保持したい場合は、parseFloat() 関数を使用して数値に変換し、その後手動で桁数を切り捨てる必要があります。

// 文字列を小数点以下2桁の浮動小数点数値に解析する関数
function parseFloatWithTwoDecimals(inputString) {
  // parseFloat() で数値に変換
  const parsedNumber = parseFloat(inputString);

  // toFixed() で小数点以下2桁に丸め、文字列に変換
  const fixedString = parsedNumber.toFixed(2);

  // 文字列を数値に変換して返す
  return parseFloat(fixedString);
}

// 例
const inputString = "12.3456789";
const parsedNumber = parseFloatWithTwoDecimals(inputString);
console.log(parsedNumber); // 12.35

関数の処理は以下の通りです。

parseFloat() 関数を使用して、入力された文字列を数値に変換します。
toFixed() メソッドを使用して、変換された数値を小数点以下2桁に丸め、文字列に変換します。
変換された文字列を parseFloat() 関数を使用して再度数値に変換し、小数点以下2桁の浮動小数点数値として返します。

この関数は、入力された文字列が必ず小数点以下2桁であることを前提としています。入力された文字列の小数点以下の桁数が不定の場合は、正しく動作しない可能性があります。

このコードを参考に、状況に合わせて使い分けてください。

JavaScript で小数点以下2桁の浮動小数点数を解析するその他の方法

正規表現を使用して、入力された文字列が小数点以下2桁の数値であるかどうかを検証し、その場合は数値に変換することができます。

const inputString = "12.34";
const regex = /^-?\d+\.?(\d{1,2})?$/;

if (regex.test(inputString)) {
  const parsedNumber = parseFloat(inputString);
  console.log(parsedNumber); // 12.34
} else {
  console.error("Invalid input string");
}

この例では、regex 変数に正規表現を格納しています。この正規表現は、負号、0以上の数字、小数点、1つまたは2つの数字で構成される文字列にマッチします。

regex.test(inputString) で、入力された文字列 inputString が正規表現にマッチするかどうかを検証します。マッチする場合は、parseFloat() 関数を使用して inputString を数値に変換し、コンソールに出力します。マッチしない場合は、エラーメッセージを出力します。

Math.floor() 関数と Math.pow() 関数を使用して、入力された数値を小数点以下2桁に丸めることができます。

const inputNumber = 12.3456;
const parsedNumber = Math.floor(inputNumber * 100) / 100;
console.log(parsedNumber); // 12.34

この例では、inputNumber 変数に 12.3456 という浮動小数点数が格納されています。

まず、inputNumber を 100 で乗算します。これにより、小数点以下の桁数が2桁になります。次に、Math.floor() 関数を使用して、乗算結果を小数点以下切り捨てます。最後に、結果を 100 で除算して、元のスケールに戻します。

この方法は、比較的簡潔ですが、入力された数値が整数の場合、小数点以下の桁数が0になってしまうという欠点があります。

ライブラリを使用する

Decimal.js や js-number などのライブラリを使用すると、より高度な小数点演算を行うことができます。これらのライブラリは、精度エラーを防ぎ、より正確な結果を得ることができます。

const Decimal = require('decimal.js');

const inputString = "12.3456";
const parsedNumber = new Decimal(inputString).toPrecision(2);
console.log(parsedNumber.valueOf()); // 12.34

この例では、Decimal.js ライブラリを使用しています。

まず、require('decimal.js') で Decimal.js ライブラリをインポートします。次に、new Decimal(inputString) で入力された文字列を Decimal オブジェクトに変換します。最後に、toPrecision(2) メソッドを使用して、Decimal オブジェクトを小数点以下2桁に丸め、その値を valueOf() メソッドを使用して数値に変換してコンソールに出力します。

ライブラリの使用は、より複雑になりますが、より柔軟性と精度が要求される場合に有効です。

JavaScript で小数点以下2桁の浮動小数点数を解析するには、さまざまな方法があります。それぞれの方法には長所と短所があるため、状況に合わせて最適な方法を選択する必要があります。

上記以外にも、さまざまな方法があります。自分に合った方法を見つけて、活用してください。

javascript floating-point