Question

    <span class = "apples"> 9 apples</span>
    <span class = "apples"> 7 apples</span>
    <span class = "apples"> 3 apples</span>
    <span class = "apples"> 6 apples</span>
    <span class = "apples"> 11 apples</span>

    <script>
    var apples = document.querySelectorAll('span.apples'),

    total = 0;

    for (var i = 0; i < apples.length; i++) 
    {
    total += parseInt(apples[i].textContent, 10);
    };
    document.write(total);
    </script>

上面我试图从span标签中提取所有带有类名＆＃34; apples＆＃34;的数字。和总数的苹果。实际上，代码可以成功运行。

但如果我在每个数字的前面放置一个 - 符号（负号），它将会出现为NaN。

我添加 - 符号的原因是因为此示例中的span元素只是我在proboards上的免费论坛上处理的实际元素的复制品，并且真正的span元素有 - 在前面签名由于某种原因他们的数字。因此，当上面的代码在我的论坛上没有工作并且只返回NaN时，我添加了 - 上面的测试范围元素的符号，并且还返回了Nan。所以它与 - 符号有关。以下是我论坛上的实际内容：

    <span class="viewing"> - 2 viewing</span>

为什么这是NaN，我该如何解决它？提前谢谢！

Answer 1

因为parseInt不喜欢-和2之间的空格。

你可以通过没有空间或处理包含的文本来删除那些不是pos / neg符号（最好是字母）的东西。

Answer 2

问题是减号和数字之间的空格：

parseInt("4");
4
parseInt("-4");
-4
parseInt("- 4");
NaN
parseInt(" -4");
-4

解析器可能需要一个减号后的数字并找到一个空格，使其成为NaN。

Answer 3

这是ECMAScript specification所说的：

注意parseInt可能只将字符串的前导部分解释为整数值;它忽略了任何不能被解释为整数表示法的一部分的字符，并且没有任何指示忽略任何这样的字符。

所以在你的情况下，这意味着parseInt在引导-之后停止解析空间上的字符串。由于-本身不是数字，因此您会得到NaN。

总的来说，我建议你采取另一种方法。因此，将HTML更改为类似下面的内容将使您的代码更加健壮且易于维护：

<span class="apples" data-number="9">9 apples</span>
<span class="apples" data-number="7">7 apples</span>
<span class="apples" data-number="3">3 apples</span>

JS：

for (var i = 0; i < apples.length; i++) {
    total += Number(apples[i].getAttribute('data-number'));
}

现在您可以更改代表（例如apples (9)），而不必担心它会破坏您的代码。

Answer 4

NaN = 非数字，如果您正在接收它，则解析功能无法转换为数字。你可以对字符串进行排列，或者你可以修剪它以得到数字的负数，或者你可以修复你的字符串。这里有许多不同的解决方案。

使用此函数我为你扔了，应该返回数字，也有负数。

function formatAndParseInt(string) { return parseInt(string.replace( /[^0-9,-]/g, '' )); }

对话，如果你只需要数字，并丢弃任何短划线（负数），那么使用此功能

function formatAndParseIntAbs(string) { return parseInt(string.replace( /[^0-9]/g, '' )); }

Answer 5

与其他saisd一样，问题在于事实是parseInt在 - 之后看到了空白区域，并且像它设计的那样返回NaN。那么为什么不将数字与正则表达式匹配。

var num = apples[i].textContent.match(/\d+/); 
num = num ? parseInt(num[0], 10) : 0;
total += num;

如果需要，您可以使正则表达式与特定模式匹配。

喃？为什么浏览器不会将其读作数字？

5 个答案: