天天看點

從零開始前端學習[55]:類型轉換和Math方法

類型轉換和Math方法

  1. 類型轉換(顯示類型轉換,隐式類型轉換)
  2. Math方法

提示:

部落客:章飛_906285288

部落格位址:http://blog.csdn.net/qq_29924041

類型轉換(顯示類型轉換,隐式類型轉換)

我們知道在js中的檢測類型方式:typeof 要轉換的變量或者資料類型,傳回一個類型名稱的字元串

而其中顯式類型轉換,其實就是通過js中的一些方法(函數)轉換,如parseInt,parseFloat等

顯示轉換

顯示轉換有時候常用的一些轉換函數:parseInt,parseFloat,toString等類型。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <meta charset="UTF-8"><!--申明目前網頁的編碼集UTF-8-->
  <meta name="Generator" content="EditPlus®">   <!--編輯器的名稱-->
  <meta name="Author" content="作者是誰">       
  <meta name="Keywords" content="關鍵詞">
  <meta name="Description" content="描述和簡介">
  <style type="text/css">                                        
        body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{ margin: ;}
        ul,ol{margin: ; list-style: none; padding: ;}
        a{ text-decoration: none; }
        *{ margin: ; padding: ; }
  </style>
</head>
<body>
<script>
  var demo_int = ;   //定義一個整形資料
  console.log("demo_int:"+ demo_int);
  console.log("demo_int type:"+ typeof demo_int);

  var demo_string_width = "110.05px"
  console.log("demo_string_width:"+demo_string_width);
  console.log("demo_string_width type:"+typeof demo_string_width);
  console.log("parseInt demo_string_width:"+ parseInt(demo_string_width));  //從字元串類型中過濾出整形
  console.log("parseInt demo_string_width _2:"+ parseInt(demo_string_width,)); //以二進制形式讀取
  console.log("parseInt demo_string_width _16:"+ parseInt(demo_string_width,));//以16進制形式輸出
  console.log("parseInt demo_string_width:"+ parseFloat(demo_string_width)); //從字元串類型中過濾出實形
  var demo_string = "aaasd110.05px"
  console.log("parseInt demo_string:"+ parseInt(demo_string));  //從字元串類型中過濾出整形
  console.log("parseInt demo_string:"+ parseFloat(demo_string));  //從字元串類型中過濾出整形

  var demo_Int2 = ;
  console.log(typeof  demo_Int2.toString());  //将整型資料轉換為字元串型
  console.log(demo_Int2.toString()+"1234");  //将整型資料轉為字元串型後,在與資料相加得到一個字元串
</script>
</body>
</html>
           

上述實測試代碼:測試parseInt,parseFloat以及toString類型的使用

從零開始前端學習[55]:類型轉換和Math方法

隐式轉換

隐式類型轉換,就是在沒有任何顯示轉換的基礎上,通過運算符等操作,由浏覽器自動為我們進行這樣的一種類型轉換的過程,其實這種轉換自古其實就有,不管在java或者c/C++中都是有的,比如一個整型與實型的相加,乘除等等。這個時候都是會由系統自動去進行一系列的類型轉換過程。

1:+ 全為數字類型則為運算,有字元串則為拼接 從左到右計算

2:- ,* , / ,% 隻要有一邊是數字就将結果直接轉換為數字類型

3:對于boolean類型的加減都是按照數字類型來進行的

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <meta charset="UTF-8"><!--申明目前網頁的編碼集UTF-8-->
  <meta name="Generator" content="EditPlus®">   <!--編輯器的名稱-->
  <meta name="Author" content="作者是誰">       
  <meta name="Keywords" content="關鍵詞">
  <meta name="Description" content="描述和簡介">
  <style type="text/css">                                        
        body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{ margin: ;}
        ul,ol{margin: ; list-style: none; padding: ;}
        a{ text-decoration: none; }
        *{ margin: ; padding: ; }
  </style>
</head>
<body>
<script>
  //如果加号左右全是數字,就是按照正常數字的形式進行加減
  var allNumberSum =  + ;
  console.log(allNumberSum);
  console.log(typeof allNumberSum);

  //如果其中都是數字類型字元串,如果從左到右數字的話,會先加,遇到字元串就直接拼接成字元串
  var sideofString =  +  +"3"+"5";
  console.log(sideofString);
  console.log(typeof sideofString);

  //如果其中有數字類型字元串,如果先是字元串,後面是數字的話,會直接轉換成字元串
  var sideofString2 ="bbb" +  +  + "3"+"aaaa";
  console.log(sideofString2);
  console.log(typeof sideofString2);

//  boolean值會被強制轉換為數字,true被轉為1,false轉為0
  var booleanResult = true + false;
  console.log(booleanResult);

//  不是數字類型的字元串 或者   其他類型的運算,結果是NaN(除開加法運算,因為是拼接)不是數字類型的字元串
  var str2 = "str2";
  var sum7 = str2 - ;
  var str3 = undefined;
  console.log(sum7); //NaN
  console.log(str3 - str2);
</script>
</body>
</html>
           

注意:隐式類型轉換的注意事項主要寫在了上述的備注上面

從零開始前端學習[55]:類型轉換和Math方法

Math方法

在任何一門已知的語言中,數學函數Math庫的調用都是及其重要的,在js裡面當然也是一樣的。其調用的形式跟java裡面也類似,靜态方法的一種調用方法。

相關函數如下所示:

函數 函數意義
Math.ceil() 向上取整
Math.floor() 向下取整
Math.round() 四舍五入
Math.abs() 取絕對值
Math.random() 預設是取從[0,1)之間的随機數
Math.max(a,b) 取最大值 裡面個數不限 非數字字元串識别不了
Math.min(a,b) 取最大值 裡面個數不限 非數字字元串識别不了
Math.sqrt(x) x的平方根
Math.pow(x,y) x的y次幂

基本上正常用的也就上面這些了,調用都很簡單。