Vue I18n

数フォーマット

基本的な使い方

定義したフォーマットに従って数をローカライズできます。

数フォーマットの例：

const numberFormats = {
  'en-US': {
    currency: {
      style: 'currency', currency: 'USD'
    }
  },
  'ja-JP': {
    currency: {
      style: 'currency', currency: 'JPY', currencyDisplay: 'symbol'
    }
  }
}

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

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

const i18n = createI18n({
  numberFormats
})

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

備考

$nにはいくつかのオーバーロードがあります。この点については、API リファレンスを参照してください。

以下は、テンプレートでの$nの使用例です。

<p>{{ $n(100, 'currency') }}</p>
<p>{{ $n(100, 'currency', 'ja-JP') }}</p>

パラメータとして、第1引数に数値を、第2引数に数フォーマット名を、第3引数にロケール値を渡します。

出力は以下のようになります。

<p>$100.00</p>
<p>￥100</p>

カスタムフォーマット

備考

IEではIntl.NumberForamt#formatToPartsがサポートされていないため、この機能は使えません。

使いたい場合、polyfillを使う必要があります。

$nはフォーマットされた数の文字列を返しますが、その値は全体としてのみ使えます。数の一部分（端数など）のスタイルを変えたい場合は、$nでは不十分です。その場合、NumberFormatコンポーネント（i18n-n）が有効です。

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

以下はその例です：

<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コンポーネントにはいくつかのpropsがあります。

tagはタグをセットするプロパティです。

valueはフォーマットしたい数値をセットするプロパティです。

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

localeはロケールをセットするプロパティです。createI18nのlocaleオプションで指定された値の代わりに、このpropで指定されたロケールでローカライズされます。

出力は以下のようになります：

<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>

（この例では、読みやすくするためにフォーマットされています）

<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>

備考

サポートされているスコープ付きスロットとその他i18n-nのプロパティの一覧はAPI リファレンスで確認できます。

スコープの解決

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

詳細は、こちらのドキュメントをお読みください。