GitHub

概览

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

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

所有重格式化操作均在本地进行，使用 Intl.NumberFormat 库。

参考资料

Props

Prop

Type

描述

Prop	描述
`children`	组件内部要渲染的内容。通常为一个数值，表示需格式化为货币的值。如提供，则优先于 `value` 属性。
`name`	货币字段的可选名称，用于元数据。
`value`	货币的默认值。若未提供，则使用 children 作为 fallback。可为字符串或数字；字符串在格式化前会先解析为数字。
`currency`	货币类型，例如 "USD" 或 "EUR"。决定所使用的货币符号与格式。
`options`	可选的货币格式化 options，遵循 `Intl.NumberFormatOptions` 规范。可用于设置最大小数位、分组等样式。
`locales`	可选的 locales，用于指定格式化所用的 locale。若未提供，将使用用户的默认 locale。关于指定 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]
      价格为 <Currency> {item.price} </Currency>。
    </T> 
  );
}

自定义格式

此处我们以 GBP 显示价格，精确指定小数位数，并使用该货币的窄符号（即显示“$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> 组件用于根据当前 locale 以及传入的可选参数格式化货币数值。
该组件仅负责格式化，不进行任何汇率换算。
<Currency> 组件的内容不会被发送到 API 进行翻译。所有重新格式化均在本地通过 Intl.NumberFormat 库完成。

后续步骤

如需了解 <Currency> 组件及其他变量组件（例如 <Num>、<DateTime> 和 <Var>）的更多详情与使用示例，

概览

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

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

所有重格式化操作均在本地进行，使用 Intl.NumberFormat 库。

参考资料

Props

Prop

Type

描述

Prop	描述
`children`	组件内部要渲染的内容。通常为一个数值，表示需格式化为货币的值。如提供，则优先于 `value` 属性。
`name`	货币字段的可选名称，用于元数据。
`value`	货币的默认值。若未提供，则使用 children 作为 fallback。可为字符串或数字；字符串在格式化前会先解析为数字。
`currency`	货币类型，例如 "USD" 或 "EUR"。决定所使用的货币符号与格式。
`options`	可选的货币格式化 options，遵循 `Intl.NumberFormatOptions` 规范。可用于设置最大小数位、分组等样式。
`locales`	可选的 locales，用于指定格式化所用的 locale。若未提供，将使用用户的默认 locale。关于指定 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]
      价格为 <Currency> {item.price} </Currency>。
    </T> 
  );
}

自定义格式

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> 组件用于根据当前 locale 以及传入的可选参数格式化货币数值。
该组件仅负责格式化，不进行任何汇率换算。
<Currency> 组件的内容不会被发送到 API 进行翻译。所有重新格式化均在本地通过 Intl.NumberFormat 库完成。

后续步骤

如需了解 <Currency> 组件及其他变量组件（例如 <Num>、<DateTime> 和 <Var>）的更多详情与使用示例，

概览

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

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

所有重格式化操作均在本地进行，使用 Intl.NumberFormat 库。

参考资料

Props

Prop

Type

描述

Prop	描述
`children`	组件内部要渲染的内容。通常为一个数值，表示需格式化为货币的值。如提供，则优先于 `value` 属性。
`name`	货币字段的可选名称，用于元数据。
`value`	货币的默认值。若未提供，则使用 children 作为 fallback。可为字符串或数字；字符串在格式化前会先解析为数字。
`currency`	货币类型，例如 "USD" 或 "EUR"。决定所使用的货币符号与格式。
`options`	可选的货币格式化 options，遵循 `Intl.NumberFormatOptions` 规范。可用于设置最大小数位、分组等样式。
`locales`	可选的 locales，用于指定格式化所用的 locale。若未提供，将使用用户的默认 locale。关于指定 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]
      价格为 <Currency> {item.price} </Currency>。
    </T> 
  );
}

自定义格式

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> 组件用于根据当前 locale 以及传入的可选参数格式化货币数值。
该组件仅负责格式化，不进行任何汇率换算。
<Currency> 组件的内容不会被发送到 API 进行翻译。所有重新格式化均在本地通过 Intl.NumberFormat 库完成。

后续步骤

如需了解 <Currency> 组件及其他变量组件（例如 <Num>、<DateTime> 和 <Var>）的更多详情与使用示例，

Currency

本页内容

Currency

本页内容

Currency

本页内容

GitHub在 GitHub 上加星

GitHub在 GitHub 上加星

在 GitHub 上加星

在 GitHub 上加星