# General Translation React SDKs (gt-react, gt-next, gt-react-native): Formattazione di numeri e date
URL: https://generaltranslation.com/it/docs/react/guides/formatting-variables.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: Come formattare numeri, valute, date, tempo relativo e valori dinamici per ogni impostazione regionale in React.

Le diverse impostazioni regionali adottano convenzioni diverse per la formattazione di variabili quali numeri, date, orari e valute.

Utilizza il componente corrispondente per i valori che devono adattarsi all&#39;impostazione regionale attiva e [`<Var>`](/docs/react/reference/components/var) per i valori dinamici che devono essere renderizzati senza modifiche.

## Scegli il componente più adatto [#choose]

* [`<Var>`](/docs/react/reference/components/var) renderizza un valore dinamico senza tradurlo né formattarlo.
* [`<Num>`](/docs/react/reference/components/num) formatta numeri, percentuali e unità in base all&#39;impostazione regionale attiva.
* [`<Currency>`](/docs/react/reference/components/currency) formatta un importo e il codice valuta senza convertirne il valore.
* [`<DateTime>`](/docs/react/reference/components/datetime) formatta una data, un&#39;ora o entrambi in base all&#39;impostazione regionale attiva.
* [`<RelativeTime>`](/docs/react/reference/components/relative-time) formatta espressioni relative come &quot;ieri&quot; o &quot;tra 3 giorni&quot;.

Questi componenti hanno lo stesso comportamento in React, Next.js, TanStack Start e React Native. Importali dal package del tuo framework.

## Inserisci un valore non elaborato con `<Var>` [#var]

Usa [`<Var>`](/docs/react/reference/components/var) per i contenuti dinamici da visualizzare esattamente come forniti, ad esempio un nome utente, un indirizzo email o un identificatore. All&#39;interno di [`<T>`](/docs/react/reference/components/t), il valore resta escluso dalla traduzione, mentre la frase circostante rimane traducibile.

<Tabs items={['React', 'Next.js', 'TanStack Start', 'React Native']}>
  <Tab value="React">
    ```tsx
    import { T, Var } from 'gt-react';

    <T>
      <p>Signed in as <Var>{user.email}</Var></p>
    </T>;
    ```
  </Tab>

  <Tab value="Next.js">
    ```tsx
    import { T, Var } from 'gt-next';

    <T>
      <p>Signed in as <Var>{user.email}</Var></p>
    </T>;
    ```
  </Tab>

  <Tab value="TanStack Start">
    ```tsx
    import { T, Var } from 'gt-tanstack-start';

    <T>
      <p>Signed in as <Var>{user.email}</Var></p>
    </T>;
    ```
  </Tab>

  <Tab value="React Native">
    ```tsx
    import { T, Var } from 'gt-react-native';

    <T>
      <Text>Signed in as <Var>{user.email}</Var></Text>
    </T>;
    ```
  </Tab>
</Tabs>

## Formatta numeri e valute [#numbers]

Usa [`<Num>`](/docs/react/reference/components/num) e [`<Currency>`](/docs/react/reference/components/currency) per formattare numeri e importi monetari in base all&#39;impostazione regionale. Importa entrambi dal pacchetto del tuo framework insieme a [`<T>`](/docs/react/reference/components/t).

### Formattare un numero

Usa [`<Num>`](/docs/react/reference/components/num) per formattare separatori decimali, percentuali e unità. Passa [`options`](/docs/react/reference/components/num#options) per personalizzare l&#39;output.

```tsx
<T>
  <p>
    <Num>{count}</Num> download completati.
  </p>
</T>;
```

```tsx
<Num options={{ style: 'percent', maximumFractionDigits: 0 }}>
  {completionRate}
</Num>
```

### Formattare la valuta

Usa [`<Currency>`](/docs/react/reference/components/currency) con un codice [`currency`](/docs/react/reference/components/currency#currency) ISO 4217, ad esempio `USD` o `EUR`.

```tsx
<T>
  <p>
    Your total is <Currency currency="EUR">{total}</Currency>.
  </p>
</T>;
```

[`<Currency>`](/docs/react/reference/components/currency) usa `USD` per impostazione predefinita, ma passando [`currency`](/docs/react/reference/components/currency#currency) puoi specificare esplicitamente l&#39;unità desiderata. Localizza il simbolo, il raggruppamento e la visualizzazione dei decimali; non converte i tassi di cambio.

Passa [`options`](/docs/react/reference/components/currency#options) per controllare dettagli quali la visualizzazione della valuta, l&#39;arrotondamento e la notazione.

## Formattare date e orari [#dates]

Usa [`<DateTime>`](/docs/react/reference/components/datetime) per date e orari assoluti e [`<RelativeTime>`](/docs/react/reference/components/relative-time) per valori relativi come &quot;3 giorni fa.&quot;

### Formattare una data o un&#39;ora assoluta

Usa [`<DateTime>`](/docs/react/reference/components/datetime) per le date di calendario e gli orari. Passa [`options`](/docs/react/reference/components/datetime#options) per controllare lo stile di data e ora e il fuso orario.

```tsx
<T>
  <p>
    Pubblicato il{' '}
    <DateTime
      options={{
        dateStyle: 'medium',
        timeStyle: 'short',
        timeZone: 'UTC',
      }}
    >
      {publishedAt}
    </DateTime>
    .
  </p>
</T>;
```

### Formattare il tempo relativo

Usa [`<RelativeTime>`](/docs/react/reference/components/relative-time) con un valore `Date` per selezionare automaticamente l&#39;unità più appropriata:

```tsx
<T>
  <p>
    Published <RelativeTime>{publishedAt}</RelativeTime>.
  </p>
</T>;
```

Per un intervallo noto, passa invece [`value`](/docs/react/reference/components/relative-time#value) e [`unit`](/docs/react/reference/components/relative-time#unit):

```tsx
<RelativeTime value={-3} unit="day" />
```

Passa [`options`](/docs/react/reference/components/relative-time#options) per scegliere tra una formulazione numerica o naturale e uno stile esteso, breve o compatto.

Per ignorare l&#39;impostazione regionale attiva, scegli il componente che stai formattando:

* [`<Num>` `locales`](/docs/react/reference/components/num#locales)
* [`<Currency>` `locales`](/docs/react/reference/components/currency#locales)
* [`<DateTime>` `locales`](/docs/react/reference/components/datetime#locales)
* [`<RelativeTime>` `locales`](/docs/react/reference/components/relative-time#locales)

## Next steps

- /docs/react/guides/handling-plurals-and-branches
- /docs/react/guides/translating-jsx
- /docs/react/guides/translating-strings
- /docs/react/guides/managing-locales

## Sitemap

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