Formato de Números

Uso Básico

Puedes localizar los números con tus definiciones de formato.

Los formatos numéricos son los siguientes:

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

Como se muestra arriba, puedes definir formatos numéricos nombrados (por ejemplo, currency, etc.), y necesitas usar las opciones con ECMA-402 Intl.NumberFormat

Después de eso, al utilizar mensajes de localización, debes especificar la opción numberFormats de createI18n:

const i18n = createI18n({
  numberFormats
})

Para localizar valores numéricos con Vue I18n, usa $n.

TIP

$n tiene algunas sobrecargas. Sobre estas sobrecargas, consulta la Referencia de API

El siguiente es un ejemplo del uso de $n en una plantilla:

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

El primer argumento es el valor numérico como parámetro, y el segundo argumento es el nombre del formato numérico como parámetro. El último argumento es el valor de la configuración regional como parámetro.

Como resultado se obtiene lo siguiente:

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

Formateo Personalizado

$n devuelve una cadena con el número completamente formateado, que solo puede usarse como un todo. En situaciones cuando necesitas dar estilo a alguna parte del número formateado (como dígitos fraccionarios), $n no es suficiente. En tales casos, el componente NumberFormat (i18n-n) será útil.

Con un conjunto mínimo de propiedades, i18n-n genera la misma salida que $n, envuelta en un elemento DOM configurado.

La siguiente plantilla:

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

El componente NumberFormat tiene algunas propiedades.

La propiedad tag permite establecer la etiqueta.

La propiedad value permite establecer el valor numérico a formatear.

La propiedad format permite establecer el formato definido por la opción numberFormats de createI18n.

La propiedad locale permite establecer la configuración regional. Se localiza con la configuración regional especificada por esta propiedad, en lugar de la especificada con la opción locale de createI18n.

Producirá la siguiente salida:

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

Pero el verdadero poder de este componente se manifiesta cuando se utiliza con slots con ámbito.

Digamos que hay una necesidad de representar la parte entera del número con una fuente más gruesa. Esto se puede lograr especificando el elemento de slot con ámbito integer:

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

La plantilla anterior produce el siguiente HTML:

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

Es posible especificar múltiples slots con ámbito al mismo tiempo:

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

(Este HTML resultante fue formateado para mejor legibilidad)

<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

La lista completa de los slots con ámbito compatibles, así como otras propiedades de i18n-n, pueden encontrarse en la Referencia de API

Resolución de Ámbito

La resolución del ámbito del componente NumberFormat es la misma que la del componente Translation.

Ver aquí