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

 


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2021 ITdaan.com