# General Translation Knowledge Base: Как форматировать числа, даты и валюты для каждой локали? URL: https://generaltranslation.com/ru/kb/format-numbers-dates-currencies.mdx Docs index: https://generaltranslation.com/llms.txt Description: Форматируйте каждое значение при рендеринге страницы с учётом локали читателя с помощью JavaScript Intl API и не включайте его в переводимое предложение. Компоненты General Translation ``, ``, `` и `` делают и то и другое внутри ``, поэтому один перевод подходит для любого значения. Category: Форматирование с учётом локали Last updated: 2026-10-21 Authors: Kevin Liu, Kevin Wu Published: 2026-10-21 Форматируйте каждое значение при рендеринге с учётом локали читателя с помощью JavaScript `Intl` API. Он применяет принятые в каждой локали группировку разрядов, десятичный разделитель, положение символа валюты и порядок элементов даты: 12 450,75 евро в английском записывается как €12,450.75, а в немецком — как 12.450,75 €; 4 августа 2026 года в американском английском — это 8/4/2026, а в немецком — 4.8.2026. С предложением вокруг значения всё сложнее. Его переводят заранее, а значение появляется только при рендеринге, поэтому в каждом переводе для него нужно предусмотреть место. Кроме того, дата зависит от часового пояса, так что сервер в UTC и браузер в Лос-Анджелесе могут показать для одного и того же момента разные дни. ## 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 с) 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. ## Способы форматирования значений для каждой локали | Подход | Сильные стороны | Что остаётся на вас | | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------- | | Только API `Intl` в JavaScript | Форматирует числа, валюты, даты и относительное время по правилам каждой локали; встроен в язык | Перевод каждого предложения, содержащего значение, на каждый язык и встраивание в него отформатированного значения | | Форматтеры библиотеки интернационализации (i18n) ([`react-intl`](/kb/general-translation-vs-react-intl), `next-intl`, [`i18next`](/kb/general-translation-vs-i18next)) | Форматируют значение внутри каждого переведённого сообщения, например `{total, number, ::currency/EUR}` в сообщении ICU | Написание каждого сообщения в файле с ключами для каждого языка и поддержка этих файлов в актуальном состоянии | | Библиотека для работы с датами (`date-fns`, `Day.js`) | Форматирует даты и выполняет с ними вычисления, используя данные локали, импортируемые отдельно для каждого языка | Числа и валюты, загрузка каждой локали и перевод каждого предложения, в котором встречается дата | | General Translation ([``](/docs/react/reference/components/num), [``](/docs/react/reference/components/currency), [``](/docs/react/reference/components/datetime) и [``](/docs/react/reference/components/relative-time) внутри [``](/docs/react/reference/components/t)) | Форматирует каждое значение локально с помощью `Intl` для активной локали; окружающее предложение переводится один раз для каждого языка, а для значения в нём оставляется слот | Выбор кода валюты для каждой суммы и фиксация локали, часового пояса и `baseDate` на страницах, отрисованных на сервере | Используйте только `Intl`, когда значение выводится отдельно, например в столбце цен. Форматтеры библиотеки интернационализации подойдут, если переводчики ведут сообщения в файлах с ключами, а библиотека для работы с датами — если вы уже используете её для вычислений с датами. Компоненты General Translation стоит выбрать, когда значения находятся внутри предложений, которые выходят на нескольких языках и меняются с каждым релизом. ## Форматирование значений внутри переводимых предложений Библиотеки `gt-next`, `gt-react`, а также экспериментальные `gt-tanstack-start` и `gt-react-native` от General Translation предоставляют отдельный компонент для каждого типа значений. Чтобы вставить отформатированное значение в переводимое предложение: 1. Оберните предложение в [``](/docs/react/reference/components/t). 2. Оберните каждое значение в компонент, соответствующий его типу: [``](/docs/react/reference/components/num) — для чисел, процентов и единиц измерения; [``](/docs/react/reference/components/currency) — для суммы в валюте по стандарту ISO 4217 (без конвертации); [``](/docs/react/reference/components/datetime) — для дат и времени; [``](/docs/react/reference/components/relative-time) — для фраз вроде «3 дня назад». ```tsx

Your total is {total}.

; ``` 3. Выполните [`npx gt translate`](/docs/cli/reference/commands/translate), чтобы перевести предложение — по одному разу для каждого языка. Каждый компонент не включает своё значение в перевод и форматирует его локально с помощью `Intl`, не отправляя в API General Translation. ## Приложения с серверным рендерингом и Vue Чтобы избежать ошибок гидратации в приложении с серверным рендерингом, зафиксируйте локаль и опцию `timeZone` у [``](/docs/react/reference/components/datetime), а также локаль и общий `baseDate` у [``](/docs/react/reference/components/relative-time). В [приложениях на Vue](/docs/vue/guides/formatting-variables) компоненты [``](/docs/vue/reference/components/num), [``](/docs/vue/reference/components/currency) и [``](/docs/vue/reference/components/datetime) импортируются из `gt-vue`. Пошаговые инструкции приведены в руководстве [Форматирование чисел и дат](/docs/react/guides/formatting-variables). ## Related questions - [Как работать с формами множественного числа в React?](https://generaltranslation.com/ru/kb/how-to-handle-plurals-in-react.mdx): Чтобы работать с формами множественного числа в React, задайте для каждого языка по одному предложению на каждую форму множественного числа и выбирайте нужное по правилам множественного числа этого языка — ведь в английском 2 формы, в русском 4, а в арабском 6. Компонент `` от General Translation в gt-react и gt-next принимает формы на исходном языке, а General Translation генерирует формы, нужные каждому языку перевода. - [Как перевести строки вне JSX?](https://generaltranslation.com/ru/kb/translate-strings-outside-jsx.mdx): Пропускайте каждую строку, которая не является дочерним элементом JSX (например, плейсхолдер или константу в области видимости модуля), через функцию перевода в том месте, где выполняется её рендеринг. Такую функцию возвращает хук useGT от General Translation, а msg вместе с useMessages переводит константы, определённые вне компонента. - [Как перевести условный текст в JSX?](https://generaltranslation.com/ru/kb/translate-conditional-jsx.mdx): Не разбивайте предложение и переводите каждый его вариант целиком, ведь тернарный оператор дробит его на фрагменты, которые теряют смысл и своё место в порядке слов каждого языка. В General Translation для этого используется `` внутри ``, который переводит предложение как единое целое. - [Как перевести React-приложение?](https://generaltranslation.com/ru/kb/translate-react-app.mdx): Перевод React-приложения состоит из двух этапов — интернационализации компонентов, чтобы они отображались на языке пользователя, и перевода каждой строки на все поддерживаемые языки. gt-react от General Translation переводит JSX на месте в компоненте ``, а npx gt translate создаёт по одному файлу на каждый язык. ## Previous and next questions - Previous question: [Как проверять и редактировать переводы?](https://generaltranslation.com/ru/kb/review-translations.mdx) - Next question: [Что делает агент Locadex?](https://generaltranslation.com/ru/kb/what-is-locadex.mdx) ## Sitemap See the [Knowledge Base sitemap](https://generaltranslation.com/ru/kb/sitemap.md) for every article.