# General Translation React SDKs (gt-react, gt-next, gt-react-native): URL: https://generaltranslation.com/it/docs/react/reference/components/num.mdx --- title: "" description: Formatta un numero in base all'impostazione regionale attiva. Riferimento API del componente . --- Il componente `` applica a un numero il raggruppamento delle cifre e la formattazione decimale in base all'impostazione regionale. È un componente variabile da usare all'interno di un [``](/docs/react/reference/components/t) oppure da solo. *Disponibile in `gt-react`, `gt-next`, `gt-tanstack-start` e `gt-react-native`.* ## Panoramica [#overview] Passa un numero come contenuto figlio e `` lo formatta in base all'impostazione regionale attiva. ```tsx {100} // Output: 100 ``` La formattazione viene gestita interamente in locale con [`Intl.NumberFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat). ## Come funziona [#how-it-works] * **Formattazione locale.** Il numero viene riformattato nel browser usando `Intl.NumberFormat`. Il suo valore non viene mai inviato all'API di General Translation. * **Risoluzione dell'impostazione regionale.** Per impostazione predefinita, l'impostazione regionale attiva determina i separatori delle migliaia e dei decimali. Puoi sovrascriverla per singola istanza con `locales`. * **All'interno di un [``](/docs/react/reference/components/t).** Se usato all'interno di un [``](/docs/react/reference/components/t), racchiudi ogni numero dinamico in un `` in modo che venga trattato come una variabile anziché come testo traducibile. ## Props [#props] | Prop | Descrizione | Type | Facoltativo | Predefinito | | ----------------------- | ----------------------------------------------------- | -------------------------- | ----------- | ----------------------------- | | [`children`](#children) | Il numero da formattare. | `number \| string` | No | — | | [`options`](#options) | Opzioni di `Intl.NumberFormat`. | `Intl.NumberFormatOptions` | Sì | `{}` | | [`locales`](#locales) | Impostazione regionale da usare per la formattazione. | `string[]` | Sì | Impostazione regionale attiva | | [`name`](#name) | Nome della variabile per la voce. | `string` | Sì | — | ### `children` [#children] **Tipo** `number | string` · **Obbligatorio** Il numero da formattare. Le stringhe vengono convertite in numeri prima della formattazione. ### `options` [#options] **Tipo** `Intl.NumberFormatOptions` · **Facoltativo** · **Predefinito** `{}` La prop accetta [`Intl.NumberFormatOptions`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#options). Tra le opzioni più comuni: | Opzione | Descrizione | Tipo | Facoltativo | Predefinito | | -------------------------- | ----------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------- | ----------- | ----------------------------------------- | | `localeMatcher` | Algoritmo di matching dell'impostazione regionale. | `'lookup' \| 'best fit'` | Sì | `'best fit'` | | `numberingSystem` | Sistema di numerazione, ad esempio `latn` o `arab`. | `string` | Sì | `'latn'` | | `style` | Formattazione come numero decimale, valuta, percentuale o unità. | `'decimal' \| 'currency' \| 'percent' \| 'unit'` | Sì | `'decimal'` | | `currency` | Codice valuta ISO 4217. Obbligatorio quando `style` è `'currency'`. | `string` | Sì | — | | `currencyDisplay` | Modalità di visualizzazione della valuta. | `'code' \| 'symbol' \| 'narrowSymbol' \| 'name'` | Sì | `'symbol'` | | `currencySign` | Notazione standard o contabile per valori monetari negativi. | `'standard' \| 'accounting'` | Sì | `'standard'` | | `unit` | Identificatore dell'unità, ad esempio `kilometer` o `megabyte`. Obbligatorio quando `style` è `'unit'`. | `string` | Sì | — | | `unitDisplay` | Lunghezza dell'etichetta dell'unità. | `'long' \| 'short' \| 'narrow'` | Sì | `'short'` | | `minimumIntegerDigits` | Numero minimo di cifre intere; i valori più brevi vengono completati con zeri iniziali. | `number` (`1`–`21`) | Sì | `1` | | `minimumFractionDigits` | Numero minimo di cifre dopo il separatore decimale. | `number` (`0`–`100`) | Sì | Dipende dallo stile | | `maximumFractionDigits` | Numero massimo di cifre dopo il separatore decimale. | `number` (`0`–`100`) | Sì | Dipende dallo stile | | `minimumSignificantDigits` | Numero minimo di cifre significative. | `number` (`1`–`21`) | Sì | `1` | | `maximumSignificantDigits` | Numero massimo di cifre significative. | `number` (`1`–`21`) | Sì | `21` | | `roundingPriority` | Se hanno priorità le cifre frazionarie o quelle significative. | `'auto' \| 'morePrecision' \| 'lessPrecision'` | Sì | `'auto'` | | `roundingIncrement` | Incremento utilizzato al livello di arrotondamento selezionato. | `1 \| 2 \| 5 \| 10 \| 20 \| 25 \| 50 \| 100 \| 200 \| 250 \| 500 \| 1000 \| 2000 \| 2500 \| 5000` | Sì | `1` | | `roundingMode` | Direzione usata per l'arrotondamento. | `'ceil' \| 'floor' \| 'expand' \| 'trunc' \| 'halfCeil' \| 'halfFloor' \| 'halfExpand' \| 'halfTrunc' \| 'halfEven'` | Sì | `'halfExpand'` | | `trailingZeroDisplay` | Se mantenere gli zeri finali nei numeri interi. | `'auto' \| 'stripIfInteger'` | Sì | `'auto'` | | `notation` | Notazione standard, scientifica, ingegneristica o compatta. | `'standard' \| 'scientific' \| 'engineering' \| 'compact'` | Sì | `'standard'` | | `compactDisplay` | Etichette estese o brevi per la notazione compatta. | `'short' \| 'long'` | Sì | `'short'` | | `useGrouping` | Quando visualizzare i separatori delle migliaia. | `boolean \| 'always' \| 'auto' \| 'min2'` | Sì | `'auto'`; `'min2'` con notazione compatta | | `signDisplay` | Quando visualizzare il segno positivo o negativo. | `'auto' \| 'always' \| 'exceptZero' \| 'negative' \| 'never'` | Sì | `'auto'` | * I valori predefiniti per le cifre decimali dipendono da `style` e, per le valute, dalle relative unità minori standard. * `compactDisplay` si applica solo quando `notation` è impostato su `'compact'`. * `roundingIncrement` non può essere combinato con l'arrotondamento per cifre significative né con un valore di `roundingPriority` diverso da `'auto'`. * Le unità supportate, i sistemi di numerazione, i campi di arrotondamento e i valori delle opzioni dipendono dal runtime JavaScript. Consulta la [documentazione delle opzioni di `Intl.NumberFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#options) per conoscere le opzioni più recenti disponibili e il comportamento del runtime. ### `locales` [#locales] **Tipo** `string[]` · **Facoltativo** · **Predefinito** Impostazione regionale attiva Impostazioni regionali da utilizzare per la formattazione. Se omesso, viene utilizzata l'impostazione regionale attiva. Vedi l'[argomento locales](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#locales_argument). ### `name` [#name] **Type** `string` · **Facoltativo** Un nome facoltativo per il campo numerico, utilizzato come metadato. ## Esempi [#examples] *Gli esempi importano da `gt-react`; importa invece dal pacchetto del tuo framework.* ```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} ); } ``` ## Note [#notes] * `` formatta i numeri in base all'impostazione regionale attiva. * All'interno di un [``](/docs/react/reference/components/t), racchiudi tutti i numeri dinamici in un tag ``.