# gt-next: General Translation Next.js SDK: Num
URL: https://generaltranslation.com/ru/docs/next/api/components/num.mdx
---
title: Num
description: Справка по API компонента Num
---

{/* СГЕНЕРИРОВАНО АВТОМАТИЧЕСКИ: Не редактируйте напрямую. Вместо этого измените шаблон в content/docs-templates/. */}


## Обзор

Компонент `<Num>` выводит строку с числом, отформатированным в соответствии с локалью пользователя, и поддерживает настройку параметров форматирования.

```jsx
<Num>{100}</Num>
// Вывод: 100
```

Все операции по форматированию выполняются локально с помощью библиотеки [`Intl.NumberFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat).


## Справочник

### Свойства

<TypeTable
  type={{
  "children?": {
      type: 'any',
      optional: true,
      default: 'undefined',
  },
  "name?": {
      type: 'string',
      optional: true,
      default: 'undefined',
  },
  "value?": {
      type: 'string | number',
      optional: true,
      default: 'undefined',
  },
  "options?": {
      type: 'Intl.NumberFormatOptions',
      optional: true,
      default: '{}',
  },
  "locales?": {
      type: 'string[]',
      optional: true,
      default: 'undefined',
  },
}}
/>

### Описание

| Свойство   | Описание                                                                                                                                                                                                                                                                                                               |
| ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `children` | Содержимое, которое отображается внутри компонента. Обычно это число, форматируемое в соответствии с текущей локалью и параметрами. Если указано, имеет приоритет над свойством `value`.                                                                                                                               |
| `name`     | Необязательное имя числового поля, используемое в метаданных.                                                                                                                                                                                                                                                          |
| `value`    | Значение числа по умолчанию. Может быть строкой или числом. Перед форматированием строки преобразуются в числа.                                                                                                                                                                                                        |
| `options`  | Необязательные параметры форматирования числа в соответствии со спецификацией [`Intl.NumberFormatOptions`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat). Используйте их, чтобы задать стиль форматирования, например валюту, точность десятичных знаков и т. д. |
| `locales`  | Необязательные локали, задающие локаль форматирования. Если они не указаны, используется локаль пользователя по умолчанию. Подробнее о том, как указывать локали, читайте [здесь](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#locales_argument).                             |

### Возвращает

`JSX.Element` с форматированным числом в виде строки.

***

## Примеры

### Базовый пример

В этом примере `item.quantity` будет отформатирован в соответствии с локалью пользователя.

```jsx title="QuantityDisplay.jsx" copy
import { Num } from 'gt-next';

export default function Inventory(item) {
  return (
    <Num> {item.quantity} </Num>  // [!code highlight]
  );
}
```


### Указание локали

По умолчанию локаль определяется настройками браузера пользователя,
но для компонента `<Num>` её можно задать явно.

```jsx title="PriceDisplay.jsx" copy
import { Num } from 'gt-next';

export default function CountDisplay(item) {
  return (
    <Num locales={['fr-FR']}> {item.count} </Num> // [!code highlight]
  );
}
```


### Перевод компонентов Num

Допустим, вы хотите, чтобы число было частью более длинного переводимого предложения.
Просто оберните содержимое в компоненты `<T>`.

```jsx title="DynamicPriceDisplay.jsx" copy
import { T, Num } from 'gt-next';

export default function DynamicPriceDisplay(item) {
  return (
    <T id="price">
      There are <Num> {item.count} </Num> units available. // [!code highlight]
    </T>
  );
}
```


### Настраиваемое форматирование

`<Num>` использует библиотеку [`Intl.NumberFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat) для форматирования.

```jsx
import { Num } from 'gt-next';

export default function CustomFormat(number) {
  return (
    <Num
      options={{ style: "decimal", maximumFractionDigits: 2 }}
    >
      {number}
    </Num>
  );
}
```

***


## Примечания

* Компонент `<Num>` используется для форматирования чисел в соответствии с локалью пользователя.
* Внутри компонента `<T>` обязательно оборачивайте все динамически подставляемые числа в компонент `<Num>`.

## Следующие шаги

* Подробнее о компоненте `<Num>` и других переменных компонентах, таких как `<Currency>`, `<DateTime>` и `<Var>`, а также примеры их использования см. в документации [Using Variable Components](/docs/next/guides/variables).