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

Question

使用react-intl我有以下消息：

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

当我打电话

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

我希望它呈现：

  

服务费：6.25％

但我得到了一个圆形值：

  

服务费：6％

如何解决这个问题？

Answer 1

有两种方法可以做到：

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})'
   

Answer 2

您可以使用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