javascript 類型轉換。

時間 2019-11-30

原文原文鏈接

學校js感受好漫長，斷斷續續，要堅持天天都能學到點，總結了下數據類型的轉換。javascript

Javascript的變量是鬆散類型的，它能夠存儲Javascript支持的任何數據類型，其變量的類型能夠在運行時被動態改變。請看示例：java

var n = 10;
n = "hello CSSer!";
n = {};

上面的示例中，首先聲明n變量並初始化其值爲10（整數類型），接着將字符串「hello CSSer!」賦值給n，接着再賦一個對象給它，最後n的類型是對象類型。能夠看出變量n的類型具備動態性，實際編程中，咱們建議不要頻繁改變變量的類型，由於這對調試沒有好處。編程

正由於Javascript中變量類型具備動態性，在程序實際執行的過程當中就須要用到類型轉換的概念。數組

類型轉換能夠分爲隱式轉換和顯式轉換，所謂隱式轉換即程序在運行時進行的自動轉換，顯式轉換則是人爲的對類型進行強制轉換。函數

本文將對Javascript的類型轉換進行總結。測試

顯式轉換

經過手動進行類型轉換，Javascript提供瞭如下轉型函數：編碼

轉換爲數值類型：Number(mix)、parseInt(string,radix)、parseFloat(string)
轉換爲字符串類型：toString(radix)、String(mix)
轉換爲布爾類型：Boolean(mix)spa

一、Number(mix)函數，能夠將任意類型的參數mix轉換爲數值類型。其規則爲：調試

若是是布爾值，true和false分別被轉換爲1和0
若是是數字值，返回自己。
若是是null，返回0.
若是是undefined，返回NaN。
若是是字符串，遵循如下規則：
1. 若是字符串中只包含數字，則將其轉換爲十進制（忽略前導0）
2. 若是字符串中包含有效的浮點格式，將其轉換爲浮點數值（忽略前導0）
3. 若是是空字符串，將其轉換爲0
4. 若是字符串中包含非以上格式，則將其轉換爲NaN
若是是對象，則調用對象的valueOf()方法，而後依據前面的規則轉換返回的值。若是轉換的結果是NaN，則調用對象的toString()方法，再次依照前面的規則轉換返回的字符串值。

下表列出了對象的valueOf()的返回值：code

對象	返回值
Array	數組的元素被轉換爲字符串，這些字符串由逗號分隔，鏈接在一塊兒。其操做與 Array.toString 和 Array.join 方法相同。
Boolean	Boolean 值。
Date	存儲的時間是從 1970 年 1 月 1 日午夜開始計的毫秒數 UTC。
Function	函數自己。
Number	數字值。
Object	對象自己。這是默認狀況。
String	字符串值。

下面提供幾個例子，你能寫出它的正確結果嗎：

<script>
document.write("result1:"+Number(true)+"<br>");
document.write("result2:"+Number(null)+"<br>");
document.write("result3:"+Number("001122")+"<br>");
document.write("result4:"+Number("hello CSSer!")+"<br>");
document.write("result5:"+Number("0×8")+"<br>");
document.write("result6:"+Number(0*8)+"<br>");
document.write("result7:"+Number("")+"<br>");
document.write("result8:"+Number("020dd")+"<br>");
document.write("result9:"+Number("hello CSSer!")+"<br>");
</script>

結果：

result1:1
result2:0
result3:1122
result4:NaN
result5:NaN
result6:0
result7:0
result8:NaN
result9:NaN

二、parseInt(string, radix)函數，將字符串轉換爲整數類型的數值。它也有必定的規則：

忽略字符串前面的空格，直至找到第一個非空字符
若是第一個字符不是數字符號或者負號，返回NaN
若是第一個字符是數字，則繼續解析直至字符串解析完畢或者遇到一個非數字符號爲止
若是上步解析的結果以0開頭，則將其看成八進制來解析；若是以0x開頭，則將其看成十六進制來解析
若是指定radix參數，則以radix爲基數進行解析

小測驗：

<script>
document.write("result1:"+parseInt("       001122")+"<br>");
document.write("result2:"+parseInt("-1122")+"<br>");
document.write("result3:"+parseInt("0123")+"<br>");
document.write("result4:"+parseInt("hello CSSer!")+"<br>");
document.write("result5:"+parseInt("0x12")+"<br>");
document.write("result6:"+parseInt(0*8)+"<br>");
document.write("result7:"+parseInt("")+"<br>");
document.write("result8:"+parseInt("020dd")+"<br>");
document.write("result9:"+parseInt("1f",16)+"<br>");  //返回 31 (16+15)
document.write("result10:"+parseInt("22.5")+"<br>");
</script>

結果：

result1:1122
result2:-1122
result3:123
result4:NaN
result5:18
result6:0
result7:NaN
result8:20
result9:31
result10:22

三、parseFloat(string)函數，將字符串轉換爲浮點數類型的數值。

它的規則與parseInt基本相同，但也有點區別：字符串中第一個小數點符號是有效的，另外parseFloat會忽略全部前導0，若是字符串包含一個可解析爲整數的數，則返回整數值而不是浮點數值。

四、toString(radix)方法。除undefined和null以外的全部類型的值都具備toString()方法，其做用是返回對象的字符串表示。

對象	操做
Array	將 Array 的元素轉換爲字符串。結果字符串由逗號分隔，且鏈接起來。
Boolean	若是 Boolean 值是 true，則返回「true」。不然，返回「false」。
Date	返回日期的文字表示法。
Error	返回一個包含相關錯誤信息的字符串。
Function	返回以下格式的字符串，其中 functionname 是被調用 toString 方法函數的名稱： function functionname( ) { [native code] }
Number	返回數字的文字表示。
String	返回 String 對象的值。
默認	返回「[object objectname]」，其中 objectname 是對象類型的名稱。

五、String(mix)函數，將任何類型的值轉換爲字符串，其規則爲：

若是有toString()方法，則調用該方法（不傳遞radix參數）並返回結果
若是是null，返回」null」
若是是undefined，返回」undefined」

六、Boolean(mix)函數，將任何類型的值轉換爲布爾值。

如下值會被轉換爲false：false、」"、0、NaN、null、undefined，其他任何值都會被轉換爲true。

目錄：
1 : 僞對象
2 : 轉換爲字符串
3 : 數字轉字符串
4 : 轉換爲數字
5 : 轉換爲Boolean
6 : Number()和parseInt()的區別
7 : String()和toString()的區別

1 : 僞對象
僞對象：javascript是一門頗有意思的語言，即使是基本類型，也是僞對象，因此他們都有屬性和方法。
變量a的類型是字符串，經過調用其爲僞對象的屬性length獲取其長度。

<script>
  var a="hello javascript";
  document.write("變量a的類型是:"+(typeof a));
  document.write("<br>");
  document.write("變量a的長度是:"+a.length);
</script>

運行效果：
變量a的類型是:string
變量a的長度是:16

2 : 轉換爲字符串
不管是Number,Boolean仍是String都有一個toString方法，用於轉換爲字符串

<script>
  var a=10;
  document.write("數字 "+a+" 轉換爲字符串"+a.toString());
  document.write("<br>");

  var b=true;
  document.write("布爾 "+b+" 轉換爲字符串"+b.toString());
  document.write("<br>");

  var c="hello javascript";
  document.write("字符串 "+c+" 轉換爲字符串 "+c.toString());
  document.write("<br>");

</script>

運行效果：
數字 10 轉換爲字符串10
布爾 true 轉換爲字符串true
字符串 hello javascript 轉換爲字符串 hello javascript

3 : 數字轉字符串
Number轉換爲字符串的時候有默認模式和基模式兩種

<script>
  var a=10;
  document.write('默認模式下，數字10轉換爲十進制的'+a.toString()); //默認模式，即十進制
  document.write("<br>");

  document.write('基模式下，數字10轉換爲二進制的'+a.toString(2)); //基模式，二進制
  document.write("<br>");
 
  document.write('基模式下，數字10轉換爲八進制的'+a.toString(8)); //基模式，八進制
  document.write("<br>");

  document.write('基模式下，數字10轉換爲十六進制的'+a.toString(16)); //基模式，十六進制
  document.write("<br>");

</script>

運行效果：
默認模式下，數字10轉換爲十進制的10
基模式下，數字10轉換爲二進制的1010
基模式下，數字10轉換爲八進制的12
基模式下，數字10轉換爲十六進制的a

4 : 轉換爲數字
javascript分別提供內置函數 parseInt()和parseFloat()，轉換爲數字
注：若是被轉換的字符串，同時又數字和字符構成，那麼parseInt會一直定位數字，直到出現非字符。因此"10abc" 會被轉換爲 10
思考題: 字符串"10abc8" 又會被轉換爲多少呢？

<script>
  document.write("字符串的\"10\"轉換爲數字的:"+parseInt("10")); //轉換整數
  document.write("<br>");
  document.write("字符串的\"3.14\"轉換爲數字的:"+parseFloat("444 3.14"));//轉換浮點數
  document.write("<br>");
  document.write("字符串的\"10abc\"轉換爲數字的:"+parseInt("10abc")); //判斷每一位，直到發現不是數字的那一位
  document.write("<br>");

  document.write("字符串的\"hello javascript\"轉換爲數字的:"+parseInt("h5555ello javascript")); //若是徹底不包含數字，則返回NaN - Not a Number
  document.write("<br>");

</script>

運行效果：
字符串的"10"轉換爲數字的:10
字符串的"3.14"轉換爲數字的:444
字符串的"10abc"轉換爲數字的:10
字符串的"hello javascript"轉換爲數字的:NaN

5 : 轉換爲Boolean
使用內置函數Boolean() 轉換爲Boolean值
當轉換字符串時：
非空即爲true
當轉換數字時：
非0即爲true
當轉換對象時：
非null即爲true

<script>
  document.write("空字符串''轉換爲布爾後的值:"+Boolean(""));  //空字符串
  document.write("<br>");
  document.write("非空字符'hello javascript '串轉換爲布爾後的值:"+Boolean("hello javascript"));  //非空字符串
  document.write("<br>");
  document.write("數字 0 轉換爲布爾後的值:"+Boolean(0));  //0
  document.write("<br>");
  document.write("數字 3.14 轉換爲布爾後的值:"+Boolean(3.14)); //非0
  document.write("<br>");
  document.write("空對象 null 轉換爲布爾後的值:"+Boolean(null));  //null
  document.write("<br>");
  document.write("非對象 new Object() 轉換爲布爾後的值:"+Boolean(new Object()));  //對象存在
  document.write("<br>");
</script>

運行效果：
空字符串''轉換爲布爾後的值:false
非空字符'hello javascript '串轉換爲布爾後的值:true
數字 0 轉換爲布爾後的值:false
數字 3.14 轉換爲布爾後的值:true
空對象 null 轉換爲布爾後的值:false
非對象 new Object() 轉換爲布爾後的值:true

6 : Number()和parseInt()的區別
Number()和parseInt()同樣，均可以用來進行數字的轉換
區別在於，當轉換的內容包含非數字的時候，Number() 會返回NaN(Not a Number)
parseInt() 要看狀況，若是以數字開頭，就會返回開頭的合法數字部分，若是以非數字開頭，則返回NaN

<script>
  document.write("經過Number() 函數轉換字符串'123' 後獲得的數字："+Number("123"));   //正常的
  document.write("<br>");
  document.write("經過Number() 函數轉換字符串'123abc' 後獲得的數字："+Number("123abc"));   //包含非數字
  document.write("<br>");
  document.write("經過Number() 函數轉換字符串'abc123' 後獲得的數字："+Number("abc123"));   //包含非數字
  document.write("<br>");

  document.write("經過parseInt() 函數轉換字符串'123' 後獲得的數字："+parseInt("123"));   //正常的
  document.write("<br>");
  document.write("經過parseInt() 函數轉換字符串'123abc' 後獲得的數字："+parseInt("123abc"));   //包含非數字,返回開頭的合法數字部分
  document.write("<br>");
  document.write("經過parseInt() 函數轉換字符串'abc123' 後獲得的數字："+parseInt("abc123"));   //包含非數字,以非數字開頭，返回NaN
  document.write("<br>");

</script>

運行效果：
經過Number() 函數轉換字符串'123' 後獲得的數字：123
經過Number() 函數轉換字符串'123abc' 後獲得的數字：NaN
經過Number() 函數轉換字符串'abc123' 後獲得的數字：NaN
經過parseInt() 函數轉換字符串'123' 後獲得的數字：123
經過parseInt() 函數轉換字符串'123abc' 後獲得的數字：123
經過parseInt() 函數轉換字符串'abc123' 後獲得的數字：NaN

7 : String()和toString()的區別
String()和toString()同樣都會返回字符串，區別在於對null的處理
String()會返回字符串"null"
toString() 就會報錯，沒法執行

<script>
  var a = null;
  document.write('String(null) 把空對象轉換爲字符串：'+String(a));  
  document.write("<br>");  
  document.write('null.toString() 就會報錯，因此後面的代碼不能執行');  
  document.write(a.toString());  
  document.write("由於第5行報錯，因此這一段文字不會顯示");  
</script>

運行效果：
String(null) 把空對象轉換爲字符串：null
null.toString() 就會報錯，因此後面的代碼不能執行

隱式轉換

在某些狀況下，即便咱們不提供顯示轉換，Javascript也會進行自動類型轉換，主要狀況有：

1. 用於檢測是否爲非數值的函數：isNaN(mix)

isNaN()函數，經測試發現，該函數會嘗試將參數值用Number()進行轉換，若是結果爲「非數值」則返回true，不然返回false。

2. 遞增遞減操做符（包括前置和後置）、一元正負符號操做符

這些操做符適用於任何數據類型的值，針對不一樣類型的值，該操做符遵循如下規則（通過對比發現，其規則與Number()規則基本相同）：

若是是包含有效數字字符的字符串，先將其轉換爲數字值（轉換規則同Number()），在執行加減1的操做，字符串變量變爲數值變量。
若是是不包含有效數字字符的字符串，將變量的值設置爲NaN，字符串變量變成數值變量。
若是是布爾值false，先將其轉換爲0再執行加減1的操做，布爾值變量編程數值變量。
若是是布爾值true，先將其轉換爲1再執行加減1的操做，布爾值變量變成數值變量。
若是是浮點數值，執行加減1的操做。
若是是對象，先調用對象的valueOf()方法，而後對該返回值應用前面的規則。若是結果是NaN，則調用toString()方法後再應用前面的規則。對象變量變成數值變量。

小測驗：

分別對如下類型的值執行後置遞增操做，結果是什麼？