JavaScriptで数値を見やすくフォーマットしたい場合、`Intl.NumberFormat()`を使用すると簡単に実装できます。この記事では、`Intl.NumberFormat()`の基本的な使い方から実践的な例まで解説します。

基本的な使い方

最もシンプルな使用方法は以下の通りです：

const number = 1234567;
const formatter = new Intl.NumberFormat();
console.log(formatter.format(number)); // 出力: 1,234,567

ロケール（言語）の指定

国や地域に応じた数値表示が可能です：

// 日本語表記
const jpFormatter = new Intl.NumberFormat('ja-JP');
console.log(jpFormatter.format(1234567)); // 出力: 1,234,567

// アメリカ英語表記
const usFormatter = new Intl.NumberFormat('en-US');
console.log(usFormatter.format(1234567)); // 出力: 1,234,567

小数点以下の桁数指定

小数点以下の桁数を制御できます：

const number = 1234.5678;
const formatter = new Intl.NumberFormat('ja-JP', {
  minimumFractionDigits: 2,
  maximumFractionDigits: 2
});
console.log(formatter.format(number)); // 出力: 1,234.57

通貨表示

金額表示も簡単に実装できます：

const price = 1234567;
const formatter = new Intl.NumberFormat('ja-JP', {
  style: 'currency',
  currency: 'JPY'
});
console.log(formatter.format(price)); // 出力: ¥1,234,567

パーセント表示

パーセンテージの表示も可能です：

const ratio = 0.8543;
const formatter = new Intl.NumberFormat('ja-JP', {
  style: 'percent',
  minimumFractionDigits: 1
});
console.log(formatter.format(ratio)); // 出力: 85.4%

単位表示

計測単位を付加することもできます：

const length = 100;
const formatter = new Intl.NumberFormat('ja-JP', {
  style: 'unit',
  unit: 'meter'
});
console.log(formatter.format(length)); // 出力: 100 m

主なオプション一覧

`Intl.NumberFormat()`で使用できる主なオプションをまとめました：

  • `style`: 'decimal'（通常）, 'currency'（通貨）, 'percent'（パーセント）, 'unit'（単位）
  • `currency`: 通貨コード（'JPY', 'USD'など）
  • `minimumFractionDigits`: 小数点以下の最小桁数
  • `maximumFractionDigits`: 小数点以下の最大桁数
  • `useGrouping`: 桁区切りの使用（true/false）

ブラウザサポート

`Intl.NumberFormat()`は、モダンブラウザで広くサポートされています：

  • Chrome 24以降
  • Firefox 29以降
  • Safari 10以降
  • Edge 12以降

まとめ

`Intl.NumberFormat()`を使用することで、JavaScriptでの数値フォーマットが簡単に実装できます。ロケールに応じた表示や、通貨、パーセント、単位などの表示に対応しており、実用的なアプリケーション開発に役立ちます。

エラーを防ぐためには、以下の点に注意しましょう：

1. 正しいロケール文字列を指定する

2. 適切なオプションを設定する

3. 有効な数値を渡す

このAPIを活用することで、ユーザーフレンドリーな数値表示を実現できます。