# General Translation Knowledge Base: Comment formater les nombres, les dates et les devises pour chaque paramètre régional ? URL: https://generaltranslation.com/fr/kb/format-numbers-dates-currencies.mdx Docs index: https://generaltranslation.com/llms.txt Description: Formatez chaque valeur au moment de l’affichage de la page, avec le paramètre régional du lecteur et l’API Intl de JavaScript, et laissez-la en dehors de la phrase traduite. Les composants ``, ``, `` et `` de General Translation font les deux à l’intérieur d’un `` : une seule traduction suffit ainsi pour toutes les valeurs. Category: Formatage selon les paramètres régionaux Last updated: 2026-10-21 Authors: Kevin Liu, Kevin Wu Published: 2026-10-21 Formatez chaque valeur au moment de l’affichage avec le paramètre régional du lecteur et l’API `Intl` de JavaScript, qui applique les conventions propres à chaque paramètre régional : regroupement des chiffres, séparateur décimal, position du symbole monétaire et ordre des éléments de la date. Ainsi, 12 450,75 euros s’écrit €12,450.75 en anglais et 12.450,75 € en allemand, et le 4 août 2026 s’écrit 8/4/2026 en anglais américain et 4.8.2026 en allemand. La phrase qui entoure la valeur est plus délicate. Elle est traduite à l’avance, alors que la valeur n’existe qu’au moment de l’affichage : chaque traduction doit donc lui réserver un emplacement. Une date dépend en outre d’un fuseau horaire, si bien qu’un serveur en UTC et un navigateur à Los Angeles peuvent afficher des jours différents pour un même instant. ## 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. ## Façons de formater les valeurs pour chaque paramètre régional | Approche | Ses points forts | Ce qui reste à votre charge | | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- | | L'API `Intl` de JavaScript seule | Intégrée au langage, elle met en forme les nombres, les devises, les dates et les temps relatifs selon les conventions de chaque paramètre régional | Traduire chaque phrase contenant une valeur, dans chaque langue, et y insérer la valeur formatée | | Les formateurs d'une bibliothèque d’i18n ([`react-intl`](/kb/general-translation-vs-react-intl), `next-intl`, [`i18next`](/kb/general-translation-vs-i18next)) | Mettent en forme la valeur à l'intérieur de chaque message traduit, comme `{total, number, ::currency/EUR}` dans un message ICU | Rédiger chaque message dans un fichier à clés pour chaque langue et maintenir ces fichiers à jour | | Une bibliothèque de dates (`date-fns`, `Day.js`) | Met en forme les dates et effectue des calculs sur celles-ci à l'aide des données de paramètres régionaux importées pour chaque langue | Les nombres et les devises, le chargement de chaque paramètre régional et la traduction de chaque phrase contenant la date | | General Translation ([``](/docs/react/reference/components/num), [``](/docs/react/reference/components/currency), [``](/docs/react/reference/components/datetime) et [``](/docs/react/reference/components/relative-time) à l'intérieur de [``](/docs/react/reference/components/t)) | Met en forme chaque valeur localement avec `Intl` pour la locale active ; la phrase qui l'entoure est traduite une seule fois par langue, avec un emplacement réservé à la valeur | Choisir le code de devise de chaque montant et fixer le paramètre régional, le fuseau horaire et `baseDate` sur les pages server-rendered | Utilisez `Intl` seul lorsqu'une valeur est isolée, comme dans une colonne de prix. Optez pour les formateurs de votre bibliothèque d’i18n lorsque des traducteurs gèrent vos messages dans des fichiers à clés, et pour une bibliothèque de dates si vous l'utilisez déjà pour les calculs de dates. Choisissez les composants de General Translation lorsque les valeurs figurent dans des phrases publiées en plusieurs langues et qui évoluent à chaque livraison. ## Formater des valeurs dans des phrases traduites Les bibliothèques `gt-next` et `gt-react` de General Translation, ainsi que les bibliothèques expérimentales `gt-tanstack-start` et `gt-react-native`, fournissent un composant par type de valeur. Pour insérer une valeur formatée dans une phrase traduite : 1. Encapsulez la phrase dans [``](/docs/react/reference/components/t). 2. Encapsulez chaque valeur dans le composant correspondant à son type : [``](/docs/react/reference/components/num) pour les nombres, les pourcentages et les unités ; [``](/docs/react/reference/components/currency) pour un montant dans une devise ISO 4217 (sans conversion) ; [``](/docs/react/reference/components/datetime) pour les dates et heures ; et [``](/docs/react/reference/components/relative-time) pour des expressions comme « il y a 3 jours ». ```tsx

Your total is {total}.

; ``` 3. Exécutez [`npx gt translate`](/docs/cli/reference/commands/translate) pour traduire la phrase une fois pour chaque langue. Chaque composant exclut sa valeur de la traduction et la met en forme localement avec `Intl`, sans jamais l'envoyer à l'API de General Translation. ## Applications server-rendered et Vue Pour éviter les erreurs d’hydratation dans une application server-rendered, fixez le paramètre régional et l’option `timeZone` sur [``](/docs/react/reference/components/datetime), ainsi que le paramètre régional et une `baseDate` commune sur [``](/docs/react/reference/components/relative-time). Les [applications Vue](/docs/vue/guides/formatting-variables) disposent de [``](/docs/vue/reference/components/num), [``](/docs/vue/reference/components/currency) et [``](/docs/vue/reference/components/datetime) via `gt-vue`. Le guide [Formatage des nombres et des dates](/docs/react/guides/formatting-variables) détaille toutes les étapes. ## Related questions - [Comment gérer les formes plurielles dans React ?](https://generaltranslation.com/fr/kb/how-to-handle-plurals-in-react.mdx): Pour gérer les formes plurielles dans React, fournissez à chaque langue une phrase par forme du pluriel et sélectionnez-la selon les règles de pluriel de cette langue, car l’anglais compte 2 formes, le russe 4 et l’arabe 6. Le composant `` de General Translation, disponible dans gt-react et gt-next, prend vos formes source, et General Translation génère les formes requises par chaque langue cible. - [Comment traduire des chaînes en dehors du JSX ?](https://generaltranslation.com/fr/kb/translate-strings-outside-jsx.mdx): Faites passer chaque chaîne qui n’est pas un enfant JSX, comme un espace réservé ou une constante définie au niveau du module, par une fonction de traduction à l’endroit où elle est affichée. Le hook useGT de General Translation renvoie cette fonction, et msg, combiné à useMessages, traduit les constantes définies en dehors d’un composant. - [Comment traduire du texte conditionnel en JSX ?](https://generaltranslation.com/fr/kb/translate-conditional-jsx.mdx): Gardez la phrase entière et traduisez chacune de ses versions, car un ternaire la découpe en fragments qui perdent leur sens et leur place dans l’ordre des mots propre à chaque langue. General Translation y parvient avec `` à l’intérieur de ``, qui traduit la phrase d’un seul tenant. - [Comment traduire une application React ?](https://generaltranslation.com/fr/kb/translate-react-app.mdx): Traduire une application React consiste à internationaliser ses composants pour qu’ils s’affichent dans la langue de l’utilisateur, puis à traduire chaque chaîne de caractères dans chacune des langues prises en charge. gt-react de General Translation traduit le JSX sur place dans le composant ``, et npx gt translate génère un fichier par langue. ## Previous and next questions - Previous question: [Comment ajouter l’i18n à une application Next.js App Router ?](https://generaltranslation.com/fr/kb/add-i18n-to-nextjs.mdx) - Next question: [Comment internationaliser une application avec Cursor ou Claude Code ?](https://generaltranslation.com/fr/kb/ai-agent-i18n-setup.mdx) ## Sitemap See the [Knowledge Base sitemap](https://generaltranslation.com/fr/kb/sitemap.md) for every article.