0%

強制轉型 (Coercion)

發表於 分類於

今天我們要來認識在 JavaScript 中一個重要的觀念 —— 強制轉型。

強制轉型 (Coercion)

強制轉型是轉換一個值的型別到其他型別。

你可能有個數字，要轉換成字串；或是有字串，要轉換成數字，這在 JavaScript 很常發生，因為 JavaScript 是動態型別的語言。

舉例來說，我們知道 + 運算子會傳入兩個參數，並回傳一個結果給你，所以當傳入數字時，數字能相加。

1
2
var a = 1 + 2;
console.log(a); // 3

但如果我改成傳入字串，會發生什麼事呢 ?

1
2
var a = 'Hello ' + 'World!';
console.log(a); // Hello World!

我們會得到一個 Hello World! 的結果，這表示字串不會像數字一樣相加，而是會連接兩個字串，把它們放在一起。

現在我們知道數字和字串相加的結果分別是如何，那如果我傳入不同的型別的參數給運算子，會發生什麼事 ?

1
2
var a = 1 + '2';
console.log(a);

我們會發現結果為 12，為什麼會這樣，是 JavaScript 錯亂了嗎 ?

不是的，這是因為數字 1 會被 JavaScript 強制轉成字串，主要是因為當 + 運算子遇上字串時，+ 所代表的是字串的運算子，所以數字 1 會被轉換成字串。

補充：在記憶體中，數字 1 和字串 1 是不同的，即使看起來很像，但在記憶體中卻是完全不同的東西。

了解強制轉型是很重要的事，能避免一些奇怪的 bug，而當有奇怪的部分也能 debug，舉例來說，當我們有變數 a 和 b，分別是數字和字串，由於強制轉型的關係，我們知道輸出的結果為 12。

1
2
var a = 1, b ='2';
console.log(a + b); // 12

但如果有很多程式夾在這兩行程式之中，而 b 又在某些地方被設成字串，尚未了解強制轉型的人可能會很困惑為什麼結果是 12，但我們了解強制轉型，知道這之中發生什麼事。

1
2
3
4
5
6
7
8
9
var a = 1, b = 2;

// ...

b = '2'

// ...

console.log(a + b);

額外補充

這邊列出一些基本型態相加的轉型結果，可以參考。

  • 遇到 String (字串)：轉型的結果幾乎都是字串。

    1
    2
    3
    4
    'I am ' + 0;          // I am 0 
    'I am ' + undefined;  // I am undefined
    'I am ' + null;       // I am null
    'I am ' + true;       // I am true

  • 遇上數字 (Number)：與非數字相加會得到 NAN，至於 null 會被轉型成 0，boolean 會依據 true 和 false 轉型成 1 和 0。

    1
    2
    3
    4
    1 + 0;          // 1
    1 + undefined;  // NAN
    1 + null;       // 1
    1 + true;       // 2

  • 遇上 undefined：會被轉換成非數字相加，得到 NAN

    1
    2
    3
    undefined + undefined;  // NAN
    undefined + null;       // NAN
    undefined + true;       // NAN

  • 遇上 null：會被轉換 0。

    1
    2
    null + null;       // 0
    null + true;       // 1

  • 遇上 boolean：會依據 true 和 false 轉型成 1 和 0。

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

總結

了解強制轉型，我們就能理解在 JavaScript 中所發生的一些奇怪的事，透過今天所學到的觀念，加深我們對 JavaScript 之間的距離。

參考資料

來源：你懂 JavaScript 嗎？#8 強制轉型（Coercion）