0Pricing
Vue Academy · Lección

Formato de números, fechas y divisas

n() para números, d() para fechas, formatos de fecha y hora y numberFormats por locale

Formato de números, fechas y divisas es una lección gratuita de Vue Academy en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Vue Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Vue Academy incluye 4 lecciones en total.

Los números y las fechas varían según el locale

1,000.50 en Estados Unidos es 1.000,50 en gran parte de Europa. Las fechas y las divisas también varían. Vue I18n encapsula las API Intl del navegador para que los números, las fechas y el dinero se muestren correctamente según el locale.

Configurar numberFormats

Defina formatos de número con nombre para cada locale en la opción numberFormats de createI18n. Cada formato con nombre es un objeto de opciones de Intl.NumberFormat.

const i18n = createI18n({
  locale: "en",
  numberFormats: {
    en: {
      currency: { style: "currency", currency: "USD" },
      decimal: { style: "decimal", minimumFractionDigits: 2 },
    },
  },
})

La función n()

Formatee un número con n(value, formatName) desde useI18n(), o con $n en las plantillas. Utiliza el formato con nombre del locale activo.

const { n } = useI18n()

n(1234.5, "decimal") // "1,234.50" in en

Formato de divisas

El estilo currency añade el símbolo y la agrupación correctos. El código de divisa de la configuración del formato controla qué símbolo aparece.

const { n } = useI18n()

n(49.99, "currency") // "$49.99" in en

Mostrar divisas según el locale

Añada el mismo formato con nombre en cada locale, con la configuración adecuada para cada uno. Al cambiar locale, la agrupación, los separadores decimales y la posición del símbolo cambian automáticamente.

numberFormats: {
  en: { currency: { style: "currency", currency: "USD" } },
  tr: { currency: { style: "currency", currency: "TRY" } },
}
// n(49.99, "currency") => "$49.99" (en) or "TRY 49,99" style (tr)

Porcentajes

El estilo percent multiplica por 100 y añade el signo de porcentaje según el locale.

numberFormats: {
  en: { percent: { style: "percent", maximumFractionDigits: 1 } },
}

n(0.256, "percent") // "25.6%"

Configurar datetimeFormats

El formato de fechas funciona de forma similar al de los números. Defina formatos con nombre en datetimeFormats; cada uno es un objeto de opciones de Intl.DateTimeFormat.

const i18n = createI18n({
  locale: "en",
  datetimeFormats: {
    en: {
      short: { year: "numeric", month: "short", day: "numeric" },
      long: { dateStyle: "full", timeStyle: "short" },
    },
  },
})

La función d()

Formatee un objeto Date con d(value, formatName) (o con $d en las plantillas). Pase un objeto Date o una marca de tiempo.

const { d } = useI18n()

d(new Date("2026-05-29"), "short") // "May 29, 2026" in en

Fechas según el locale

Al igual que con los números, proporcione el formato de fecha con nombre para cada locale. La misma llamada produce un orden y nombres de meses localizados cuando cambia el locale.

datetimeFormats: {
  en: { short: { year: "numeric", month: "short", day: "numeric" } },
  tr: { short: { year: "numeric", month: "short", day: "numeric" } },
}
// d(date, "short") => "May 29, 2026" (en) / "29 May 2026" (tr)

Usar helpers de formato en las plantillas

En las plantillas, use $n y $d con un valor y el formato con nombre.

<template>
  <p>Total: {{ $n(total, "currency") }}</p>
  <p>Updated: {{ $d(updatedAt, "short") }}</p>
</template>

Opciones en línea para un caso puntual

Además de los formatos con nombre, puede pasar un objeto de opciones en línea como segundo argumento para aplicar un formato puntual sin definirlo en la configuración.

const { n, d } = useI18n()

n(0.5, { style: "percent" })           // "50%"
d(new Date(), { weekday: "long" })     // "Friday"

Comprobación rápida

Compruebe su comprensión del formateo según la configuración regional.

Resumen

Ha aprendido a formatear según la configuración regional:

  • Configure formatos con nombre en numberFormats y datetimeFormats para cada configuración regional.
  • n(value, name) / $n formatea números con estilos decimal, monetario y porcentual.
  • d(value, name) / $d formatea fechas.
  • Al cambiar locale, la agrupación de cifras, los separadores decimales, los símbolos y el orden de la fecha cambian automáticamente.
  • También puede pasar un objeto de opciones en línea para un formato puntual.

Preguntas frecuentes

¿La lección «Formato de números, fechas y divisas» es gratis?

Sí — el texto completo de «Formato de números, fechas y divisas» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Vue Academy, actualiza a CoddyKit PRO. El curso de Vue Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Formato de números, fechas y divisas»?

n() para números, d() para fechas, formatos de fecha y hora y numberFormats por locale Practicas Vue Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar Vue Academy?

No se requiere experiencia previa. Vue Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.

¿Cuánto tiempo toma la lección «Formato de números, fechas y divisas»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de Vue Academy?

Sí. Cada lección de Vue Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

  1. Configuración de vue-i18n y archivos de mensajes
  2. Composable useI18n y función t()
  3. Pluralización y mensajes vinculados
  4. Formato de números, fechas y divisas
← Volver a Vue Academy