JS 我轉型我又轉了打我阿笨蛋

何謂強制轉型、以及如何作到轉換型別？

javscript 在型別上存在著為人詬病的一個問題就是自動轉型的問題，
你可能在開始時將變數定為數字在程式碼運算過程中，因為某些原因導致他最終的輸出結果，
不如預期的維持在數字型別，至於為什麼會這樣呢讓我們繼續看下去

Javascript 動態型別

javascript 的資料結構形式上，屬於弱型別的架構，屬於在程式上你不必特別宣告變數型別，
在程式運行中型別會自動因為值的形式賦予給變數，所以在一個變數上能夠具有多種型別的形式，
因為變數本身沒有型別的概念，

let a = 0; // 宣告變數並賦予數字 0 當前型別為數字
// 實際執行時 會是先創建變數 a 並賦予 undefined 的型別，在賦予 數值 0 在變數 a 身上
a = '123'; // 重新賦予變數 a 字串 '123' 當前型別自動轉型為字串
a = true; // 重新賦予變數 a 布林值 true 當前型別自動轉換為布林值

// 由此可知 javascript 在程式執行的過程可不斷地對變數進行型別的改變，
// 而程式本身並不會報錯

轉變 [隱式,顯式]

javascript 之中存在著顯式跟隱式兩種類型的型別轉變方式

隱式

透過加法邏輯運算後的轉變

let a = 1
let b = '123'

console.log(a + b) // 結果得出"1123"
// javascript 自動轉型了 a 變數的數值類型 讓他能夠跟變數 b 的字串相加

console.log(b - a) // 結果得出 122
// javascript 自動轉型了 b 變數的字串類型 讓他能夠跟變數 a 的數字相減

// 在邏輯運算式之中 - * / 都會自動地將型別轉換為數字 以能夠計算

let c = 'hello world'

console.log(a - c) // 結果得出NaN
console.log(b - c) // 結果也是NaN
// 將不是數字的東西做 - * / 將會被帶入NaN not a number的值

let d = true
let e = false
let f = 5

console.log(d - f) // 結果得出 -4
console.log(d + e) // 得出結果 1
console.log(e * f) // 得出結果 0
// 布林值 在做邏輯運算時，會自動將 true 轉換成 數字 1，false 轉換成 數字 0
// 若是將非 0 得數字轉換為布林值則得到 true

let g = null

console.log(f + g) // 得出結果 5
console.log(d - g) // 得出結果 1
// null 在做邏輯運算時，會自動轉換成為數字 0

let h

console.log(e + h) // 得出結果 NaN
console.log(f - h) // 得出結果 NaN
console.log(g * h) // 得出結果 NaN
// undefined 在任何的邏輯運算結果之下都會得到NaN

顯式

透過賦予與方法而改變的結果

// 透過 Number(N) 的函式，回傳出 N 數字型別的方法

console.log(Number('747')) // 得出結果 數字 747
console.log(Number(true)) // 得出結果 數字 1
console.log(Number(null)) // 得出結果 數字 0
console.log(Number(' ')) // 得出結果 數字 0
// 在與邏輯運算式相同的原理下，將傳入的參數回傳結果數字型別的結果

console.log(Number('hello world')) // 得出結果 NaN
console.log(Number(undefined)) // 得出結果 NaN
console.log(Number(NaN)) // 得出結果 NaN
// 故在邏輯運算式中會得到 NaN 的情況，在 Number 函式之中也是會發生

console.log(parseInt('64.01')) // 得出結果 數字 64
console.log(parseFloat('66.66')) // 得出結果 數字 66.66
console.log(+'32.04') // 得出結果 數字 32.04
console.log(Math.floor('24.01')) // 得出結果 數字 24
// 除了使用 Number 函式 還有另外 parseInt(), parseFloat(), +, Math.floor()
// 四種方式可以將型別轉換為數字

// 透過 String(N) 與 N.toString() 兩種方法將得到 N 字串型別得結果

console.log(String(432)) // 得出結果 字串 '432'
console.log(String(2 * 4)) // 得出結果 字串 '8'
console.log(String(null)) // 得出結果 字串 'null'
console.log(String(undefined)) // 得出結果 字串 'undefined'
console.log(String(NaN)) // 得出結果 字串 'NaN'
console.log(String(false)) // 得出結果 字串 'false'
console.log((321).toString()) // 得出結果 字串 '321'
console.log(true.toString()) // 得出結果 字串 'true'
// 使用 String() 在 undefined null 上可以正常得到名稱的字串
// 而使用 .toString() 則會因為 undefined 跟 null 並沒有這個屬性
// 而發生錯誤

// 透過 Boolean(N) 將 N 轉換為布林值的型別結果 

console.log(Boolean(0)) // 得出結果 布林值 'false'
console.log(Boolean('')) // 得出結果 布林值 'false'
console.log(Boolean(undefined)) // 得出結果 布林值 'false'
console.log(Boolean(null)) // 得出結果 布林值 'false'
console.log(Boolean(NaN)) // 得出結果 布林值 'false'

console.log(Boolean(' ')) // 得出結果 布林值 'true'
console.log(Boolean(123)) // 得出結果 布林值 'true'
console.log(Boolean('hello world')) // 得出結果 布林值 'true'

寫在結尾

轉換的對照表

自動轉型的動作，在 javascript 的程式之中很常見，如果不理解的話適時的使用
console.log(typeof(N)) 來進行型別檢查也是常常需要做的

參考資料

W3school - JavaScript Type Conversion
Programiz - JavaScript Type Conversion

tags: Javascript JS 直播班 - 2021 秋季班 六角學院