JavaScript數(shù)據(jù)類型轉(zhuǎn)換

前言

JavaScript是一門動態(tài)語言,所謂的動態(tài)語言可以暫時理解為在語言中的一切內(nèi)容都是不確定的。比如一個變量,這一時刻是個整型,下一時刻可能會變成字符串了。雖然變量的數(shù)據(jù)類型是不確定的,但是各種運算符對數(shù)據(jù)類型是有要求的。如果運算符發(fā)現(xiàn),運算子的類型與預(yù)期不符,就會自動轉(zhuǎn)換類型。

本文主要介紹數(shù)據(jù)類型強制轉(zhuǎn)換和自動轉(zhuǎn)換,自動轉(zhuǎn)換是基于強制轉(zhuǎn)換之上。強制轉(zhuǎn)換主要指使用Number、String和Boolean三個函數(shù),手動將各種類型的值,分別轉(zhuǎn)換成數(shù)字、字符串或者布爾值。

一、強制轉(zhuǎn)換

1、其他的數(shù)據(jù)類型轉(zhuǎn)換為String

方式一:toString()方法

  • 調(diào)用被轉(zhuǎn)換數(shù)據(jù)類型的toString()方法,該方法不會影響到原變量,它會將轉(zhuǎn)換的結(jié)果返回,但是注意:null和undefined這兩個值沒有toString,如果調(diào)用他們的方法,會報錯
var a = 123
a.toString()//"123"
var b = null;
b.toString()//"報錯"
var c = undefined
c.toString()//"報錯"
  • 采用 Number 類型的 toString() 方法的基模式,可以用不同的基輸出數(shù)字,例如二進(jìn)制的基是 2,八進(jìn)制的基是 8,十六進(jìn)制的基是 16
var iNum = 10;
alert(iNum.toString(2));        //輸出 "1010"
alert(iNum.toString(8));        //輸出 "12"
alert(iNum.toString(16));       //輸出 "A"

方式二:String()函數(shù)

  • 使用String()函數(shù)做強制類型轉(zhuǎn)換時,對于Number和Boolean實際上就是調(diào)用的toString()方法,
    但是對于null和undefined,就不會調(diào)用toString()方法,它會將null直接轉(zhuǎn)換為"null",將undefined 直接轉(zhuǎn)換為"undefined"
var a = null
String(a)//"null"
var b = undefined
String(b)//"undefined"
  • String方法的參數(shù)如果是對象,返回一個類型字符串;如果是數(shù)組,返回該數(shù)組的字符串形式。
String({a: 1}) // "[object Object]"
String([1, 2, 3]) // "1,2,3"

2、其他的數(shù)據(jù)類型轉(zhuǎn)換為Number

方式一:使用Number()函數(shù)

下面分成兩種情況討論,一種是參數(shù)是原始類型的值,另一種是參數(shù)是對象

(1)原始類型值

①字符串轉(zhuǎn)數(shù)字

Ⅰ 如果是純數(shù)字的字符串,則直接將其轉(zhuǎn)換為數(shù)字

Ⅱ 如果字符串中有非數(shù)字的內(nèi)容,則轉(zhuǎn)換為NaN

Ⅲ 如果字符串是一個空串或者是一個全是空格的字符串,則轉(zhuǎn)換為0

Number('324') // 324
Number('324abc') // NaN
Number('') // 0

②布爾值轉(zhuǎn)數(shù)字:true轉(zhuǎn)成1,false轉(zhuǎn)成0

Number(true) // 1
Number(false) // 0

③undefined轉(zhuǎn)數(shù)字:轉(zhuǎn)成NaN

Number(undefined) // NaN

④null轉(zhuǎn)數(shù)字:轉(zhuǎn)成0

Number(null) // 0

⑤Number() 接受數(shù)值作為參數(shù),此時它既能識別負(fù)的十六進(jìn)制,也能識別0開頭的八進(jìn)制,返回值永遠(yuǎn)是十進(jìn)制值

Number(3.15);    //3.15
Number(023);     //19
Number(0x12);    //18
Number(-0x12);   //-18

(2)對象

簡單的規(guī)則是,Number方法的參數(shù)是對象時,將返回NaN,除非是包含單個數(shù)值的數(shù)組。

Number({a: 1}) // NaN
Number([1, 2, 3]) // NaN
Number([5]) // 5

方式二:parseInt() & parseFloat()

這種方式專門用來對付字符串,parseInt()一個字符串轉(zhuǎn)換為一個整數(shù),可以將一個字符串中的有效的整數(shù)內(nèi)容取出來,然后轉(zhuǎn)換為Number。parseFloat()把一個字符串轉(zhuǎn)換為一個浮點數(shù)。parseFloat()作用和parseInt()類似,不同的是它可以獲得有效的小數(shù)。

console.log(parseInt('.21'));        //NaN
console.log(parseInt("10.3"));        //10
console.log(parseFloat('.21'));      //0.21
console.log(parseFloat('.d1'));       //NaN
console.log(parseFloat("10.11.33"));  //10.11
console.log(parseFloat("4.3years"));  //4.3
console.log(parseFloat("He40.3"));    //NaN

parseInt()在沒有第二個參數(shù)時默認(rèn)以十進(jìn)制轉(zhuǎn)換數(shù)值,有第二個參數(shù)時,以第二個參數(shù)為基數(shù)轉(zhuǎn)換數(shù)值,如果基數(shù)有誤返回NaN

console.log(parseInt("13"));          //13
console.log(parseInt("11",2));        //3
console.log(parseInt("17",8));        //15
console.log(parseInt("1f",16));       //31

兩者的區(qū)別:Number函數(shù)將字符串轉(zhuǎn)為數(shù)值,要比parseInt函數(shù)嚴(yán)格很多?;旧?,只要有一個字符無法轉(zhuǎn)成數(shù)值,整個字符串就會被轉(zhuǎn)為NaN。

parseInt('42 cats') // 42
Number('42 cats') // NaN

上面代碼中,parseInt逐個解析字符,而Number函數(shù)整體轉(zhuǎn)換字符串的類型。
另外,對空字符串的處理也不一樣

Number("   ");     //0    
parseInt("   ");   //NaN

3、其他的數(shù)據(jù)類型轉(zhuǎn)換為Boolean

它的轉(zhuǎn)換規(guī)則相對簡單:只有空字符串("")、null、undefined、+0、-0 和 NaN 轉(zhuǎn)為布爾型是 false,其他的都是 true,空數(shù)組、空對象轉(zhuǎn)換為布爾類型也是 true,甚至連false對應(yīng)的布爾對象new Boolean(false)也是true

Boolean(undefined) // false
Boolean(null) // false
Boolean(0) // false
Boolean(NaN) // false
Boolean('') // false
Boolean({}) // true
Boolean([]) // true
Boolean(new Boolean(false)) // true

二、自動轉(zhuǎn)換

遇到以下三種情況時,JavaScript 會自動轉(zhuǎn)換數(shù)據(jù)類型,即轉(zhuǎn)換是自動完成的,用戶不可見。

1.自動轉(zhuǎn)換為布爾值

JavaScript 遇到預(yù)期為布爾值的地方(比如if語句的條件部分),就會將非布爾值的參數(shù)自動轉(zhuǎn)換為布爾值。系統(tǒng)內(nèi)部會自動調(diào)用Boolean函數(shù)。

if ('abc') {
  console.log('hello')
}  // "hello"

2.自動轉(zhuǎn)換為數(shù)值

算數(shù)運算符(+ - * /)跟非Number類型的值進(jìn)行運算時,會將這些值轉(zhuǎn)換為Number,然后在運算,除了字符串的加法運算

true + 1 // 2
2 + null // 2
undefined + 1 // NaN
2 + NaN // NaN 任何值和NaN做運算都得NaN
'5' - '2' // 3
'5' * '2' // 10
true - 1  // 0
'1' - 1   // 0
'5' * []    // 0
false / '5' // 0
'abc' - 1   // NaN

一元運算符也會把運算子轉(zhuǎn)成數(shù)值。

+'abc' // NaN
-'abc' // NaN
+true // 1
-false // 0

3.自動轉(zhuǎn)換為字符串

字符串的自動轉(zhuǎn)換,主要發(fā)生在字符串的加法運算時。當(dāng)一個值為字符串,另一個值為非字符串,則后者轉(zhuǎn)為字符串。

'5' + 1 // '51'
'5' + true // "5true"
'5' + false // "5false"
'5' + {} // "5[object Object]"
'5' + [] // "5"
'5' + function (){} // "5function (){}"
'5' + undefined // "5undefined"
'5' + null // "5null"

三、總結(jié)

1. 強制轉(zhuǎn)換的各種情況

image

2. 自動轉(zhuǎn)換的的各種情況

  • 只有空字符串("")、null、undefined、+0、-0 和 NaN 轉(zhuǎn)為布爾型是 false,其他的都是 true
  • 除了加法運算符(+)有可能把運算子轉(zhuǎn)為字符串,其他運算符都會把運算子自動轉(zhuǎn)成數(shù)值。一元運算符也會把運算子轉(zhuǎn)成數(shù)值。
  • 字符串的自動轉(zhuǎn)換,主要發(fā)生在字符串的加法運算時。

如果覺得文章對你有些許幫助,歡迎在我的GitHub博客點贊和關(guān)注,感激不盡!

參考文章

透徹研究Javascript類型轉(zhuǎn)換

javasript標(biāo)準(zhǔn)參考教程

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 第2章 基本語法 2.1 概述 基本句法和變量 語句 JavaScript程序的執(zhí)行單位為行(line),也就是一...
    悟名先生閱讀 4,569評論 0 13
  • 標(biāo)簽: 我的筆記 ---學(xué)習(xí)資料:http://javascript.ruanyifeng.com/ 1. 導(dǎo)論 ...
    暗夜的怒吼閱讀 950評論 0 1
  • 強制轉(zhuǎn)換 強制轉(zhuǎn)換主要指使用Number、String和Boolean三個構(gòu)造函數(shù),手動將各種類型的值,轉(zhuǎn)換成數(shù)字...
    燈火闌珊Zone閱讀 531評論 0 3
  • Javascript 中有6種基本類型(包括 symbol),以及對象類型,他們在不同的運算中會被系統(tǒng)轉(zhuǎn)化為不同是...
    faremax閱讀 930評論 0 3
  • 且歲月漫長 若清風(fēng)明月 怎抵得如你眉眼 行日月匆匆 似水艷波瀾 莫念是這眼前人 且萬物無邪 千沉夜凜空 嘆悠...
    矢墨閱讀 467評論 6 10

友情鏈接更多精彩內(nèi)容