JavaScript で数値を通貨文字列としてフォーマットする

1. JavaScript で Intl.NumberFormat() メソッドを使用して数値を通貨文字列としてフォーマットする
2. JavaScript で toLocaleString() メソッドを使用して数値を通貨文字列としてフォーマットする
3. JavaScript で Numeral.js ライブラリを使用して数値を通貨文字列としてフォーマットする

数値は、日付/時刻、通貨、数値など、さまざまな方法で表されます。それが金銭的価値として表されるとき、その影響は増加し、はるかに読みやすくなります。たとえば、10000 として記述された金額は、$ 10,000.00 として表された数値よりもはるかに影響が少なくなります。数字、さまざまな通貨記号、さまざまなコンマ区切りについて詳しく説明しています。このチュートリアルでは、JavaScript で数値を通貨文字列としてフォーマットする方法を説明します。

JavaScript で Intl.NumberFormat() メソッドを使用して数値を通貨文字列としてフォーマットする

このメソッドは、言語に依存する形式で数値を表し、提供されたパラメーターに従って通貨を表すために使用されます。入力として、locales と options の 2つのパラメーターを取ります。

1. locales：言語と地域の設定を指定します。これは、ダッシュで区切られた言語と地域の組み合わせで構成される小さな文字列です。たとえば、en-IN ロケールはインドと英語の形式を取ります。右からの最初のコンマは数千を区切り、残りは数百になります。
2. options：これは、多数のプロパティで構成されるオブジェクトです。または、オプションと言うこともできます。数値を通貨文字列としてフォーマットする場合、3つの主要なオプションが必要です。
3. style：これは単に数値フォーマットのスタイルです。ユースケースに応じて、3 の異なる値 decimal、currency、percent を持つことができます。この場合、スタイルを currency として設定します。
4. currency：フォーマット番号文字列の前に含めるシンボルの通貨タイプ（米ドルやユーロなど）を指定します。
5. minimumFractionDigits：フォーマットされた文字列の小数点以下に表示される最小桁数を指定します。

const money = 10000;
const currency = function(number) {
  return new Intl
      .NumberFormat(
          'en-IN',
          {style: 'currency', currency: 'INR', minimumFractionDigits: 2})
      .format(number);
};
console.log(currency(money));

上記のコードは、指定された数値をインドの通貨文字列に変換するのに役立ちます。

JavaScript で toLocaleString() メソッドを使用して数値を通貨文字列としてフォーマットする

このメソッドは基本的に Intl.NumberFormat() と同じですが、複数のアイテムがあると速度が遅いため、通常は使用されません。単一アイテムの場合、両方の方法の速度は同じです。Intl.NumberFormat() と同じパラメータがあります。両方のメソッドの内部実装が異なるため、速度が異なるだけです。

const number = 2000;
number.toLocaleString(
    'en-IN', {style: 'currency', currency: 'INR', minimumFractionDigits: 2})
console.log(number);

上記のコードは、指定された数値をインドの通貨文字列に変換するのに役立ちます。

JavaScript で Numeral.js ライブラリを使用して数値を通貨文字列としてフォーマットする

Numeral.js は、数値をフォーマットするために最も広く使用されているライブラリの 1つです。このライブラリを使用して数値を通貨文字列としてフォーマットするには、最初に数値のインスタンスを作成します。書式設定を実行する前に数値または文字列を数値に変換するのは、このライブラリで使用される標準のデータ型です。その後、format() 関数を使用して通貨フォーマットを指定できます。

<script src="//cdnjs.cloudflare.com/ajax/libs/numeral.js/2.0.6/numeral.min.js"></script>

上記のコードは、ブラウザに Numeral.js ライブラリを含めるために使用されます。

var number = 1000;
var myNumeral = numeral(number);
var currencyString = myNumeral.format('$0,0.00');

数字を作成し、format 関数を呼び出して、数字を小数点以下 2 桁の USD としてフォーマットしました。上記のコードは、通貨形式を指定するためのはるかにクリーンな方法を提供します。