# General Translation React SDKs (gt-react, gt-next, gt-react-native): 数字和日期格式化
URL: https://generaltranslation.com/zh/docs/react/guides/formatting-variables.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: 如何在 React 中为每个区域设置格式化数字、货币、日期、相对时间和动态值。

不同的区域设置对数字、日期、时间和货币等变量有不同的格式惯例。

对于需要适应当前区域设置的值，请使用相应的组件；对于需要原样渲染的动态值，请使用 [`<Var>`](/docs/react/reference/components/var)。

## 选择合适的组件 [#choose]

* [`<Var>`](/docs/react/reference/components/var) 渲染动态值，不会对其进行翻译或格式化。
* [`<Num>`](/docs/react/reference/components/num) 会根据当前区域设置格式化数字、百分比和时间单位。
* [`<Currency>`](/docs/react/reference/components/currency) 会格式化金额和货币代码，但不会转换数值。
* [`<DateTime>`](/docs/react/reference/components/datetime) 会根据当前区域设置格式化绝对日期、时间或两者。
* [`<RelativeTime>`](/docs/react/reference/components/relative-time) 会格式化“昨天”或“3 天后”等相对时间表述。

这些组件在 React、Next.js、TanStack Start 和 React Native 中的行为相同。请从对应框架的软件包中导入它们。

## 使用 `<Var>` 插入原始值 [#var]

对于应完全按提供内容渲染的动态内容 (例如用户名、电子邮件地址或内部标识符) ，请使用 [`<Var>`](/docs/react/reference/components/var)。在 [`<T>`](/docs/react/reference/components/t) 内，它会使该值不参与翻译，同时让周围的句子保持可翻译。

<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>

## 格式化数字和货币 [#numbers]

使用 [`<Num>`](/docs/react/reference/components/num) 和 [`<Currency>`](/docs/react/reference/components/currency) 对数字和金额进行能感知区域设置的格式化。两者都与 [`<T>`](/docs/react/reference/components/t) 一样，从对应框架的软件包中导入。

### 格式化数字

使用 [`<Num>`](/docs/react/reference/components/num) 格式化数字分组、百分比和时间单位。传入 [`options`](/docs/react/reference/components/num#options) 可自定义输出。

```tsx
<T>
  <p>
    <Num>{count}</Num> 项下载已完成。
  </p>
</T>;
```

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

### 格式化货币

使用 [`<Currency>`](/docs/react/reference/components/currency)，并传入 ISO 4217 [`currency`](/docs/react/reference/components/currency#currency) 代码，例如 `USD` 或 `EUR`。

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

[`<Currency>`](/docs/react/reference/components/currency) 默认使用 `USD`，但传入 [`currency`](/docs/react/reference/components/currency#currency) 可显式指定货币单位。它会本地化货币符号、分组和小数显示；不会进行汇率换算。

传入 [`options`](/docs/react/reference/components/currency#options)，可控制货币显示、舍入和计数法等细节。

## 格式化日期和时间 [#dates]

绝对日期和时间请使用 [`<DateTime>`](/docs/react/reference/components/datetime)，相对时间值 (例如“3 天前。”) 请使用 [`<RelativeTime>`](/docs/react/reference/components/relative-time)。

### 格式化绝对日期或时间

使用 [`<DateTime>`](/docs/react/reference/components/datetime) 格式化日历日期和时间。传入 [`options`](/docs/react/reference/components/datetime#options) 以控制日期样式、时间样式和时区。

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

### 格式化相对时间

使用 [`<RelativeTime>`](/docs/react/reference/components/relative-time) 并传入 `Date`，即可自动选择合适的时间单位：

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

如果偏移量已知，请改为传入 [`value`](/docs/react/reference/components/relative-time#value) 和 [`unit`](/docs/react/reference/components/relative-time#unit)：

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

传入 [`options`](/docs/react/reference/components/relative-time#options)，可选择使用数字或自然语言表述，以及长、短或窄格式。

如需覆盖当前区域设置，请在要格式化的组件中指定：

* [`<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.