javascript - 一起使用toLocalString和Reduce函数: toLocaleString shows NaN in display

Question

我正在从事国际化工作，目前我的职能是:

getDisputedAmount() {
return this.compactInvoices.reduce((sum, invoice) => {
  const result = sum + parseFloat(invoice.disputedAmount || 0);
  return result;
}, 0);

}

现在我使用服务引入国家/地区区域设置和国家/地区代码并使用 .toLocaleString，如下所示:

getDisputedAmount() {
return this.compactInvoices.reduce((sum, invoice) => {
  const result = sum + parseFloat(invoice.disputedAmount || 0);
  const currencyLocale = this.UserPreferences.getCountryLocale(); //for eg --> 'de-DE'
  const currencyCode = this.UserPreferences.getCountryCode(); // 'EUR'
  return Number(result).toLocaleString(currencyLocale, {
  // style: 'currency',
    currency: currencyCode,
    minimumFractionDigits: 2
  });
}, 0);

}

但不知何故，使用第一个函数会返回正确的结果，但如果我使用 toLocaleString，它会在 UI 中带来 NaN。我已经检查了“源”选项卡中的值，后面带有 toLocaleString 的代码具有正确的数字。

我还使用插值调用 html 中的函数

<div class="col-140"><span class="sum-label">{{ modal.getDisputedAmount() }}</span></div>

如果我在那里应用数字管道，我什至看不到 GUI 中写入的 NaN，它只是空白。

让我知道您的建议。

compactInvoices 中的值是数字，我认为当 toLocaleString 第一次运行时，总和会转换为字符串货币格式，同时将总和(字符串)添加到reduce函数本身中的新的有争议的金额中给出一个 NaN。 那么请分享一下如何结合使用toLocalString和reduce函数。

Answer 1

您需要在使用reduce计算总和之后进行格式化。

getDisputedAmount() {
  const result = this.compactInvoices.reduce((sum, invoice) => {
    return sum + (parseFloat(invoice.disputedAmount) || 0);
  }, 0);
  const currencyLocale = this.UserPreferences.getCountryLocale(); //for eg --> 'de-DE'
  const currencyCode = this.UserPreferences.getCountryCode(); // 'EUR'
  return result.toLocaleString(currencyLocale, {
    // style: 'currency',
    currency: currencyCode,
    minimumFractionDigits: 2
  });
}