数値フォーマット

基本的な使い方

数値を指定された形式でローカライズできます。

以下の通り数値をフォーマットします：

const numberFormats = {
  'en-US': {
    currency: {
      style: 'currency', currency: 'USD', notation: 'standard'
    },
    decimal: {
      style: 'decimal', minimumFractionDigits: 2, maximumFractionDigits: 2
    },
    percent: {
      style: 'percent', useGrouping: false
    }
  },
  'ja-JP': {
    currency: {
      style: 'currency', currency: 'JPY', useGrouping: true, currencyDisplay: 'symbol'
    },
    decimal: {
      style: 'decimal', minimumSignificantDigits: 3, maximumSignificantDigits: 5
    },
    percent: {
      style: 'percent', useGrouping: false
    }
  }
}

上記のように、名前付きの数値フォーマット（例：currencyなど）を定義でき、ECMA-402 Intl.NumberFormat のオプションを使用する必要があります。

その後、ロケールメッセージを使用する際には、createI18n の numberFormats オプションを指定する必要があります：

const i18n = createI18n({
  numberFormats
})

Vue I18n で数値をローカライズするには、$n を使用します。

TIP

$n にはいくつかのオーバーロードがあります。これらのオーバーロードについては、APIリファレンスをご確認ください。

テンプレートでの $n の使用例は次の通りです：

<p>{{ $n(10000, 'currency') }}</p>
<p>{{ $n(10000, 'currency', 'ja-JP') }}</p>
<p>{{ $n(10000, 'currency', 'ja-JP', { useGrouping: false }) }}</p>
<p>{{ $n(987654321, 'currency', { notation: 'compact' }) }}</p>
<p>{{ $n(0.99123, 'percent') }}</p>
<p>{{ $n(0.99123, 'percent', { minimumFractionDigits: 2 }) }}</p>
<p>{{ $n(12.11612345, 'decimal') }}</p>
<p>{{ $n(12145281111, 'decimal', 'ja-JP') }}</p>

最初の引数は数値をパラメータとして渡し、2番目の引数は数値フォーマット名をパラメータとして渡します。最後の引数はロケール値をパラメータとして渡します。

結果は以下のようになります：

<p>$10,000.00</p>
<p>￥10,000</p>
<p>￥10000</p>
<p>$988M</p>
<p>99%</p>
<p>99.12%</p>
<p>12.12</p>
<p>12,145,000,000</p>

カスタムフォーマット

$n は完全にフォーマットされた数値の文字列を返すため、全体としてしか使用できません。フォーマットされた数値の一部（例えば分数桁など）をスタイル設定したい場合、$n では不十分です。このようなケースでは NumberFormat コンポーネント (i18n-n) が役立ちます。

最小限のプロパティセットで、i18n-n は $n と同じ出力を生成し、設定されたDOM要素にラップして出力します。

以下のテンプレート：

<i18n-n tag="span" :value="100"></i18n-n>
<i18n-n tag="span" :value="100" format="currency"></i18n-n>
<i18n-n tag="span" :value="100" format="currency" locale="ja-JP"></i18n-n>

NumberFormat コンポーネントにはいくつかのプロパティがあります。以下は主なプロパティです。

tag は出力されるDOM要素のタグを設定するプロパティです。

value はフォーマットする数値を設定するプロパティです。

format は createI18n の numberFormats オプションで定義されたフォーマットを設定するプロパティです。

locale はロケールを設定するプロパティです。このプロパティで指定されたロケールでローカライズされ、createI18n の locale オプションで指定されたロケールではなくなります。

以下のような出力が得られます：

<span>100</span>
<span>$100.00</span>
<span>￥100</span>

しかし、このコンポーネントの本当の威力は、スコープ付きスロットと組み合わせて使用した際に発揮されます。

数値の整数部分を太字フォントで表示する必要があるとします。これは integer スコープ付きスロット要素を指定することで実現できます：

<i18n-n tag="span" :value="100" format="currency">
  <template #integer="slotProps">
    <span style="font-weight: bold">{{ slotProps.integer }}</span>
  </template>
</i18n-n>

上記のテンプレートは以下のHTMLを生成します：

<span>$<span style="font-weight: bold">100</span>.00</span>

複数のスコープ付きスロットを同時に指定することも可能です：

<i18n-n tag="span" :value="1234" :format="{ key: 'currency', currency: 'EUR' }">
  <template #currency="slotProps">
    <span style="color: green">{{ slotProps.currency }}</span>
  </template>
  <template #integer="slotProps">
    <span style="font-weight: bold">{{ slotProps.integer }}</span>
  </template>
  <template #group="slotProps">
    <span style="font-weight: bold">{{ slotProps.group }}</span>
  </template>
  <template #fraction="slotProps">
    <span style="font-size: small">{{ slotProps.fraction }}</span>
  </template>
</i18n-n>

（この出力されたHTMLは読みやすさのためにフォーマットされています）

<span>
  <span style="color: green">€</span>
  <span style="font-weight: bold">1</span>
  <span style="font-weight: bold">,</span>
  <span style="font-weight: bold">234</span>
  .
  <span style="font-size: small">00</span>
</span>

NOTE

サポートされているスコープ付きスロットの一覧や他の i18n-n プロパティについては、APIリファレンスをご確認ください。

スコープ解決

NumberFormat コンポーネントのスコープ解決は、翻訳コンポーネントと同じです。

こちらをご確認ください。