# Vue: `<Num>`
URL: https://generaltranslation.com/ru/docs/vue/reference/components/num.mdx
Docs index: https://generaltranslation.com/llms.txt
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'`         |
| `currencySign`             | Стандартная или бухгалтерская нотация для отрицательных денежных значений.                                         | `'standard' \| 'accounting'`                                                                                         | Да            | `'standard'`       |
| `unit`                     | Идентификатор единицы измерения, обязательный для стиля единиц измерения, например `kilometer`.                    | `string`                                                                                                             | Да            | —                  |
| `unitDisplay`              | Длина обозначения единицы измерения.                                                                               | `'long' \| 'short' \| 'narrow'`                                                                                      | Да            | `'short'`          |
| `minimumIntegerDigits`     | Минимальное количество цифр в целой части.                                                                         | `number`                                                                                                             | Да            | `1`                |
| `minimumFractionDigits`    | Минимальное количество цифр в дробной части.                                                                       | `number`                                                                                                             | Да            | Зависит от стиля   |
| `maximumFractionDigits`    | Максимальное количество цифр в дробной части.                                                                      | `number`                                                                                                             | Да            | Зависит от стиля   |
| `minimumSignificantDigits` | Минимальное количество значащих цифр.                                                                              | `number`                                                                                                             | Да            | `1`                |
| `maximumSignificantDigits` | Максимальное количество значащих цифр.                                                                             | `number`                                                                                                             | Да            | `21`               |
| `useGrouping`              | Когда отображать разделители групп разрядов.                                                                       | `boolean \| 'auto' \| 'always' \| 'min2'`                                                                            | Да            | Зависит от нотации |
| `notation`                 | Нотация числа.                                                                                                     | `'standard' \| 'scientific' \| 'engineering' \| 'compact'`                                                           | Да            | `'standard'`       |
| `compactDisplay`           | Длина обозначения компактной нотации.                                                                              | `'short' \| 'long'`                                                                                                  | Да            | `'short'`          |
| `signDisplay`              | Когда отображать знак.                                                                                             | `'auto' \| 'always' \| 'exceptZero' \| 'negative' \| 'never'`                                                        | Да            | `'auto'`           |
| `roundingMode`             | Направление округления.                                                                                            | `'ceil' \| 'floor' \| 'expand' \| 'trunc' \| 'halfCeil' \| 'halfFloor' \| 'halfExpand' \| 'halfTrunc' \| 'halfEven'` | Да            | `'halfExpand'`     |
| `roundingPriority`         | Разрешает конфликты между настройками дробных и значащих цифр.                                                     | `'auto' \| 'morePrecision' \| 'lessPrecision'`                                                                       | Да            | `'auto'`           |
| `roundingIncrement`        | Округляет до `1`, `2`, `5`, `10`, `20`, `25`, `50`, `100`, `200`, `250`, `500`, `1000`, `2000`, `2500` или `5000`. | `number`                                                                                                             | Да            | `1`                |
| `trailingZeroDisplay`      | Управляет отображением конечных нулей у целых значений.                                                            | `'auto' \| 'stripIfInteger'`                                                                                         | Да            | `'auto'`           |

Значения по умолчанию для количества цифр в дробной части зависят от выбранного `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>
```

## Sitemap

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