一起使用 toLocalString 和 Reduce 函数：toLocaleString 在显示中显示 NaN答案

【问题标题】：Use toLocalString and Reduce Function Together : toLocaleString shows NaN in display一起使用 toLocalString 和 Reduce 函数：toLocaleString 在显示中显示 NaN
【发布时间】：2019-02-07 15:52:13
【问题描述】：

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

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 函数本身中将 sum（它是字符串）添加到新的有争议的金额中给出一个 NaN。所以请大家一起分享一下toLocalString和reduce函数的使用方法。

【问题讨论】：

根据您的代码，this.compactInvoices 并不总是包含浮点数，您应该检查它是如何填充的

标签： javascript angularjs ecmascript-6

【解决方案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
  });
}

【讨论】：