[React Intl] Format Numbers with Separators and Currency Symbols using react-intl FormattedNumber(代码

Posted Answer1215

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了[React Intl] Format Numbers with Separators and Currency Symbols using react-intl FormattedNumber(代码相关的知识,希望对你有一定的参考价值。

Using a react-intl FormattedNumber component, we‘ll pass a Number and a few additional props in order to render the correct separator and currency symbols for different languages.

 

For example we have price data as such:

        "price": {
          "en-US": "16.19",
          "es-ES": "15.09",
          "fr-FR": "15.09"
        },

 

We can use FormattedNumber  to display the correct currency.

let locale = (navigator.languages && navigator.languages[0])
             || navigator.language
             || navigator.userLanguage
             || ‘en-US‘;

            <p>
              <FormattedNumber 
                style=‘currency‘
                currency={locale === ‘en-US‘ ? ‘USD‘: ‘EUR‘}
                currencyDisplay=‘symbol‘
                value={merchant.price[locale]} />
            </p>

 

以上是关于[React Intl] Format Numbers with Separators and Currency Symbols using react-intl FormattedNumber(代码的主要内容,如果未能解决你的问题,请参考以下文章

[React Intl] Format a Date Relative to the Current Date Using react-intl FormattedRelative

Intl.NumberFormat#format 最大整数值

[React Intl] Render Content with Placeholders using react-intl FormattedMessage

[React Intl] Install and Configure the Entry Point of react-intl

为 react/react-intl 动态导入语言 json 文件

非组件的 React-intl