Форматирование чисел

Основное использование

Вы можете локализовать число с использованием ваших собственных форматов.

Форматы чисел следующие:

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

После этого, при использовании локализованных сообщений, необходимо указать параметр numberFormats функции createI18n:

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>

Первый аргумент - это числовое значение, второй аргумент - имя формата чисел, третий аргумент - значение локали.

Результат ниже:

<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 - свойство для установки тега.

value - свойство для установки числового значения, которое будет отформатировано.

format - свойство, которое может принимать формат, определенный параметром numberFormats функции createI18n.

locale - свойство для установки локали. Локализация выполняется с использованием указанной здесь локали вместо локали, указанной в параметре locale функции createI18n.

Приведет к следующему результату:

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

Настоящая мощь этого компонента раскрывается при использовании с scoped slots.

Допустим, у вас есть требование отображать целую часть числа жирным шрифтом. Это можно реализовать с помощью специального элемента scoped slot 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>

Возможно одновременное использование нескольких scoped slots:

<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

Полный список поддерживаемых scoped slots, а также другие свойства i18n-n можно найти в Справочнике API

Разрешение области видимости (Scope resolving)

Разрешение области видимости компонента NumberFormat аналогично компоненту Translation.

См. здесь