# General Translation Knowledge Base: ¿Cómo doy formato a números, fechas y monedas para cada configuración regional? URL: https://generaltranslation.com/es/kb/format-numbers-dates-currencies.mdx Docs index: https://generaltranslation.com/llms.txt Description: Da formato a cada valor cuando se renderiza la página, con la configuración regional del lector y la API Intl de JavaScript, y mantenlo fuera de la oración traducida. Los componentes ``, ``, `` y `` de General Translation hacen ambas cosas dentro de un ``, de modo que una sola traducción sirve para cualquier valor. Category: Formato según la configuración regional Last updated: 2026-10-21 Authors: Kevin Liu, Kevin Wu Published: 2026-10-21 Da formato a cada valor al renderizar, con la configuración regional del lector y la API `Intl` de JavaScript, que aplica la agrupación de dígitos, el separador decimal, la posición de la moneda y el orden de la fecha propios de cada configuración regional: 12.450,75 euros se escribe €12,450.75 en inglés y 12.450,75 € en alemán, y el 4 de agosto de 2026 se escribe 8/4/2026 en inglés de EE. UU. y 4.8.2026 en alemán. Lo difícil es la oración que rodea al valor. Se traduce de antemano, pero el valor solo existe al renderizar, así que cada traducción necesita un hueco reservado para él. Además, una fecha depende de la zona horaria, por lo que un servidor en UTC y un navegador en Los Ángeles pueden mostrar días distintos para el mismo instante. ## Video The video is narrated in English, with English captions. [How do I format numbers, dates and currencies for each locale?](https://caxecubb9c64cezv.public.blob.vercel-storage.com/films/kb-format-numbers-dates-currencies.mp4) (45 s) General Translation formats values for each locale with `Num`, `Currency` and `DateTime`. After `npx gt init`, `Num` groups digits and `Currency` formats an amount without converting it, `DateTime` formats dates and `RelativeTime` writes phrases such as three days ago, and `npx gt translate` writes the words around them in each language. ## Formas de dar formato a los valores para cada configuración regional | Enfoque | Lo que hace bien | Lo que te deja a ti | | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------- | | Solo la API `Intl` de JavaScript | Da formato a números, divisas, fechas y tiempos relativos según las convenciones de cada configuración regional, y viene integrada en el lenguaje | Traducir cada frase que contiene un valor, en cada idioma, y encajar en cada una el valor ya formateado | | Los formateadores de una biblioteca de internacionalización (i18n) ([`react-intl`](/kb/general-translation-vs-react-intl), `next-intl`, [`i18next`](/kb/general-translation-vs-i18next)) | Da formato al valor dentro de cada mensaje traducido, como `{total, number, ::currency/EUR}` en un mensaje ICU | Escribir cada mensaje en un archivo con claves para cada idioma y mantener esos archivos actualizados | | Una biblioteca de fechas (`date-fns`, `Day.js`) | Da formato a fechas y hace cálculos con ellas usando los datos de configuración regional que importas para cada idioma | Los números y las divisas, la carga de cada configuración regional y la traducción de cada frase en la que aparece la fecha | | General Translation ([``](/docs/react/reference/components/num), [``](/docs/react/reference/components/currency), [``](/docs/react/reference/components/datetime) y [``](/docs/react/reference/components/relative-time) dentro de [``](/docs/react/reference/components/t)) | Da formato a cada valor localmente con `Intl` según la configuración regional activa; la frase que lo rodea se traduce una sola vez por idioma, con un hueco reservado para el valor | Elegir el código de divisa ISO 4217 de cada importe y fijar la configuración regional, la zona horaria y `baseDate` en las páginas server-rendered | Usa solo `Intl` cuando un valor aparece aislado, como en una columna de precios. Usa los formateadores de tu biblioteca de i18n si los traductores mantienen tus mensajes en archivos con claves, y una biblioteca de fechas si ya dependes de ella para hacer cálculos con fechas. Usa los componentes de General Translation cuando los valores forman parte de frases que se publican en varios idiomas y cambian con cada lanzamiento. ## Dar formato a valores dentro de oraciones traducidas `gt-next` y `gt-react` de General Translation, así como los paquetes experimentales `gt-tanstack-start` y `gt-react-native`, incluyen un componente para cada tipo de valor. Para incluir un valor con formato en una oración traducida: 1. Envuelve la oración en [``](/docs/react/reference/components/t). 2. Envuelve cada valor en el componente que corresponda a su tipo: [``](/docs/react/reference/components/num) para números, porcentajes y unidades; [``](/docs/react/reference/components/currency) para un importe en una moneda ISO 4217 (sin convertirlo); [``](/docs/react/reference/components/datetime) para fechas y horas; y [``](/docs/react/reference/components/relative-time) para expresiones como «hace 3 días». ```tsx

Your total is {total}.

; ``` 3. Ejecuta [`npx gt translate`](/docs/cli/reference/commands/translate) para traducir la oración una sola vez por idioma. Cada componente deja su valor fuera de la traducción y le da formato localmente con `Intl`, sin enviarlo a la API de General Translation. ## Aplicaciones server-rendered y Vue Para evitar errores de hidratación en una aplicación server-rendered, fija la configuración regional y la opción `timeZone` en [``](/docs/react/reference/components/datetime), así como la configuración regional y un `baseDate` compartido en [``](/docs/react/reference/components/relative-time). Las [aplicaciones de Vue](/docs/vue/guides/formatting-variables) obtienen [``](/docs/vue/reference/components/num), [``](/docs/vue/reference/components/currency) y [``](/docs/vue/reference/components/datetime) de `gt-vue`. Consulta la guía [Dar formato a números y fechas](/docs/react/guides/formatting-variables) para ver todos los pasos. ## Related questions - [¿Cómo gestiono los plurales en React?](https://generaltranslation.com/es/kb/how-to-handle-plurals-in-react.mdx): Para gestionar los plurales en React, asigna a cada idioma una oración por cada forma plural y selecciónala con las reglas de plural de ese idioma, ya que el inglés tiene 2 formas, el ruso tiene 4 y el árabe tiene 6. El componente `` de General Translation en gt-react y gt-next recibe tus formas de origen, y General Translation genera las formas que necesita cada idioma de destino. - [¿Cómo traduzco cadenas fuera de JSX?](https://generaltranslation.com/es/kb/translate-strings-outside-jsx.mdx): Pasa cada cadena que no sea un hijo de JSX, como un marcador de posición o una constante en el ámbito del módulo, por una función de traducción en el lugar donde se renderiza. El hook useGT de General Translation devuelve esa función, y msg junto con useMessages traduce las constantes definidas fuera de un componente. - [¿Cómo traduzco texto condicional en JSX?](https://generaltranslation.com/es/kb/translate-conditional-jsx.mdx): Mantén la oración completa y traduce cada una de sus versiones, porque un ternario la divide en fragmentos que pierden su significado y su lugar en el orden de palabras de cada idioma. General Translation lo resuelve con `` dentro de ``, que traduce la oración como una sola unidad. - [¿Cómo traduzco una aplicación de React?](https://generaltranslation.com/es/kb/translate-react-app.mdx): Traducir una aplicación de React significa internacionalizar sus componentes para que se rendericen en el idioma del usuario y, después, traducir cada cadena a todos los idiomas que admitas. gt-react de General Translation traduce JSX en el mismo documento con el componente ``, y npx gt translate genera un archivo por idioma. ## Previous and next questions - Previous question: [¿Cómo agrego i18n a una aplicación de Next.js con App Router?](https://generaltranslation.com/es/kb/add-i18n-to-nextjs.mdx) - Next question: [¿Cómo internacionalizo una aplicación con Cursor o Claude Code?](https://generaltranslation.com/es/kb/ai-agent-i18n-setup.mdx) ## Sitemap See the [Knowledge Base sitemap](https://generaltranslation.com/es/kb/sitemap.md) for every article.