# General Translation React SDKs (gt-react, gt-next, gt-react-native): Форматирование чисел и дат
URL: https://generaltranslation.com/ru/docs/react/guides/formatting-variables.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: Как форматировать числа, валюты, даты, относительное время и динамические значения для каждой локали в React.

В разных локалях используются разные правила форматирования переменных, таких как числа, даты, время и валюта.

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

## Выберите подходящий компонент [#choose]

* [`<Var>`](/docs/react/reference/components/var) отображает динамическое значение без перевода и форматирования.
* [`<Num>`](/docs/react/reference/components/num) форматирует числа, проценты и единицы измерения в соответствии с активной локалью.
* [`<Currency>`](/docs/react/reference/components/currency) форматирует сумму и код валюты без конвертации значения.
* [`<DateTime>`](/docs/react/reference/components/datetime) форматирует абсолютную дату, время или и то и другое в соответствии с активной локалью.
* [`<RelativeTime>`](/docs/react/reference/components/relative-time) форматирует относительные выражения, например «вчера» или «через 3 дня».

Эти компоненты работают одинаково в React, Next.js, TanStack Start и React Native. Импортируйте их из пакета вашего фреймворка.

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

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

<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) для форматирования чисел и денежных сумм с учётом локали. Импортируйте оба компонента из пакета вашего фреймворка вместе с [`<T>`](/docs/react/reference/components/t).

### Форматирование числа

Используйте [`<Num>`](/docs/react/reference/components/num) для форматирования разрядов, процентов и единиц измерения. Передайте [`options`](/docs/react/reference/components/num#options), чтобы настроить вывод.

```tsx
<T>
  <p>
    <Num>{count}</Num> скачиваний завершено.
  </p>
</T>;
```

```tsx
<Num options={{ style: 'percent', maximumFractionDigits: 0 }}>
  {completionRate}
</Num>
```

### Форматирование валют

Используйте [`<Currency>`](/docs/react/reference/components/currency) с кодом ISO 4217 [`currency`](/docs/react/reference/components/currency#currency), например `USD` или `EUR`.

```tsx
<T>
  <p>
    Your total is <Currency currency="EUR">{total}</Currency>.
  </p>
</T>;
```

[`<Currency>`](/docs/react/reference/components/currency) по умолчанию использует `USD`, но при передаче [`currency`](/docs/react/reference/components/currency#currency) валюта указывается явно. Компонент локализует символ, разделители разрядов и десятичные знаки; курсы валют он не конвертирует.

Передайте [`options`](/docs/react/reference/components/currency#options), чтобы настроить такие параметры, как отображение валюты, округление и нотация.

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

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

### Форматирование абсолютной даты или времени

Используйте [`<DateTime>`](/docs/react/reference/components/datetime) для отображения календарных дат и времени. Передайте [`options`](/docs/react/reference/components/datetime#options), чтобы настроить стиль даты, стиль времени и часовой пояс.

```tsx
<T>
  <p>
    Published{' '}
    <DateTime
      options={{
        dateStyle: 'medium',
        timeStyle: 'short',
        timeZone: 'UTC',
      }}
    >
      {publishedAt}
    </DateTime>
    .
  </p>
</T>;
```

### Форматирование относительного времени

Используйте [`<RelativeTime>`](/docs/react/reference/components/relative-time) с объектом `Date`, чтобы автоматически выбрать подходящую единицу времени:

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

Для заданного смещения вместо этого передайте [`value`](/docs/react/reference/components/relative-time#value) и [`unit`](/docs/react/reference/components/relative-time#unit):

```tsx
<RelativeTime value={-3} unit="day" />
```

Передайте [`options`](/docs/react/reference/components/relative-time#options), чтобы выбрать числовую или естественную формулировку, а также полный, краткий или узкий стиль.

Чтобы переопределить активную локаль, укажите её для форматируемого компонента:

* [`<Num>` `locales`](/docs/react/reference/components/num#locales)
* [`<Currency>` `locales`](/docs/react/reference/components/currency#locales)
* [`<DateTime>` `locales`](/docs/react/reference/components/datetime#locales)
* [`<RelativeTime>` `locales`](/docs/react/reference/components/relative-time#locales)

## Next steps

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

## Sitemap

See the full [sitemap](https://generaltranslation.com/sitemap.md) for all pages.