如何使用 FormatJs 消息语法将数字格式化为带两位小数的百分比?

How to format a number to percentage with two decimals using FormatJs Message Syntax?

使用 react-intl 我收到以下消息:

serviceFee: {
  en: 'Service fee: ({fee, number, percent})',
  ...
},

当我打电话时

<FormatMessage id="serviceFee" values={{ fee: 0.0625 }} />

我希望它呈现:

Service fee: 6.25%

但我得到一个四舍五入的值:

Service fee: 6%

如何解决这个问题?

您可以使用 documentation 中的 minimumFractionDigits={2}} 道具。

import React, { Component } from "react";
import { FormattedNumber } from "react-intl";

export default class App extends Component {
  render() {
    return (
      <FormattedNumber
        style='percent'
        value={0.0625}
        minimumFractionDigits={2}
      />
    );
  }
}

以上代码呈现:

Codesandox.

有两种方法:

  1. 您可以从消息语法中删除百分比样式:

    serviceFee: 'Service fee: ({fee})'
    

    然后发送正确格式的值:

    <FormatMessage
      id="serviceFee"
      values={{ fee: intl.formatNumber(0.0625, { style: 'percent', maximumFractionDigits: 2 }) }}
    />
    

  1. 创建设置必要选项的自定义格式:

    const formats = {
      number: {
        percentWith2Decimals: { style: 'percent', maximumFractionDigits: 2 },
      },
    }
    

    将格式添加到您的 IntlProvider:

    <IntlProvider formats={formats}>...</IntlProvider>
    

    然后在您的邮件中使用自定义格式:

    serviceFee: 'Service fee: ({fee, number, percentWith2Decimals})'