本篇內容參考連結
PJCHENder - coercion系列

Coercion

Definition

Javascript中的 Coercion是指將資料強迫從一種型態轉為另外一種型態的特性. 直接參考下面簡單例子

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

輸出則會得到 '12'(string) 而非 3 (number), 因為 Coercion 的關係, 在做運算時, JS 引擎把原本型態為number的1轉換成字串'1', 在相加後才會得到字串'12'.

If Practice

知道此特性後, 在寫程式上, 可以借由此特性來轉寫If的判斷式, 首先觀察 "Null" "undefined" 和 "", 在轉換成布林值時, 結果是如何

    console.log('null will convert to ' + Boolean(null));
    console.log('undefined will convert to ' + Boolean(undefined));
    console.log('Empty String will convert to ' + Boolean(""));

結果如下

由此我們就可以利用這樣的結果, 然後寫出確認變數使否有值的判斷式.

    var varNoValue;
    
    if(varNoValue)
        console.log("Having Value");
    else
        console.log("No Value");

但是此種方法要特別注意幾個重點,

1. 變數為字串並且為空的時候也會為false
2. 變數為數字而為0時也為false
3. 當變數給的值為布林時, 不建議用此種方法.

Advance Practice - Default Value

也可以利用Coercion, 寫出簡潔的預設值. 首先來看假如不設立預設值會發生甚麼事

    function doSomething(something)
    {
        console.log("Hello " + something);
    }
    
    doSomething("World"); // Try (a)
    doSomething(); // Try (b)

上面的例子JS並不會報錯, 先來看 Try (a), 很簡單就直接console出"Hello World", 再來看Try (b), 此種寫法並不會發生錯誤, 因為在doSomething()的execution context中something已經被定義並hoisting, 只是尚未給值, 所以Try (b)會console出 "Hello undefined" (undefined 被強制轉為字串).

那我們如何利用Coercion來寫預設值呢, 參考以下範例

    function doSomething(something)
    {
        something = something  || "<Entner Your Words>"; // 預設預設
        console.log("Hello " + something);
    }
    
    doSomething();

而這次就會輸出 "Hello <Entner Your Words>".

在開始解釋之前假如不了解JS的Precedence和Associativity可以參考此連結

我們輸入true || false, true || 'Hello', false || 'Hello' 和 'Hi' || 'Hello'都會分別回傳不同的結果。

1. true || false => true
2. true || 'Hello' => true
3. false || 'Hello' => 'Hello'
4. 'Hi' || 'Hello' => 'Hi'

當左邊為true的時候, 則會輸出true. 當左邊為false的時候, 則會判斷右邊是否為true. 因為右邊為非空字串因為Coercion的關係被轉為布林並視為true, 同時回傳字串.

此種預設值方法也要注意上方if判斷式轉換為布林值時會被視為false的幾個case.