Javascript parseFloat() 有时返回 NaN - 可能仅在旧版本的 Firefox 上

Question

我已在所有当前主要浏览器上测试了此应用程序，它运行可靠且正确。该应用程序现已部署，我收到的报告有时结果为 NaN。

下面的函数使用 parsefloat() 来查找表中一列价格的总和。有时该总数显示为 NaN。我无法重现它，并且迄今为止报告该问题的客户在技术上还没有足够的能力告诉我他们正在使用什么浏览器。一个人发送了 Mac 上的 Firefox 屏幕截图，另一个人知道这是 Windows 上的 Firefox。

在下面的代码中，这一行:

var linePrice = rows[i].cells[gTblLinePriceCol].innerHTML.substr(1);

正确地将 linePrice 设置为 6.50，innerHTML 的值为“$6.50”。下一行调用 parseFloat(linePrice);

最后，这一行:

document.getElementById('totalPrice').innerHTML = tableTotal.toLocaleString('us-US', { style: 'currency', currency: 'USD' });

导致显示 NaN 而不是列总计。

任何帮助将不胜感激!

这是代码:

  function totalTbl()
  {
    var table = document.getElementById('myTbl');
    var rows = table.getElementsByTagName('tr');

    var tableTotal = 0;

    // Skip the first (header) row and the last (add row) row
    len = rows.length - 2;
    numRows = len - 1;

    for (var i = 1; i < len; i++)
    {
      var cell = rows[i].cells[5];
      if (cell.firstChild != null)
      {
        var linePrice = rows[i].cells[gTblLinePriceCol].innerHTML.substr(1);

        tableTotal += parseFloat(linePrice);
      }
    }

    document.getElementById('totalPrice').innerHTML = tableTotal.toLocaleString('us-US', { style: 'currency', currency: 'USD' });

  }

Answer 1

我觉得如果不检查更多代码，就很难在代码中找到导致此问题的点，因此我将尝试解决一些问题，希望我们能解决这个问题。

因此，首先，永远不要使用 != 或 ==，这会执行类型强制，其规则不直观且难以内存，最好避免使用。相反，始终使用 === 或 !==，它们不会执行类型强制。如果确实想执行类型强制，我会明确地这样做。

其次，如果这些值是由用户输入提供的，我会反对使用简单的解决方案，例如 .substr，并使用正则表达式，例如 /\d+ (.\d*)?/。如果不是来自用户输入，那么您可能是安全的。

第三，我最怀疑的问题是toLocaleString。据我了解，由于不同浏览器提供的不同实现，toLocaleString 作为一个函数是相当不可信的。我使用的是 Mac，Chrome 产生 $7.50，Firefox 产生 US$7.50。这些看起来不错，但暗示了这些浏览器的旧版本可能存在问题，而且如果您尝试对它们进行简单的字符串操作，您很快就会遇到问题。用安全简洁的解决方案替换 toLocaleString 相当容易。

document.getElementById('totalPrice').innerHTML = '$' + tableTotal.toFixed(2)

这里假设 typeof tableTotal === 'number'，否则您必须简单地执行 (+tableTotal).toFixed(2) 来执行类型强制。

祝你好运，如果我解决了你的问题，请告诉我。