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;
}