Javascript parseFloat（）有时会返回NaN - 可能只是在旧版本的Firefox上

Question

I have tested this application on all current major browsers and it works reliably and correctly. The app is now deployed and I am getting reports that sometimes the result is NaN.

The function below uses parsefloat() to find the total of a column of prices in a table. Sometimes that total is displayed as NaN. I have been unable to reproduce it and the customers who report the issue thus far have not been sufficiently technically competent to tell me what browser they are using. One person sent a screen shot of Firefox on a Mac and another knew it was Firefox on Windows.

In the below code, this line:

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

properly sets linePrice to 6.50 and the value of innerHTML is "$6.50". The next line calls parseFloat(linePrice);

Finally, this line:

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

Causes NaN to be displayed instead of the column total.

Any help would be greatly appreciated!

Here is the code:

  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

I feel it'll be difficult to find one point in your code where this is being caused without more code to examine, so I'll attempt to address a few issues and hopefully we'll hit on the issue.

So firstly, never use != or == , this performs type coercion, the rules of which are unintuitive and unmemorable and are best simply avoided. Instead always use === or !== , which will not perform type coercion. If do want to perform type coercion I would do so explicitly.

Secondly, if these values are being provided by user input I'd argue against using a naive solution such as .substr , and in its place use a regex such as /\\d+(.\\d*)?/ . If it's not from user input you're probably safe.

Thirdly, and what I most suspect is the issue, is toLocaleString . It was my understanding that toLocaleString was fairly untrustworthy as a function due to the different implementations provided by different browsers. I'm on a Mac, and Chrome produces $7.50 , and Firefox produces US$7.50 . These seem fine as they are, but hint at possible issues for older versions of these browsers, and also if you were to attempt naive string manipulation on them you'd quickly encounter problems. It's fairly easy to replace toLocaleString with a safe and concise solution.

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

This assumes typeof tableTotal === 'number' , otherwise you must simply do (+tableTotal).toFixed(2) to perform type coercion.

Good luck, and let me know if I've solved your problem.