# General Translation React SDKs (gt-react, gt-next): Форматирование чисел и дат
URL: https://generaltranslation.com/ru/docs/react/guides/formatting-variables.mdx
---

title: Форматирование чисел и дат
description: Как вставлять в контент General Translation числа, валюты, даты и переменные с учетом локали в React, Next.js, TanStack Start и React Native.
related:
  links:
    - /docs/react/guides/handling-plurals-and-branches
    - /docs/react/guides/translating-jsx
    - /docs/react/guides/translating-strings
    - /docs/react/guides/managing-locales

---

Динамические значения внутри переведенного контента нужно помечать, чтобы они не отправлялись на перевод, а форматированные значения должны учитывать локаль пользователя. Для этого General Translation предоставляет компоненты переменных. Во всех фреймворках они используют одну и ту же базовую реализацию — отличается только пакет импорта.

## Вставьте необработанное значение с помощью `<Var>` [#var]

Используйте [`<Var>`](/docs/react/reference/components/var) для динамического контента, который должен отображаться как есть, например имени пользователя. Этот компонент помечает значение как переменную, чтобы окружающий текст оставался переводимым.

<Tabs items={['React', 'Next.js', 'TanStack Start', 'React Native']}>
  <Tab value="React">
    ```tsx
    import { T, Var } from 'gt-react';

    <T>
      <p>Signed in as <Var>{user.email}</Var></p>
    </T>;
    ```
  </Tab>

  <Tab value="Next.js">
    ```tsx
    import { T, Var } from 'gt-next';

    <T>
      <p>Signed in as <Var>{user.email}</Var></p>
    </T>;
    ```
  </Tab>

  <Tab value="TanStack Start">
    ```tsx
    import { T, Var } from 'gt-tanstack-start';

    <T>
      <p>Signed in as <Var>{user.email}</Var></p>
    </T>;
    ```
  </Tab>

  <Tab value="React Native">
    ```tsx
    import { T, Var } from 'gt-react-native';

    <T>
      <Text>Signed in as <Var>{user.email}</Var></Text>
    </T>;
    ```
  </Tab>
</Tabs>

## Форматирование чисел и валют [#numbers]

Используйте [`<Num>`](/docs/react/reference/components/num) и [`<Currency>`](/docs/react/reference/components/currency) для форматирования чисел и денежных сумм с учётом локали. Оба компонента поддерживают параметры `Intl` и импортируются из пакета вашего фреймворка вместе с [`<T>`](/docs/react/reference/components/t).

```tsx
<T>
  <p>You have <Num>{count}</Num> items totaling <Currency currency="USD">{total}</Currency>.</p>
</T>;
```

`<Currency>` по умолчанию использует `USD`; передайте `currency`, чтобы указать другой код. Значение форматируется в соответствии с локалью, но валюты не конвертируются.

## Форматирование дат и времени [#dates]

Используйте [`<DateTime>`](/docs/react/reference/components/datetime) для абсолютных даты и времени, а [`<RelativeTime>`](/docs/react/reference/components/relative-time) — для относительных значений, таких как &quot;3 дня назад&quot;. Оба компонента поддерживают параметры форматирования `Intl` и необязательное переопределение `locales`.

```tsx
<T>
  <p>Published <DateTime>{publishedAt}</DateTime> (<RelativeTime>{publishedAt}</RelativeTime>).</p>
</T>;
```

`<RelativeTime>` также может принимать явно заданные `value` и `unit` (например, `value={-3}` с `unit="day"`) вместо даты.

См. [справочник по компонентам](/docs/react/reference/components/num), чтобы узнать обо всех пропсах, которые поддерживают эти компоненты.
## Next steps

- /docs/react/guides/handling-plurals-and-branches
- /docs/react/guides/translating-jsx
- /docs/react/guides/translating-strings
- /docs/react/guides/managing-locales