<Currency>

概述

<Currency> 组件将数值渲染为货币格式。该数字会根据当前的本地化设置以及传入的可选参数进行格式化。该货币组件仅负责格式化显示，不进行任何汇率换算。

<Currency>{100}</Currency>
// Output: $100.00

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

参考

属性

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

说明

属性	说明
`children`	组件内部渲染的内容。通常为一个表示要格式化为货币的数值。如果提供了该属性，则优先于 `value` 属性。
`name`	货币字段的可选名称，用于元数据用途。
`value`	货币的默认值。如果未提供，将回退使用 children。可以是字符串或数字。字符串会在格式化前解析为数字。
`currency`	货币类型，例如 "USD" 或 "EUR"。这决定了货币的符号和格式。
`options`	货币的可选格式化选项，遵循 `Intl.NumberFormatOptions` 规范。可用于定义最大小数位数、分组等样式。
`locales`	可选的本地化设置，用于指定格式化的区域。如果未提供，则使用用户的默认区域。关于如何指定区域可在此了解更多。

返回值

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

示例

基本示例

<Currency> 组件可用于显示本地化的货币数值。

PriceDisplay.jsx

import { Currency } from 'gt-react'; 

export default function PriceDisplay(item) {
    return (
        <Currency> {item.price} </Currency> 
    );
}

指定货币

这里我们将价格以欧元显示。

PriceDisplay.jsx

import { Currency } from 'gt-react';

export default function PriceDisplay(item) {
  return (
    <Currency currency="EUR"> {item.price} </Currency> 
  );
}

翻译 `<Currency>` 组件

假设你希望货币显示在一句也被翻译的句子中。
你可以将 <Currency> 组件包裹在 <T> 组件中。

PriceDisplay.jsx

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

export default function PriceDisplay(item) {
  return (
    <T id="itemPrice"> // [!code highlight]
      The price is <Currency> {item.price} </Currency>.
    </T> 
  );
}

自定义格式化

这里我们以英镑显示价格，并精确指定小数位数，同时使用货币的窄符号（例如，“$100” 而不是 “US$100”）。
关于更多选项，请参阅 Intl.NumberFormatOptions。

PriceDisplay.jsx

import { Currency } from 'gt-react';

export default function PriceDisplay(item) {
  return (
    <Currency
      currency="GBP"
      options={{ 
        currencyDisplay: 'narrowSymbol', 
        minimumFractionDigits: 2, 
        maximumFractionDigits: 2, 
      }} 
    >
      {item.price}
    </Currency>
  );
}

注意事项

<Currency> 组件用于根据当前语言环境和传递的可选参数格式化货币数值。
该货币组件仅负责格式化，不进行任何汇率计算。
<Currency> 组件的内容不会被发送到 API 进行翻译。所有的重新格式化都在本地通过 Intl.NumberFormat 库完成。

后续步骤

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

<Currency>

在本页面