JavaScript形式の通貨（intl.numberformat）

JavaScriptでは、 Intl.NumberFormat（） メソッドは、数値で表す通貨を指定するために使用されます。このメソッドは、styleプロパティで通貨をフォーマットするために使用できるコンストラクターです。

この記事では、 Intl.NumberFormat（）の使用方法について説明します。 これを実現するために、またいくつかのサンプルコードを示します。

コンストラクターとそのパラメーターの分解

new Intl.NumberFormat([locales[, options]])

Intl.NumberFormat（） はコンストラクターであり、JavaScriptの「new」キーワードが前に付き、特殊な数値フォーマットを実現できるオブジェクトを作成します。

コンストラクターは、「locales」と「options」の2つのオプションパラメーターを取ります。ロケールは、言語タグ（現在はBCP 47）にインターネットのBest Current Practices（BCP）を含む文字列を保持します。たとえば、アメリカ英語が必要な場合は、「en-US」のBCP47言語タグを使用します。ブラジルのポルトガル語が必要な場合は、「pt-BR」を使用します。

オプションには17の異なるプロパティがありますが、この記事では3つだけに焦点を当てます。また、CurrencyDisplay、CurrencySignで通貨を利用できるスタイルにも焦点を当てています。

サンプルコード

const money = 85000.50
 
// For Brazilian Reals
console.log(new Intl.NumberFormat('pr-BR', {style: 'currency', currency: 'BRL'}).format(money))
// outputs R$85,000.50
 
// For USD
console.log(new Intl.NumberFormat('en-US', {style: 'currency', currency: 'USD'}).format(money))
// outputs $85,000.50
 
// For Japanese Yen
console.log(new Intl.NumberFormat('ja-JP', { style: 'currency', currency: 'JPY' }).format(money));
// outputs ¥85,001

上記のサンプルコードから注目すべき点は、format()を使用したことです。 お金の変数を渡す方法。これは、新しいオブジェクトを作成した後で行いました。このオブジェクトは、パラメータとして渡される設定に合わせて通貨をフォーマットするために使用されます。

出力で実際のシンボルを取得するだけでなく、通貨の正しい形式も取得する方法に注目してください。日本円の場合、この例の変更は、マイナーユニットを監視しないため、意図的に切り上げられています。

CurrencyDisplayとCurrencySign

通貨のオプションパラメータで保持できる他の2つの一般的なプロパティは、CurrencyDisplayとCurrencySignです。

参加者の81％は、ブートキャンプに参加した後、自分たちの技術的な仕事の見通しについてより自信を持っていると述べました。今日のブートキャンプにマッチしましょう。

平均的なブートキャンプの卒業生は、ブートキャンプの開始から最初の仕事を見つけるまで、キャリアの移行に6か月も費やしませんでした。

CurrencyDisplayは、symbol、narrowSymbol、code、nameなどの値を使用して、さまざまな形式で通貨を表示します。

let money = 85000.50;
 
const symbol = new Intl.NumberFormat('en-USD', {
  style: 'currency',
  currency: 'USD',
  currencyDisplay: 'symbol'
}).format(money);
 
const narrowSymbol = new Intl.NumberFormat('en-USD', {
  style: 'currency',
  currency: 'USD',
  currencyDisplay: 'narrowSymbol'
}).format(money);
 
const code = new Intl.NumberFormat('en-USD', {
  style: 'currency',
  currency: 'USD',
  currencyDisplay: 'code'
}).format(money);
 
const name = new Intl.NumberFormat('en-USD', {
  style: 'currency',
  currency: 'USD',
  currencyDisplay: 'name'
}).format(money);
 
 
console.log(symbol) 
// $85,000.50
console.log(narrowSymbol)
// $85,000.50 rather than US$85,000.50
console.log(code)
// USD 85,000.50
console.log(name)
// 85,000.50 US dollars

CurrencySignは、マイナス記号を追加する代わりに、数値を括弧で囲みます。これは「アカウンティング」に使用されるため、オプションは自動的に「標準」にデフォルト設定されるため、これに変更する必要があります。

let money = -8500.50;
 
const accounting = new Intl.NumberFormat('en-USD', {
  style: 'currency', 
  currency: 'USD',
  currencySign: 'accounting' 
}).format(money);
 
console.log(accounting)
// ($8,500.50)

結論

Intl.NumberFormat（） methodは、特に、styleプロパティで通貨をフォーマットするために使用されるコンストラクターです。 format()と組み合わせて使用​​できます 好みに合わせて通貨を表示します。