JavaScriptで通貨をフォーマットする方法（Intl.NumberFormatの使い方）

JavaScriptでは、Intl.NumberFormat()コンストラクターを使うことで、数値を任意の通貨形式に整形（フォーマット）できます。このコンストラクターは、styleプロパティに「currency」を指定することで、通貨表示を実現します。

本記事では、Intl.NumberFormat()を使った通貨フォーマットの基本から、currencyDisplayやcurrencySignといった便利なオプションまで、具体的なコード例とともにわかりやすく解説します。

コンストラクターの構文とパラメーター

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

Intl.NumberFormat()はコンストラクターであるため、JavaScriptの「new」キーワードとともに呼び出し、特殊な数値フォーマット処理を行うためのオブジェクトを生成します。

このコンストラクターは、「locales」と「options」という2つの省略可能な引数を受け取ります。localesには、言語タグの国際標準規格であるBCP 47（Best Current Practice 47）に準拠した文字列を指定します。たとえば、アメリカ英語なら「en-US」、ブラジルポルトガル語なら「pt-BR」のように指定します。

optionsには17種類のプロパティを設定できますが、本記事では特に重要な以下の3つに絞って紹介します。

• style: 通貨フォーマットを有効にするために「currency」を指定
• currencyDisplay: 通貨記号や名称の表示方法を指定
• currencySign: 負の値の表示方法を指定

実際のコード例

const money = 85000.50;

// ブラジル・レアル（BRL）
console.log(new Intl.NumberFormat('pt-BR', { style: 'currency', currency: 'BRL' }).format(money));
// 出力: R$ 85.000,50

// 米ドル（USD）
console.log(new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(money));
// 出力: $85,000.50

// 日本円（JPY）
console.log(new Intl.NumberFormat('ja-JP', { style: 'currency', currency: 'JPY' }).format(money));
// 出力: ￥85,001

コード例のポイントは、生成したオブジェクトに対してformat()メソッドを呼び出し、金額を格納した変数を渡している点です。コンストラクターに渡した引数（ロケールとオプション）に基づいて、数値が希望する通貨形式へと整形されます。

また、出力結果を見ると、通貨記号だけでなく、桁区切りや小数点の表記も各ロケールの慣習に合わせて自動的に調整されていることがわかります。日本円の場合、小数（補助単位）を持たない通貨のため、例では85000.50が四捨五入され、￥85,001と表示されます。

currencyDisplay と currencySign の使い方

optionsパラメーターでよく使われるプロパティとして、currencyDisplayとcurrencySignがあります。

currencyDisplay：通貨の表示形式を指定する

currencyDisplayでは、「symbol」「narrowSymbol」「code」「name」といった値を使って、通貨の表示方法を切り替えられます。

let money = 85000.50;

const symbol = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  currencyDisplay: 'symbol'
}).format(money);

const narrowSymbol = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  currencyDisplay: 'narrowSymbol'
}).format(money);

const code = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  currencyDisplay: 'code'
}).format(money);

const name = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  currencyDisplay: 'name'
}).format(money);

console.log(symbol);
// $85,000.50
console.log(narrowSymbol);
// $85,000.50（US$85,000.50 ではなく短縮形で表示）
console.log(code);
// USD 85,000.50
console.log(name);
// 85,000.50 US dollars

「symbol」はデフォルト値で、一般的な通貨記号を表示します。「narrowSymbol」はより短い記号形式（米ドルの場合はUS$ではなく$）、「code」はISO通貨コード、「name」は通貨の名称でそれぞれ表示されます。用途に応じて使い分けるとよいでしょう。

currencySign：負の値の表示方法を指定する

currencySignに「accounting」を指定すると、負の数値をマイナス記号の代わりに括弧で囲んで表示できます。これは会計処理でよく使われる形式です。デフォルト値は「standard」になっているため、使用する際は明示的に指定する必要があります。

let money = -8500.50;

const accounting = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  currencySign: 'accounting'
}).format(money);

console.log(accounting);
// ($8,500.50)

まとめ

Intl.NumberFormat()は、styleプロパティによって通貨フォーマットをはじめとするさまざまな数値整形を実現できるコンストラクターです。format()メソッドと組み合わせることで、ロケールに応じた自然な通貨表示を簡単に実装できます。多言語・多地域に対応したWebアプリケーションを開発する際には、ぜひ活用してみてください。