Components
<Num>
<Num> 组件 API 参考
概述
<Num> 组件会按照用户的 locale 输出格式化的数字字符串，并可通过 formatting options 进行自定义。
<Num>{100}</Num>
// 输出：100所有重格式化操作均在本地完成，使用 Intl.NumberFormat 库。
参考资料
Props
Prop
Type
描述
| Prop | 描述 |
|---|---|
children | 组件内部要渲染的内容。通常是数字，会根据当前的 locale 和 options 进行格式化。如提供，则优先于 value 属性。 |
name | 数字字段的可选名称，用于元数据。 |
value | 数值的默认值。可以是字符串或数字。字符串会在格式化前解析为数字。 |
options | 可选的数字格式化 options，遵循 Intl.NumberFormatOptions 规范。可用于定义货币、小数精度等样式。 |
locales | 可选的 locales，用于指定格式化所用的 locale。若未提供，则使用用户的默认 locale。有关指定 locales 的更多信息，请参阅此处。 |
返回值
一个 JSX.Element，其中包含格式化后的数字字符串。
示例
基本示例
在此示例中，item.quantity 将根据用户的 locale 进行重新格式化。
import { Num } from 'gt-next';
export default function Inventory(item) {
return (
<Num> {item.quantity} </Num> // [!代码 高亮]
);
}指定 locales
默认情况下，locales 由用户的浏览器设置决定，
但你也可以为 <Num> 组件显式指定 locale。
import { Num } from 'gt-next';
export default function CountDisplay(item) {
return (
<Num locales={['fr-FR']}> {item.count} </Num>
);
}翻译 <Num> 组件
假设你想在一段更长、可翻译的句子中包含这个数字。
只需在内容外层包裹 <T> 组件即可。
import { T, Num } from 'gt-next';
export default function DynamicPriceDisplay(item) {
return (
<T id="price">
当前可用数量：<Num> {item.count} </Num>。 // [!code highlight]
</T>
);
}自定义格式
<Num> 使用 Intl.NumberFormat 库进行格式化。
import { Num } from 'gt-next';
export default function CustomFormat(number) {
return (
<Num
options={{ style: "decimal", maximumFractionDigits: 2 }}
>
{number}
</Num>
);
}说明
<Num>组件用于根据用户的 locale 对数字进行格式化。- 当处于
<T>组件内部时，请确保将所有动态数字都包裹在<Num>组件中。
后续步骤
- 如需了解
<Num>组件及其他变量组件（如<Currency>、<DateTime>和<Var>）的更多详细信息与使用示例，
本指南如何?