前言

JavaScript類型轉換你弄懂了多少？

JavaScript類型在什麼情況下會發生類型自動轉換

大家都知道 JavaScript 是弱類型語言，而且 JavaScript 聲明變量的時候並沒有預先確定的類型，變量的類型就是其值的類型，也就是說變量當前的類型由其值所決定,誇張點說上一秒種的String，下一秒可能就是個Number類型了，這個過程可能就進行了某些操作發生了強制類型轉換。雖然弱類型的這種不需要預先確定類型的特性給我們帶來了便利，同時也會給我們帶來困擾，為了能充分利用該特性就必須掌握類型轉換的原理。

下面我們來介紹JavaScript類型在什麼情況下會發生類型自動轉換：

什麼時候自動轉換為string類型

JavaScript類型轉換你弄懂了多少？

JavaScript類型在什麼情況下會發生類型自動轉換

一、在沒有對象的前提下

字符串的自動轉換，主要發生在字符串的加法運算時。當一個值為字符串，另一個值為非字符串，則後者轉為字符串。

'2' + 1 // '21' 
'2' + true // "2true" 
'2' + false // "2false" 
'2' + undefined // "2undefined" 
'2' + null // "2null"

二、當有對象且與對象+時候

//toString的對象 
var obj2 = { 
 toString:function(){ 
 return 'a' 
 } 
} 
console.log('2'+obj2) 
//輸出結果2a 
 
//常規對象 
var obj1 = { 
 a:1, 
 b:2 
} 
console.log('2'+obj1)； 
//輸出結果 2[object Object] 
 
//幾種特殊對象 
'2' + {} // "2[object Object]" 
'2' + [] // "2" 
'2' + function (){} // "2function (){}" 
'2' + ['koala', 1] // 2koala,1

JavaScript類型轉換你弄懂了多少？

JavaScript類型在什麼情況下會發生類型自動轉換

string類型轉換開發過程中可能出錯的點：

var obj = { 
 width: '100' 
}; 
 
obj.width + 20 // "10020"

什麼時候自動轉換為Number類型

一、有加法運算符，但是無String類型的時候，都會優先轉換為Number類型

true + 0 // 1 
true + true // 2 
true + false //1

二、除了加法運算符，其他運算符都會把運算自動轉成數值。

'5' - '2' // 3 
'5' * '2' // 10 
true - 1 // 0 
false - 1 // -1 
'1' - 1 // 0 
'5' * [] // 0 
false / '5' // 0 
'abc' - 1 // NaN 
null + 1 // 1 
undefined + 1 // NaN 
 
//一元運算符（注意點） 
+'abc' // NaN 
-'abc' // NaN 
+true // 1 
-false // 0

注意：null轉為數值時為0，而undefined轉為數值時為NaN。

JavaScript類型轉換你弄懂了多少？

JavaScript類型在什麼情況下會發生類型自動轉換

什麼時候進行布爾轉換

一、布爾比較時

二、if(obj) , while(obj)等判斷時或者三元運算符只能夠包含布爾值

條件部分的每個值都相當於false，使用否定運算符後，就變成了true

if ( !undefined 
 && !null 
 && !0 
 && !NaN 
 && !'' 
) { 
 console.log('true'); 
} // true 
 
//下面兩種情況也會轉成布爾類型 
expression ? true : false 
!! expression

js中的數據類型判斷

JavaScript類型轉換你弄懂了多少？

JavaScript類型在什麼情況下會發生類型自動轉換

三種方式，分別為 typeof、instanceof 和Object.prototype.toString()

一、typeof

通過 typeof操作符來判斷一個值屬於哪種基本類型。

typeof 'seymoe' // 'string' 
typeof true // 'boolean' 
typeof 10 // 'number' 
typeof Symbol() // 'symbol' 
typeof null // 'object' 無法判定是否為 null 
typeof undefined // 'undefined' 
 
typeof {} // 'object' 
typeof [] // 'object' 
typeof(() => {}) // 'function'

上面代碼的輸出結果可以看出，

1、null 的判定有誤差，得到的結果如果使用 typeof，null得到的結果是object

2、操作符對對象類型及其子類型，例如函數（可調用對象）、數組（有序索引對象）等進行判定，則除了函數都會得到 object 的結果。

綜上可以看出typeOf對於判斷類型還有一些不足，在對象的子類型和null情況下。

二、instanceof

通過 instanceof 操作符也可以對對象類型進行判定，其原理就是測試構造函數的prototype 是否出現在被檢測對象的原型鏈上。

[] instanceof Array // true 
({}) instanceof Object // true 
(()=>{}) instanceof Function // true

注意：instanceof 也不是萬能的。舉個例子：

let arr = [] 
let obj = {} 
arr instanceof Array // true 
arr instanceof Object // true 
obj instanceof Object // true

在這個例子中，arr 數組相當於 new Array() 出的一個實例，所以 arr.__proto__ === Array.prototype，又因為 Array屬於 Object 子類型，即Array.prototype.__proto__ === Object.prototype，因此 Object 構造函數在 arr 的原型鏈上。所以 instanceof 仍然無法優雅的判斷一個值到底屬於數組還是普通對象。

Object.prototype.toString() 可以說是判定 JavaScript 中數據類型的終極解決方法了，具體用法請看以下代碼：

Object.prototype.toString.call({}) // '[object Object]' 
Object.prototype.toString.call([]) // '[object Array]' 
Object.prototype.toString.call(() => {}) // '[object Function]' 
Object.prototype.toString.call('seymoe') // '[object String]' 
Object.prototype.toString.call(1) // '[object Number]' 
Object.prototype.toString.call(true) // '[object Boolean]' 
Object.prototype.toString.call(Symbol()) // '[object Symbol]' 
Object.prototype.toString.call(null) // '[object Null]' 
Object.prototype.toString.call(undefined) // '[object Undefined]' 
 
Object.prototype.toString.call(new Date()) // '[object Date]' 
Object.prototype.toString.call(Math) // '[object Math]' 
Object.prototype.toString.call(new Set()) // '[object Set]' 
Object.prototype.toString.call(new WeakSet()) // '[object WeakSet]' 
Object.prototype.toString.call(new Map()) // '[object Map]' 
Object.prototype.toString.call(new WeakMap()) // '[object WeakMap]'

JavaScript類型轉換你弄懂了多少？