<Num>

概述

<Num> 组件会根据用户的本地语言环境渲染格式化后的数字字符串，并且可以通过格式化选项进行自定义。

<Num>{100}</Num>
// Output: 100

所有的重新格式化操作都在本地通过 Intl.NumberFormat 库完成。

参考

属性

Prop	Type	Default
`locales??`	`string[]`	`undefined`
`options??`	`Intl.NumberFormatOptions`	`{}`
`value??`	`string \| number`	`undefined`
`name??`	`string`	`undefined`
`children??`	`any`	`undefined`

描述

属性	描述
`children`	组件内部渲染的内容。通常为一个数字，将根据当前的本地化和选项进行格式化。如果提供了该属性，则优先于 `value` 属性。
`name`	数字字段的可选名称，用于元数据目的。
`value`	数字的默认值。可以是字符串或数字。字符串会在格式化前被解析为数字。
`options`	数字的可选格式化选项，遵循 `Intl.NumberFormatOptions` 规范。可用于定义样式，如货币、精度等。
`locales`	可选的本地化设置，用于指定格式化所用的语言环境。如果未提供，则使用用户的默认语言环境。关于如何指定 locales 的更多信息请参见此处。

返回值

包含格式化数字字符串的 JSX.Element。

示例

基本示例

在此示例中，item.quantity 将根据用户的本地化设置进行重新格式化。

QuantityDisplay.jsx

import { Num } from 'gt-react';

export default function Inventory(item) {
  return (
    <Num> {item.quantity} </Num>  
  );
}

指定本地化

默认情况下，本地化设置由用户的浏览器设置决定，但你也可以为 <Num> 组件显式设置 locale。

PriceDisplay.jsx

import { Num } from 'gt-react';

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

翻译 `<Num>` 组件

假设你希望数字出现在需要翻译的长句中。只需在内容外层添加 <T> 组件即可。

DynamicPriceDisplay.jsx

import { T, Num } from 'gt-react';

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

自定义格式化

<Num> 使用 Intl.NumberFormat 库进行格式化。

import { Num } from 'gt-react';

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

注意事项

<Num> 组件用于根据用户的语言环境格式化数字。
当在 <T> 组件内部时，请确保将所有动态数字包裹在 <Num> 组件中。

后续步骤

有关 <Num> 组件以及其他变量组件如 <Currency>、<DateTime> 和 <Var> 的更多详细信息和使用示例，请参阅使用变量组件文档。

<Num>

在本页面