数フォーマット
基本的な使い方
定義したフォーマットに従って数をローカライズできます。
数フォーマットの例:
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>
カスタムフォーマット
$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 コンポーネントと同じです。
詳細は、こちらのドキュメントをお読みください。