Как отформатировать число в процентах с двумя десятичными знаками, используя синтаксис сообщения 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 }) }}
   />
   

или

Создайте пользовательский формат, который устанавливает необходимую опцию:

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

Добавьте, добавьте форматы к вашему IntlProvider:

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

Затем используйте пользовательский формат вВаше сообщение:

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

Answer 2

Вы можете использовать minimumFractionDigits={2}} prop из документации .

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 .