JavaScript的數(shù)據(jù)類型轉(zhuǎn)換原則(干貨)

我們都知道JavaScript是一門(mén)弱類型（或稱動(dòng)態(tài)類型）的語(yǔ)言，即變量的類型是不確定的。

var num = 123 ; //123
var num = 'HAHAHA' + num ; // "HAHAHA123"

上面的代碼中，變量num起初是一個(gè)數(shù)值，后來(lái)又變成一個(gè)字符串。變量類型完全由當(dāng)前值決定。這種類型就叫弱類型。

我們知道，在編程語(yǔ)言中，數(shù)據(jù)本身和運(yùn)算之間都是有類型的。

在強(qiáng)類型的編程語(yǔ)言中，不同類型的變量是不能直接進(jìn)行運(yùn)算的。

但是在弱類型語(yǔ)言中不同類型的變量卻是可以直接相加，因此在運(yùn)算中就需要轉(zhuǎn)換數(shù)據(jù)的類型。這種數(shù)據(jù)類型的轉(zhuǎn)換大多數(shù)情況下都是自動(dòng)轉(zhuǎn)換的，但有時(shí)卻是需要手動(dòng)強(qiáng)制轉(zhuǎn)換，

在進(jìn)行數(shù)據(jù)類型轉(zhuǎn)換之前，我們先來(lái)了解一下JavaScript的數(shù)據(jù)類型有哪些。

• 5中基本數(shù)據(jù)類型：number ,string , boolean , undefined , unll .
  
• 一種復(fù)雜的數(shù)據(jù)類型： Object .
  

有時(shí)候我們需要知道一個(gè)變量的數(shù)據(jù)類型時(shí)，可以通過(guò)typeof()來(lái)操作。返回值的類型為：string 。

<script>
　　var arr = [undefined , true , 'world' , 123 , null , new Object , function () {}]
　　for ( i = 0; i < arr.length; i ++) {
 console.log(typeof(arr[i]));
　　}
</script> 

輸出的結(jié)果為：undefined , boolean , string , number , object , object , function

null明明是基本數(shù)據(jù)類型呀，為什么輸出的結(jié)果是Object.這是因?yàn)閚ull被認(rèn)為是空的對(duì)象引用。記住即可。

函數(shù)不是數(shù)據(jù)類型，但是調(diào)用typeof后為什么會(huì)出現(xiàn)function類型呢。從技術(shù)的角度看，函數(shù)是對(duì)象。但是也有一些特殊的屬性，因此利用typeof來(lái)區(qū)分函數(shù)和對(duì)象是有必要的。

顯式轉(zhuǎn)換的數(shù)據(jù)類型

1、將非數(shù)值轉(zhuǎn)換為數(shù)值類型的函數(shù)

有3個(gè)函數(shù)可以把非數(shù)值轉(zhuǎn)換為數(shù)值：Number()、parseInt()、parseFloat()。

第一個(gè)函數(shù)Number(mix)，可以用于任何數(shù)據(jù)類型，該函數(shù)先將mix的數(shù)據(jù)類型轉(zhuǎn)換為number類型，然后再將mix的值轉(zhuǎn)換為數(shù)值。

若mix的值能直接轉(zhuǎn)換成數(shù)字，則直接顯示。若不能則顯示0或NaN.

而另兩個(gè)函數(shù)則專門(mén)用于把字符串轉(zhuǎn)換成數(shù)值。

parseInt(string)函數(shù)：將字符串轉(zhuǎn)換為數(shù)值，不遵循四舍五入。這里的string必須是數(shù)字類型的開(kāi)頭字符串，一直遍歷到非數(shù)值的那個(gè)字符才停止。若不是數(shù)字開(kāi)頭，則會(huì)顯示NaN.

<script>
var num = ["123" , "124.4" , "234asd" , "asf456"] ;
  for (i = 0; i < num.length; i++) {
   console.log(parseInt(num[i]));
  }
</script>

執(zhí)行結(jié)果為：123 ， 124 ， 234 ， NaN .

parseFloat(string):將string轉(zhuǎn)換為浮點(diǎn)數(shù)。從數(shù)字位開(kāi)始看，直到非數(shù)字位結(jié)束，用法與parseInt(string)一致。

parseInt()函數(shù)還有另一種用法。parseInt(string,radix)：以radix為基底，將string轉(zhuǎn)換成十進(jìn)制的整數(shù)。radix的取值為2-32。

2、將其它類型的數(shù)據(jù)轉(zhuǎn)換為字符串類型的函數(shù)

有兩個(gè)函數(shù)可以把其他數(shù)據(jù)類型轉(zhuǎn)換為字符串。toString() 和 string() 。

String(mix)：將mix轉(zhuǎn)換成字符串類型。該函數(shù)可以將任何數(shù)據(jù)類型的值轉(zhuǎn)換為字符串。

toString()函數(shù)有兩種用法。，

• 用法一：demo.toString():將demo轉(zhuǎn)換成字符串類型。demo不能等于null undefined
• 用法二：demo.toString(radix)：將十進(jìn)制的數(shù)demo轉(zhuǎn)換為目標(biāo)進(jìn)制的數(shù)。如123.0.toString(8)為將十進(jìn)制數(shù)字123轉(zhuǎn)換為8進(jìn)制的字符串。
  

　   注：不能寫(xiě)成123.toString(8) . 因?yàn)闉g覽器解析的時(shí)候會(huì)解析成小數(shù)。

//例題：把一個(gè)二進(jìn)制的數(shù)10001000轉(zhuǎn)換成十六進(jìn)制的數(shù)。

//思路：先把二進(jìn)制轉(zhuǎn)換成十進(jìn)制，再由十進(jìn)制轉(zhuǎn)換成十六進(jìn)制。

var num1 = parseInt('10001000',2);　　//136
var num2 = num1.toString(16);　　//'88' 

3、將值轉(zhuǎn)換成布爾值類型

Boolean(變量):將一個(gè)值轉(zhuǎn)換成其對(duì)應(yīng)的布爾值。

（1）原始類型值的轉(zhuǎn)換方法

以下六個(gè)值的轉(zhuǎn)化結(jié)果為false，其他的值全部為true。

• undefined
• null
• -0
• +0
• NaN
• ''（空字符串）

（2）對(duì)象的轉(zhuǎn)換規(guī)則

所有對(duì)象的布爾值都是true，甚至連false對(duì)應(yīng)的布爾對(duì)象也是true。

Boolean(new Boolean(false))
// true 

請(qǐng)注意，空對(duì)象{}和空數(shù)組[]也會(huì)被轉(zhuǎn)成true。

Boolean([]); // true
Boolean({}); // true 

隱式的數(shù)據(jù)類型轉(zhuǎn)換

隱式類型的轉(zhuǎn)換是系統(tǒng)進(jìn)行運(yùn)算時(shí)自動(dòng)進(jìn)行的，但是調(diào)用的方法都是顯式類型轉(zhuǎn)換的方法。

1、遞增和遞減操作符

      a++ ,a-- ,++a , --a

       這4個(gè)操作符對(duì)任何值都適用，也就是他們不僅適用于整數(shù)，還可以用于字符串、布爾值、浮點(diǎn)數(shù)值和對(duì)象，此時(shí)伴隨著隱式的數(shù)據(jù)類型轉(zhuǎn)換。

即先將變量通過(guò)Number()轉(zhuǎn)換成number的數(shù)據(jù)類型，然后再進(jìn)行遞增、遞減操作。

2、(+)(-)，即正負(fù)號(hào)

不僅適用于整數(shù)，還可以用于字符串、布爾值、浮點(diǎn)數(shù)值和對(duì)象。將變量通過(guò)Number()轉(zhuǎn)換成number的數(shù)據(jù)類型。

3、isNaN(變量)

執(zhí)行過(guò)程為：即先將變量通過(guò)Number轉(zhuǎn)換，再進(jìn)行isNaN() 。

4、(+) 加號(hào)

先看下面的一段代碼

<script>
 var str = 1 + "1";
 var num = 1 + 1;
 var num1 = 1 + false;
 document.write(str , "<br>" , num , "<br>" , num1);
</script>

執(zhí)行結(jié)果為：11 ， 2 ，1

所以加法有兩個(gè)作用。如果沒(méi)有運(yùn)算過(guò)程中沒(méi)有字符串時(shí)，就將變量通過(guò)Number()轉(zhuǎn)換為number類型后，再進(jìn)行運(yùn)算。如果有字符串的話，加號(hào)兩邊起的就是字符串連接作用。

5、-  *  /  %  減號(hào)，乘號(hào)，除號(hào)，取余 

運(yùn)算時(shí)把數(shù)據(jù)轉(zhuǎn)換成number類型后，再進(jìn)行運(yùn)算。

6、&&  ||  !    與或非運(yùn)算 

將運(yùn)算符兩邊的值轉(zhuǎn)換成通過(guò)Boolean()函數(shù)轉(zhuǎn)換成布爾類型，然后再進(jìn)行運(yùn)算。不同的是，&&  ||  返回的是比較后自身的原值，而 ！運(yùn)算返回的是布爾值.

看一個(gè)例子。

<script>
  console.log(5 && 3);　　//從左往右判斷，如果全都為真，則返回最后一個(gè)為真的值，只要有一個(gè)判斷為假，就返回為假的那個(gè)值
  console.log(0 || 2);　　//從左往右判斷，返回第一個(gè)為真的值，若完成了全部的判斷且所有的值都為假，就返回最后為假的那個(gè)值
　　　console.log(!3);
 </script>

返回的結(jié)果為：3 ， 2 ， false.

7、 < > <= >=  ==  !=  比較運(yùn)算符

當(dāng)數(shù)字和字符串比較大小時(shí)，會(huì)隱示將字符串轉(zhuǎn)換成number類型進(jìn)行比較。而當(dāng)字符串和字符串比較大小時(shí)，則比較的是ascii碼的大小。最后返回的則是布爾值

<script>  //1)純數(shù)字之間比較
  alert(1<3);//true
  //2)數(shù)字字符串比較，會(huì)將其先轉(zhuǎn)成數(shù)字
  alert("1"<"3");//true
  alert("123"<"123");//false
  //3)純字符串比較,先轉(zhuǎn)成ascii碼
  alert("a"<"b");//true
  alert("abc"<"aad");//false,多純字母比較，會(huì)依次比較ascii碼
  //4)漢字比較
  alert("我".charCodeAt());//25105
  alert("的".charCodeAt());//30340
  alert("我"<"的");//true,漢字比較,轉(zhuǎn)成ascii碼
  //5)當(dāng)數(shù)字和字符串比較，且字符串為數(shù)字。則將數(shù)字字符串轉(zhuǎn)為數(shù)字
  alert(123<"124");//true,下面一句代碼得出124的ascii碼為49，所以并不是轉(zhuǎn)成 ascii比較
  alert("124".charCodeAt());//49
  //6)當(dāng)數(shù)字和字符串比較,且字符串為非純數(shù)字時(shí),則將非數(shù)字字符串轉(zhuǎn)成數(shù)字的時(shí)候會(huì)轉(zhuǎn)換為NaN,當(dāng)NaN和數(shù)字比較時(shí)不論大小都返回false.
  alert(13>"abc");//false
</script>  

　　下面看一種特殊情況。

<script>
　　　//undefined不發(fā)生類型轉(zhuǎn)換
 console.log(undefined == undefined);　　//true
 console.log(undefined == 0);　　　　　　　//false
 console.log(undefined > 0);　　　　　　　　//false
 console.log(undefined < 0);　　　　　　　　//false
　　//null不發(fā)生類型轉(zhuǎn)換
 console.log(null == null);　　　　　　　　//true
 console.log(null == 0);　　　　　　　　　　//false
 console.log(null > 0);　　　　　　　　　　//false
 console.log(null < 0);　　　　　　　　　　//false
 console.log(undefined == null);　　　　//true 
　　console.log(NaN == NaN);　　　　　　　　//false. not a number 不等于任何東西，包括它自己
</script>

　　關(guān)于 == 的隱式類型轉(zhuǎn)換，可以看博客：https://www.jb51.net/article/136521.htm

在項(xiàng)目工程中，如果用 == 來(lái)判斷兩個(gè)數(shù)值是否相等，由于會(huì)發(fā)生隱式類型轉(zhuǎn)換。所以是非常存在非常大的漏洞的。為了解決這一問(wèn)題。引入了 === （絕對(duì)等于）和 ！==（絕對(duì)不等于）。

<script>
 console.log(1 === "1"); //false
 console.log(1 === 1);　　　//true
</script>

總結(jié)

以上所述是小編給大家介紹的JavaScript的數(shù)據(jù)類型轉(zhuǎn)換小結(jié)，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)億速云網(wǎng)站的支持！