# General Translation React SDKs (gt-react, gt-next): Num
URL: https://generaltranslation.com/zh/docs/react/reference/components/num.mdx
---

title: Num
description: 使用 General Translation gt-react 按当前区域设置格式化数字。Num 的 API 参考。

---

`<Num>` 组件用于渲染按当前区域设置格式化的数字。它是一个变量组件，可在 [`<T>`](/docs/react/reference/components/t) 中使用，也可单独使用。

*可用于 `gt-react`、`gt-next`、`gt-tanstack-start` 和 `gt-react-native`。示例从 `gt-react` 导入；请改为从你的框架对应的包中导入。*

## 概览 [#overview]

将数字作为子元素传入，`<Num>` 会按照当前区域设置进行格式化。

```tsx
<Num>{100}</Num>
// 输出：100
```

所有格式化都在本地使用 [`Intl.NumberFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat) 进行处理。

## 工作原理 [#how-it-works]

* **本地格式化。** 数字会在浏览器中通过 `Intl.NumberFormat` 重新格式化，其值绝不会发送到 General Translation API。
* **区域设置解析。** 默认情况下，当前区域设置会决定分组分隔符和小数分隔符。你也可以通过 `locales` 为每个实例单独覆盖。
* **在 `<T>` 内部。** 在 `<T>` 中使用时，请将每个动态数字都包裹在 `<Num>` 中，这样它会被视为变量，而不是可翻译文本。

## Props [#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) 规范的格式化选项，例如 `style`、`maximumFractionDigits` 和数字分组。

### `locales` [#locales]

**类型** `string[]` · **可选** · **默认值** 当前区域设置

用于格式化的区域设置。省略时，将使用当前区域设置。请参阅 [locales 参数](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#locales_argument)。

### `name` [#name]

**类型** `string` · **可选**

数字字段的可选名称，用作元数据。

## 示例 [#examples]

```tsx title="QuantityDisplay.tsx"
import { Num } from 'gt-react';

export default function Inventory({ item }) {
  return <Num>{item.quantity}</Num>; // [!code highlight]
}
```

```tsx title="CountDisplay.tsx"
import { Num } from 'gt-react';

export default function CountDisplay({ item }) {
  return <Num locales={['fr-FR']}>{item.count}</Num>; // [!code highlight]
}
```

```tsx title="DynamicPriceDisplay.tsx"
import { T, Num } from 'gt-react';

export default function DynamicPriceDisplay({ item }) {
  return (
    <T>
      There are <Num>{item.count}</Num> units available. // [!code highlight]
    </T>
  );
}
```

```tsx title="CustomFormat.tsx"
import { Num } from 'gt-react';

export default function CustomFormat({ number }) {
  return (
    <Num options={{ style: 'decimal', maximumFractionDigits: 2 }}>
      {number}
    </Num>
  );
}
```

## 注意事项 [#notes]

* `<Num>` 会根据当前区域设置对数字进行格式化。
* 在 `<T>` 内，将所有动态数字都包裹在 `<Num>` 中。