# General Translation React SDKs (gt-react, gt-next, gt-react-native): `` URL: https://generaltranslation.com/ru/docs/react/reference/components/num.mdx Docs index: https://generaltranslation.com/llms.txt Description: Форматирует число для активной локали. Справочник API для компонента ``. Компонент `` применяет к числу форматирование десятичных знаков и группировку разрядов с учетом локали. Это компонент переменной, который можно использовать внутри [``](/docs/react/reference/components/t) или отдельно. *Доступно в `gt-react`, `gt-next`, `gt-tanstack-start` и `gt-react-native`.* ## Обзор [#overview] Передайте число в качестве children, и `` отформатирует его в соответствии с активной локалью. ```tsx {100} // Вывод: 100 ``` Все форматирование выполняется локально с помощью [`Intl.NumberFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat). ## Как это работает [#how-it-works] * **Локальное форматирование.** Число форматируется в браузере с помощью `Intl.NumberFormat`. Его значение никогда не отправляется в API General Translation. * **Определение локали.** По умолчанию активная локаль задаёт разделители групп разрядов и десятичный разделитель. При необходимости это можно переопределить для конкретного экземпляра с помощью `locales`. * **Внутри [``](/docs/react/reference/components/t).** При использовании внутри [``](/docs/react/reference/components/t) оборачивайте каждое динамическое число в ``, чтобы оно обрабатывалось как переменная, а не как переводимый текст. ## Пропсы [#props] | Prop | Описание | Type | Необязательно | По умолчанию | | ----------------------- | ------------------------------------- | -------------------------- | ------------- | --------------- | | [`children`](#children) | Число для форматирования. | `number \| string` | Нет | — | | [`options`](#options) | Параметры `Intl.NumberFormat`. | `Intl.NumberFormatOptions` | Да | `{}` | | [`locales`](#locales) | Переопределяет локаль форматирования. | `string[]` | Да | Активная локаль | | [`name`](#name) | Имя переменной для записи. | `string` | Да | — | ### `children` [#children] **Тип** `number | string` · **Обязательно** Число, которое нужно отформатировать. Строки перед форматированием преобразуются в числа. ### `options` [#options] **Тип** `Intl.NumberFormatOptions` · **Необязательно** · **По умолчанию** `{}` Свойство принимает [`Intl.NumberFormatOptions`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#options). К распространённым параметрам относятся: | Параметр | Описание | Тип | Необязательно | По умолчанию | | -------------------------- | ------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------- | ------------- | ---------------------------------------- | | `localeMatcher` | Алгоритм сопоставления локалей. | `'lookup' \| 'best fit'` | Да | `'best fit'` | | `numberingSystem` | Система нумерации, например `latn` или `arab`. | `string` | Да | `'latn'` | | `style` | Форматирование обычных чисел, валют, процентов или единиц измерения. | `'decimal' \| 'currency' \| 'percent' \| 'unit'` | Да | `'decimal'` | | `currency` | Код валюты по ISO 4217. Обязательно, если `style` имеет значение `'currency'`. | `string` | Да | — | | `currencyDisplay` | Способ отображения валюты. | `'code' \| 'symbol' \| 'narrowSymbol' \| 'name'` | Да | `'symbol'` | | `currencySign` | Стандартное или бухгалтерское обозначение отрицательных денежных сумм. | `'standard' \| 'accounting'` | Да | `'standard'` | | `unit` | Идентификатор единицы измерения, например `kilometer` или `megabyte`. Обязательно, если `style` имеет значение `'unit'`. | `string` | Да | — | | `unitDisplay` | Ширина обозначения единицы измерения. | `'long' \| 'short' \| 'narrow'` | Да | `'short'` | | `minimumIntegerDigits` | Минимальное количество цифр в целой части; более короткие значения дополняются нулями. | `number` (`1`–`21`) | Да | `1` | | `minimumFractionDigits` | Минимальное количество цифр после десятичного разделителя. | `number` (`0`–`100`) | Да | Зависит от стиля | | `maximumFractionDigits` | Максимальное количество цифр после десятичного разделителя. | `number` (`0`–`100`) | Да | Зависит от стиля | | `minimumSignificantDigits` | Минимальное количество значащих цифр. | `number` (`1`–`21`) | Да | `1` | | `maximumSignificantDigits` | Максимальное количество значащих цифр. | `number` (`1`–`21`) | Да | `21` | | `roundingPriority` | Определяет, что имеет приоритет: дробные или значащие цифры. | `'auto' \| 'morePrecision' \| 'lessPrecision'` | Да | `'auto'` | | `roundingIncrement` | Шаг округления для выбранного разряда. | `1 \| 2 \| 5 \| 10 \| 20 \| 25 \| 50 \| 100 \| 200 \| 250 \| 500 \| 1000 \| 2000 \| 2500 \| 5000` | Да | `1` | | `roundingMode` | Направление округления. | `'ceil' \| 'floor' \| 'expand' \| 'trunc' \| 'halfCeil' \| 'halfFloor' \| 'halfExpand' \| 'halfTrunc' \| 'halfEven'` | Да | `'halfExpand'` | | `trailingZeroDisplay` | Определяет, сохранять ли конечные нули у целых чисел. | `'auto' \| 'stripIfInteger'` | Да | `'auto'` | | `notation` | Стандартная, научная, инженерная или компактная запись числа. | `'standard' \| 'scientific' \| 'engineering' \| 'compact'` | Да | `'standard'` | | `compactDisplay` | Полные или сокращённые обозначения для компактной записи. | `'short' \| 'long'` | Да | `'short'` | | `useGrouping` | Когда отображать разделители групп разрядов. | `boolean \| 'always' \| 'auto' \| 'min2'` | Да | `'auto'`; `'min2'` при компактной записи | | `signDisplay` | Когда отображать знак числа. | `'auto' \| 'always' \| 'exceptZero' \| 'negative' \| 'never'` | Да | `'auto'` | * Значения по умолчанию для количества дробных разрядов зависят от `style`, а для валют — от стандартного количества знаков после запятой. * `compactDisplay` применяется только при значении `notation`, равном `'compact'`. * `roundingIncrement` нельзя сочетать с округлением по значащим цифрам или со значением `roundingPriority`, отличным от `'auto'`. * Поддерживаемые единицы измерения, системы нумерации, параметры округления и значения параметров зависят от среды выполнения JavaScript. Актуальные доступные параметры и сведения о поведении среды выполнения см. в [документации по параметрам `Intl.NumberFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#options). ### `locales` [#locales] **Тип** `string[]` · **Необязательный** · **По умолчанию** Активная локаль Локали, для которых выполняется форматирование. Если параметр не указан, используется активная локаль. См. [аргумент locales](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#locales_argument). ### `name` [#name] **Тип** `string` · **Необязательно** Необязательное имя числового поля, используемое в метаданных. ## Примеры [#examples] *В примерах импортируется `gt-react`; вместо него импортируйте пакет для вашего фреймворка.* ```tsx title="QuantityDisplay.tsx" import { Num } from 'gt-react'; export default function Inventory({ item }) { return {item.quantity}; // [!code highlight] } ``` ```tsx title="CountDisplay.tsx" import { Num } from 'gt-react'; export default function CountDisplay({ item }) { return {item.count}; // [!code highlight] } ``` ```tsx title="DynamicPriceDisplay.tsx" import { T, Num } from 'gt-react'; export default function DynamicPriceDisplay({ item }) { return ( There are {item.count} units available. // [!code highlight] ); } ``` ```tsx title="CustomFormat.tsx" import { Num } from 'gt-react'; export default function CustomFormat({ number }) { return ( {number} ); } ``` ## Заметки [#notes] * `` форматирует числа в соответствии с активной локалью. * Внутри [``](/docs/react/reference/components/t) оборачивайте все динамические числа в ``. ## Sitemap See the full [sitemap](https://generaltranslation.com/sitemap.md) for all pages.