# vue: <Num>
URL: https://generaltranslation.com/ru/docs/vue/reference/components/num.mdx
---

title: "<Num>"
description: Форматирование числа для активной локали. Справочник API компонента <Num>.

---

Компонент `<Num>` форматирует обязательное числовое значение `value` с помощью `Intl.NumberFormat`. Используйте его отдельно или в качестве переменной времени выполнения внутри [`<T>`](/docs/vue/reference/components/t).

## Обзор [#overview]

Передайте число через `value` и оставьте компонент самозакрывающимся:

```vue
<Num :value="1234.5" />
<!-- en-US: 1,234.5 -->
```

Форматирование выполняется локально. Числовое значение не переводится и не включается в исходный текст для расширенного перевода.

## Как это работает [#how-it-works]

* Число передаётся непосредственно в `Intl.NumberFormat`.
* Строка должна содержать число целиком. Строки, состоящие только из пробельных символов, и `null` отображаются как пустые; некорректная числовая строка отображается без изменений.
* Дочерние элементы слота форматтера игнорируются. Всегда указывайте `value` и используйте самозакрывающийся тег.
* Компонент не добавляет HTML-обёртку.

### Разрешение локалей

Если активная локаль совпадает с настроенной локалью по умолчанию, при форматировании используется только она, а `locales` игнорируется. При любой другой активной локали автономный форматтер сначала использует явно заданные `locales`, затем активную локаль и, наконец, локаль по умолчанию. Повторяющиеся локали удаляются без изменения порядка.

Внутри [`<T>`](/docs/vue/reference/components/t) форматированием управляет расширенный перевод: резервный исходный контент использует локаль по умолчанию, а переведённый контент — сначала активную локаль, затем локаль по умолчанию. Явно заданный prop `locales` в этом случае игнорируется.

## Пропсы [#props]

| Пропс                 | Описание                                       | Тип                        | Необязательно | По умолчанию               |
| --------------------- | ---------------------------------------------- | -------------------------- | ------------- | -------------------------- |
| [`value`](#value)     | Числовое значение для форматирования.          | `number \| string \| null` | Нет           | —                          |
| [`options`](#options) | Параметры, передаваемые в `Intl.NumberFormat`. | `Intl.NumberFormatOptions` | Да            | `{}`                       |
| [`locales`](#locales) | Предпочтительные локали для форматирования.    | `string[]`                 | Да            | Порядок разрешения локалей |

### `value`

**Тип** `number | string | null` · **Обязательно**

Полное числовое значение, подлежащее форматированию. Числовые строки перед форматированием преобразуются с помощью `Number()`. Значения вроде `"12 items"` или `"1,234.5"` не анализируются частично и отображаются без изменений.

```vue
<Num :value="item.quantity" />
```

### `options`

**Тип** `Intl.NumberFormatOptions` · **Необязательно** · **По умолчанию** `{}`

Параметры, передаваемые реализации `Intl.NumberFormat` в среде выполнения JavaScript. Распространённые параметры:

| Параметр                   | Описание                                                                                        | Тип                                                           | Необязательно | По умолчанию                |
| -------------------------- | ----------------------------------------------------------------------------------------------- | ------------------------------------------------------------- | ------------- | --------------------------- |
| `localeMatcher`            | Алгоритм сопоставления локалей.                                                                 | `'lookup' \| 'best fit'`                                      | Да            | `'best fit'`                |
| `numberingSystem`          | Система нумерации, например `latn` или `arab`.                                                  | `string`                                                      | Да            | Зависит от локали           |
| `style`                    | Форматирование десятичных чисел, процентов, валюты или единиц измерения.                        | `'decimal' \| 'percent' \| 'currency' \| 'unit'`              | Да            | `'decimal'`                 |
| `currency`                 | Код ISO 4217, обязательный для стиля Currency.                                                  | `string`                                                      | Да            | —                           |
| `currencyDisplay`          | Способ отображения валюты.                                                                      | `'code' \| 'symbol' \| 'narrowSymbol' \| 'name'`              | Да            | `'symbol'`                  |
| `unit`                     | Идентификатор единицы измерения, обязательный для стиля единиц измерения, например `kilometer`. | `string`                                                      | Да            | —                           |
| `unitDisplay`              | Длина обозначения единицы измерения.                                                            | `'long' \| 'short' \| 'narrow'`                               | Да            | `'short'`                   |
| `minimumIntegerDigits`     | Минимальное количество цифр в целой части.                                                      | `number`                                                      | Да            | `1`                         |
| `minimumFractionDigits`    | Минимальное количество цифр в дробной части.                                                    | `number`                                                      | Да            | Зависит от стиля            |
| `maximumFractionDigits`    | Максимальное количество цифр в дробной части.                                                   | `number`                                                      | Да            | Зависит от стиля            |
| `minimumSignificantDigits` | Минимальное количество значащих цифр.                                                           | `number`                                                      | Да            | `1`                         |
| `maximumSignificantDigits` | Максимальное количество значащих цифр.                                                          | `number`                                                      | Да            | `21`                        |
| `useGrouping`              | Когда отображать разделители групп разрядов.                                                    | `boolean \| string`                                           | Да            | Зависит от нотации          |
| `notation`                 | Нотация числа.                                                                                  | `'standard' \| 'scientific' \| 'engineering' \| 'compact'`    | Да            | `'standard'`                |
| `compactDisplay`           | Длина обозначения компактной нотации.                                                           | `'short' \| 'long'`                                           | Да            | `'short'`                   |
| `signDisplay`              | Когда отображать знак.                                                                          | `'auto' \| 'always' \| 'exceptZero' \| 'negative' \| 'never'` | Да            | `'auto'`                    |
| `roundingMode`             | Направление округления.                                                                         | `string`                                                      | Да            | Зависит от среды выполнения |

Значения по умолчанию для количества цифр в дробной части зависят от выбранного `style`. Поддерживаемые поля и значения также могут различаться в зависимости от среды выполнения JavaScript. Полный набор параметров, определяемых средой выполнения, см. в [документации по параметрам `Intl.NumberFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#options).

### `locales`

**Тип** `string[]` · **Необязательно** · **По умолчанию** Порядок разрешения локалей

Предпочтительные коды локалей в формате BCP 47 для автономного форматирования. Они проверяются раньше активной локали и локали по умолчанию, но только если активная локаль не совпадает с настроенной локалью по умолчанию.

```vue
<Num :value="1234.5" :locales="['de-DE']" />
```

## Примеры [#examples]

```vue title="InventorySummary.vue"
<script setup lang="ts">
import { Num, T } from 'gt-vue';

defineProps<{ count: number; completionRate: number }>();
</script>

<template>
  <T>There are <Num :value="count" /> units available.</T>
  <p><Num :value="completionRate" :options="{ style: 'percent' }" /> complete</p>
</template>
```