網站搜尋

javascript - Intl.NumberFormat :"RangeError maximumFractionDigits 值超出範圍"


我在 React Typescript 中使用以下代碼時收到此錯誤。哪個輸入參數可能會導致此錯誤,以及我該如何解決?似乎是 Intl.NumberFormat 參數出了問題。

正在嘗試找出導致我們 Rollbar 錯誤記錄應用程序出現此問題的輸入參數。它還沒有顯示出來是什麼輸入參數,這種情況很少發生。

錯誤:RangeError 最大小數位數值超出範圍。

const formatCurrency = (item: number) => {
  const currencyFormat = new Intl.NumberFormat('en-US', {
    style: 'currency',
    currency: 'USD',
    maximumFractionDigits: 0,
  });
  return item == null ? '' : currencyFormat.format(item);
}

注意:似乎發生在 Mozilla Firefox 上,而不是 Chrome。不確定這對這個情況是否有影響

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.88 Safari/537.36

Firefox 和 Chrome 在 Javascript 上有什麼差異?

答案#1

您需要使用以下選項集:

const formatCurrency = (item: number) => {
  const currencyFormat = new Intl.NumberFormat('en-US', {
    style: 'currency',
    currency: 'USD',
    minimumFractionDigits: 0,
    maximumFractionDigits: 0,
  });
  return item == null ? '' : currencyFormat.format(item);
}

注意添加了 minimumFractionDigits: 0。

有大量的商業邏輯用來決定默認值是什麼,根據各種習慣。表示該邏輯的 USD 貨幣的 XML 如下所示:

<CcyNtry>
  <CtryNm>UNITED STATES OF AMERICA (THE)</CtryNm>
  <CcyNm>US Dollar</CcyNm>
  <Ccy>USD</Ccy>
  <CcyNbr>840</CcyNbr>
  <CcyMnrUnts>2</CcyMnrUnts>
</CcyNtry>

其中 <CcyMnrUnts>2</CcyMnrUnts> 部分指定了 minimumFractionDigits 的預設值

一個樣式為「currency」且貨幣為「USD」的 Intl.NumberFormat 物件,其隱含的默認 minimumFractionDigits 為 0,而且最大值不能低於最小值。

xml 規格: https://www.six-group.com/dam/download/financial-information/data-center/iso-currrency/lists/list-one.xml

mozilla 文章解釋實作邏輯: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#currency_formatting