# General Translation React SDKs (gt-react, gt-next): 数字和日期格式化
URL: https://generaltranslation.com/zh/docs/react/guides/formatting-variables.mdx
---

title: 数字和日期格式化
description: 如何在 React、Next.js、TanStack Start 和 React Native 中，将能感知区域设置的数字、货币、日期和变量插入到 General Translation 内容中。
related:
  links:
    - /docs/react/guides/handling-plurals-and-branches
    - /docs/react/guides/translating-jsx
    - /docs/react/guides/translating-strings
    - /docs/react/guides/managing-locales

---

已翻译内容中的动态值需要进行标记，这样它们才不会被发送去翻译；而格式化后的值也需要遵循读者的区域设置。General Translation 为这两种需求都提供了变量组件。这些组件在所有框架中都基于同一套核心实现——只有导入包不同。

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

对于需要按原样渲染的动态内容 (例如用户名) ，请使用 [`<Var>`](/docs/react/reference/components/var)。它会将该值标记为变量，从而让周围的文本保持可翻译。

<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) 对数字和金额进行能感知区域设置的格式化。两者都支持 `Intl` 选项，并且都与 [`<T>`](/docs/react/reference/components/t) 一样，从你的框架包中导入。

```tsx
<T>
  <p>You have <Num>{count}</Num> items totaling <Currency currency="USD">{total}</Currency>.</p>
</T>;
```

`<Currency>` 默认值为 `USD`；如需使用其他代码，请传入 `currency`。它会按区域设置格式化该值，但不会在不同货币之间进行换算。

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

绝对日期和时间请使用 [`<DateTime>`](/docs/react/reference/components/datetime)，相对时间值 (例如“3 天前”) 请使用 [`<RelativeTime>`](/docs/react/reference/components/relative-time)。两者都接受 `Intl` 格式化选项，并可选择覆盖 `locales`。

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

`<RelativeTime>` 也可以不传入日期，而是显式指定 `value` 和 `unit` (例如 `value={-3}` 且 `unit="day"`) 。

请参阅[组件参考](/docs/react/reference/components/num)，了解这些组件支持的全部 prop。
## Next steps

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