Javascript：为什么一个数字被视为一个字符串？

问题描述：

我想弄清楚为什么输入文本框中的数字视为字符串。这里的简短脚本可以在我输入第二个文本框中输入数字的地方起作用。第二个文本框中的vallue作为字符串附加到最终值，不作为数字添加。我尝试使用parseInt（），但在这种情况下，我的结果是NaN。Javascript：为什么一个数字被视为一个字符串？

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="UTF-8"> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<script> 

var extras_fee = 0; 

function validate_extra1(){ 
    var extra1_value = document.getElementById('extra1').value; 
    var extra2_value = document.getElementById('extra2').value; 
    var extra1_radiovalue = $('input[name=radio_extra1]:checked').val(); 
    if (extra1_value.length > 0 && extra1_radiovalue == 2000) 
     {extras_fee = 2000;} 
    if (extra1_value.length > 0 && extra1_radiovalue == 4000) 
     {extras_fee = 4000;} 
    if (extra1_value.length == 0) 
     {extras_fee = 0;} 
    extras_fee = extras_fee + extra2_value; 
    document.getElementById('fee_container').innerHTML = extras_fee; 
    } 
$(function(){ 
    $(document).on('click', '#continue_extras', function(){ 
    $("<div class='st'><b>Some title.</b></div>" + 
     "<div class='infwin'>Some text </div> " + 
     "<div>input some text here <input type='text' name='fname' id='extra1' onkeyup='validate_extra1()'>" + 
     "<input type='radio' name='radio_extra1' value='2000' onclick='validate_extra1()'>2000" + 
     "<input type='radio' name='radio_extra1' value='4000' onclick='validate_extra1()'>4000</div>" + 
     "<div class='infwin'>more text here</div> " + 
     "<div>input some numerical values here <input type='text' name='fname' id='extra2' placeholder='minimum 1000' onkeyup='validate_extra1()'> text</div>" + 
     "<div id='fee_container'></div>" + 
     "<div class='button' id='continue_post'>Submit >>></div> " + 
     "<div class='miclear'></div><br />").appendTo('#extras_container'); 
    $('#continue_extras').hide(); 
    }); 
}); 

</script> 
</head> 
<body> 
<div id='continue_extras'>click</div> 
<div id='extras_container'></div> 
</body> 
</html>

因为'value'是一个字符串，而不是一个号码。尝试'parseInt' – elclanrs 2014-11-06 08:09:48

我尝试过。有一行：extra2_value = parseInt（extra2_value）;但我最终得到的是NaN。为什么？ – Sandor 2014-11-06 08:13:03

看到这个，http://jsbin.com/zifaforuca/2/edit – defau1t 2014-11-06 08:14:28

答

你将不得不加入之前验证extra2_value。

var extra2_value = parseInt(document.getElementById('extra2').value); 
extra2_value = extra2_value?extra2_value:0;

JsFiddle

这工作！你会更深入地解释一下吗？谢谢 – Sandor 2014-11-06 08:23:56

答

var extra1_value = document.getElementById('extra1').value; // this is a string 
var extra2_value = document.getElementById('extra2').value; // this is a string 
var extra1_radiovalue = $('input[name=radio_extra1]:checked').val(); // this is a string 

if (extra1_value.length > 0 && extra1_radiovalue == 2000) // this works because "2000" == 2000, if you use === then it would fail 
    {extras_fee = 2000;} // this is a number 
if (extra1_value.length > 0 && extra1_radiovalue == 4000) 
    {extras_fee = 4000;} // this is a number 
if (extra1_value.length == 0) 
    {extras_fee = 0;} // this is a number 

extras_fee = extras_fee + extra2_value; // because extra2_value is a string, it will automatically cast to a string 
// thus concatenating them as a string, not doing a numeric addition

你需要做的是转换extra2_value为整数。

parseInt(extra2_value, 10) // do not forget to use that 10 to tell it what base to use

问题解决了吗？

我确实尝试过。有一行：extra2_value = parseInt（extra2_value）;但我最终得到的是NaN。为什么？ – Sandor 2014-11-06 08:15:08

尝试解析它之前'extra2_value'的值是多少？ 'Console.log（）'也许 – 2014-11-06 08:15:40

答

值回来作为一个字符串，你必须分析他们：

var value = document.getElementById('test').value;

console.log('value is', value);

然后我解析： http://jsbin.com/quhoxivere/10/edit

在本例中的链接我得到的值第一

它

var intValue = parseInt(value);

console.log('value is now ', (typeof intValue));

在控制台日志中，您可以看到invalue的类型是“number”（整数）。

希望这有助于

Javascript：为什么一个数字被视为一个字符串？

相关推荐