<Currency>

概述

<Currency> 组件将数值渲染为货币。数字格式基于当前的语言环境和传递的任何可选参数。货币组件仅处理格式化，不执行任何汇率计算。

<Currency>{100}</Currency>
// 输出: $100.00

所有重新格式化均使用 Intl.NumberFormat 库在本地处理。

参考

属性

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

描述

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

返回值

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

示例

基本示例

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

PriceDisplay.jsx

import { Currency } from 'gt-next';
 
export default function PriceDisplay(item) {
  return (
    <Currency> {item.price} </Currency>
  );
}

指定货币

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

PriceDisplay.jsx

import { Currency } from 'gt-next';
 
export default function PriceDisplay(item) {
  return (
    <Currency currency="EUR"> {item.price} </Currency> 
  );
}

翻译 `<Currency>` 组件

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

PriceDisplay.jsx

import { T, Currency } from 'gt-next';
 
export default function PriceDisplay(item) {
  return (
    <T id="itemPrice">
      The price is <Currency> {item.price} </Currency>.
    </T> 
  );
}

自定义格式

这里我们将价格显示为英镑，具体指定了小数位数，并使用货币的窄符号（即 "$100" 而不是 "US$100"）。阅读更多关于 Intl.NumberFormatOptions 的选项。

PriceDisplay.jsx

import { Currency } from 'gt-next';
 
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>

在本页面