JavaScriptで数値をカンマ区切り、小数点以下桁数、前後の記号などを指定してフォーマットする方法

2024-06-05

JavaScriptで数値を小数点2桁でフォーマットする方法

toFixed()メソッドを使う

説明:

toFixed()メソッドは、数値を指定した桁数まで小数点以下に丸め、文字列として返します。小数点以下の桁数が指定された桁数よりも少ない場合は、0で埋めます。

例:

const num = 12.3456;
const formattedNum = num.toFixed(2);
console.log(formattedNum); // 出力: 12.35

補足:

toFixed()メソッドは、数値を丸めます。つまり、小数点以下の桁数が指定された桁数よりも多い場合は、四捨五入されます。
toFixed()メソッドは、文字列を返します。そのため、数値として使用するには、parseFloat()関数などで数値に変換する必要があります。

toLocaleString()メソッドを使う

toLocaleString()メソッドは、数値をロケールに基づいてフォーマットされた文字列として返します。オプションでフォーマットオプションを指定することで、小数点以下の桁数などを指定することができます。

const num = 12.3456;
const formattedNum = num.toLocaleString('ja-JP', { maximumFractionDigits: 2 });
console.log(formattedNum); // 出力: 12.35

toLocaleString()メソッドは、ロケールに基づいてフォーマットされるため、出力される文字列が環境によって異なる場合があります。

上記以外にも、ライブラリを使用したり、自作の関数を使用したりして、数値を小数点2桁でフォーマットすることができます。

JavaScriptで数値を小数点2桁でフォーマットするには、主にtoFixed()メソッドとtoLocaleString()メソッドを使用することができます。それぞれのメソッドの特徴を理解して、状況に応じて使い分けることが重要です。

toFixed()メソッドを使う

function formatNumWithFixed(num) {
  return num.toFixed(2);
}

const num1 = 12.3456;
const formattedNum1 = formatNumWithFixed(num1);
console.log(formattedNum1); // 出力: 12.35

const num2 = 12.9;
const formattedNum2 = formatNumWithFixed(num2);
console.log(formattedNum2); // 出力: 12.90

toLocaleString()メソッドを使う

function formatNumWithLocaleString(num) {
  return num.toLocaleString('ja-JP', { maximumFractionDigits: 2 });
}

const num1 = 12.3456;
const formattedNum1 = formatNumWithLocaleString(num1);
console.log(formattedNum1); // 出力: 12.35

const num2 = 12.9;
const formattedNum2 = formatNumWithLocaleString(num2);
console.log(formattedNum2); // 出力: 12.90

上記のコードでは、formatNumWithFixed()とformatNumWithLocaleString()という2つの関数を作成しています。
formatNumWithFixed()関数は、toFixed()メソッドを使用して数値を小数点2桁でフォーマットします。
各関数は、引数として数値を受け取り、小数点2桁でフォーマットされた文字列を返します。
コードの最後では、それぞれの関数を使用して、いくつかの数値を小数点2桁でフォーマットしています。

上記のコードはあくまで一例です。状況に応じて、コードをカスタマイズする必要があります。
例えば、小数点以下の桁数を変更したり、カンマ区切りを追加したりすることができます。

JavaScriptで数値を小数点2桁でフォーマットするその他の方法

手動でフォーマットする

数値を文字列に変換し、小数点以下の桁数をを手動で調整することで、小数点2桁でフォーマットすることができます。この方法は、シンプルな処理を記述したい場合に適しています。

function formatNumManually(num) {
  const str = num.toString();
  const [intPart, decPart] = str.split('.');
  const formattedDecPart = decPart.length > 2 ? decPart.substr(0, 2) : decPart + '0'.repeat(2 - decPart.length);
  return intPart + '.' + formattedDecPart;
}

const num1 = 12.3456;
const formattedNum1 = formatNumManually(num1);
console.log(formattedNum1); // 出力: 12.35

const num2 = 12.9;
const formattedNum2 = formatNumManually(num2);
console.log(formattedNum2); // 出力: 12.90

上記のコードは、formatNumManually()という関数を作成しています。
関数内部では、数値を文字列に変換し、小数点で区切って整数部と小数部を取得します。
小数部の桁数が2桁よりも多い場合は、2桁目までを切り取り、不足している桁数は0で補います。
その後、整数部とフォーマットされた小数部を連結して、小数点2桁でフォーマットされた文字列を返します。

利点:

シンプルで分かりやすいコード

複雑なフォーマットには不向き
処理速度が遅い場合がある

ライブラリを使用する

数値フォーマットに特化したライブラリを使用することで、より柔軟で効率的なフォーマット処理を実現することができます。

const { numberFormat } = require('number-formatter');

const num1 = 12.3456;
const formattedNum1 = numberFormat(num1, { fixed: 2 });
console.log(formattedNum1); // 出力: 12.35

const num2 = 12.9;
const formattedNum2 = numberFormat(num2, { fixed: 2 });
console.log(formattedNum2); // 出力: 12.90

上記のコードは、number-formatterライブラリを使用しています。
このライブラリは、npmコマンドでインストールすることができます。
ライブラリを使用するには、まずライブラリをインポートする必要があります。
その後、numberFormat()関数を使用して数値をフォーマットすることができます。
numberFormat()関数には、フォーマットオプションを指定することができます。
例では、fixedオプションを使用して小数点以下2桁まで固定しています。

処理速度が速い
コードが簡潔になる

ライブラリの導入が必要
コードの可読性が低下する場合がある

正規表現を使用する

正規表現を使用して、数値の文字列を小数点2桁でフォーマットすることができます。この方法は、柔軟なフォーマット処理を記述したい場合に適しています。

function formatNumWithRegExp(num) {
  const str = num.toString();
  return str.replace(/(\d)(?:\.\d{0,1})/, '$1.00');
}

const num1 = 12.3456;
const formattedNum1 = formatNumWithRegExp(num1);
console.log(formattedNum1); // 出力: 12.35

const num2 = 12.9;
const formattedNum2 = formatNumWithRegExp(num2);
console.log(formattedNum2); // 出力: 12.90