parseInt()、parseFloat()与Number()的比较

　　我有一个同学最近在自学JavaScript，偶尔遇到问题了会让我帮忙解决，虽然我也是一个JavaScript菜鸟，但是我还是很乐意帮忙，这样不仅可以帮到别人，也可以让自己在解决问题的过程中学到更多知识。先来看看他的代码吧！

　　HTML代码：

<input type='text' id='txt1' /> 
<select id='select'>
    <option value='+'>+</option>
    <option value="-">-</option>
    <option value="*">*</option>
    <option value="/">/</option>
</select>
<input type='text' id='txt2' /> 
<input type='button' value=' = ' onclick="count()" /> <!--通过 = 按钮来调用创建的函数，得到结果--> 
<input type='text' id='fruit' />  

　　JavaScript代码：

function count(){
    //获取第一个输入框的值
    var num1 = document.getElementById("txt1");
    //获取第二个输入框的值
    var num2 = document.getElementById("txt2");
    //获取选择框的值
    var fuhao = document.getElementById("select").value;
    function yunsuan(){
    　　var num;
    　　if (fuhao == "+") {
       　　 num = num1 + num2;
   　　 }else if(fuhao == "-"){
    　　    num = num1 - num2;
    　　}else if(fuhao == "*"){
   　　     num = num1 * num2;
   　　 }else if(fuhao == "/"){
    　　    num = num1 / num2;
   　　 }
    }
    document.getElementById("fruit").value = num;
}

　　看完代码后，我发现了三个问题，分别为：

• num1和num2获取的是元素节点，而不是文本框的值，所以应该这样写：var num1 = document.getElementById("txt1").value; num2同num1
• num是一个局部变量，document.getElementById("fruit").value无法得到num的值
• 在JavaScript中+可以用来连接字符串，因此这里需要进行转换

　　修改后的JavaScript代码如下：

function count(){
    var num;
    //获取第一个输入框的值
    var num1 = parseInt(document.getElementById("txt1").value);
    //获取第二个输入框的值
    var num2 = parseInt(document.getElementById("txt2").value);
    //获取选择框的值
    var fuhao = document.getElementById("select").value;
    function yunsuan(){
    　　if (fuhao == "+") {
       　　 num = num1 + num2;
   　　 }else if(fuhao == "-"){
    　　    num = num1 - num2;
    　　}else if(fuhao == "*"){
   　　     num = num1 * num2;
   　　 }else if(fuhao == "/"){
    　　    num = num1 / num2;
   　　 }
    }
    document.getElementById("fruit").value = num;
}

　　但是，经过测试我发现得到的答案永远是undefined。所以我将JavaScript代码进一步修改为：

function count(){
    var num;
    //获取第一个输入框的值
    var num1 = parseInt(document.getElementById("txt1").value);
    //获取第二个输入框的值
    var num2 = parseInt(document.getElementById("txt2").value);
    //获取选择框的值
    var fuhao = document.getElementById("select").value;
    switch(fuhao){
       case "+": 
            num = num1 + num2;
            break;
       case "-":
            num = num1 - num2;
            break;
       case "*":
            num = num1 * num2;
            break;
       case "/":
            num = num1 / num2;
    }
    document.getElementById("fruit").value = num;
}

　　这次可以得到正确答案了，但是无法进行小数运算，所以我用Number()方法替换parseInt()方法，但是Number无法将字符串中的非数字字符过滤掉，所以我用parseFloat()来代替。这下可以很好地解决问题了。

 

　　知识链接：

　　parseInt()：parseInt()函数可以解析一个字符串，并返回一个整数。它可接受两个参数，第一个参数是要解析的字符串，第二个参数是要解析的数字的基数，范围为2~36。如果省略该参数或其值为0，则以十进制来解析；如果该参数小于2或者大于36，则parseInt()将返回NaN。该方法可以将非数字字符（非首个字符）过滤掉，例如：parseInt("40d")，返回40，而parseInt("d40")则返回NaN。

　　parseFloat()：parseFloat())函数可以解析一个字符串，并返回一个浮点数。该函数在解析过程中遇到了正负号、数字、小数点或者科学计数法中的指数（e 或 E）以外的字符，则它会忽略该字符以及之后的所有字符，返回当前已经解析到的浮点数。同时参数字符串首尾的空白符会被忽略。

　　Number()：Number()函数把对象的值转换为数字。如果参数是Date对象，Number()返回1970年1月1日至今的毫秒数。如果对象的值无法转换为数字，那么Number()函数返回NaN。

　　刚开始一直没弄明白为什么使用if...else总是得到undefined，经过反复的测试，终于得到了我想要的结果，代码如下：

function count(){
    var num;
    //获取第一个输入框的值
    var num1 = parseFloat(document.getElementById("txt1").value);
    //获取第二个输入框的值
    var num2 = parseFloat(document.getElementById("txt2").value);
    //获取选择框的值
    var fuhao = document.getElementById("select").value;
    if (fuhao == "+") {
        num = num1 + num2;
    }else if(fuhao == "-"){
        num = num1 - num2;
    }else if(fuhao == "*"){
        num = num1 * num2
    }else{
        num = num1 / num2;
    }
    document.getElementById("fruit").value = num;
}