[22] 強制轉型 - ToBoolean、Falsy、Truthy


keywords:ToBoolean,falsy,truthy

ToBoolean

JavaScript 有實際的 true / false,在其他語言值 1 等同於 true,0 等同於 false,但在 JavaScript 中 number 就是 number,boolean 就是 boolean,可以把 1 強制轉型為 true ,或將 0 轉為 false ,但它們 ( 1 / true ) 並不相同

在前面有稍微整理過 JavaScript 中四項 7 個強制轉型會是 false 的文章 - [04] JavaScript 入門 - 強制轉型、?Truthy & Falsy、條件式
罷特! 2021 規格書 7.1.3 中的 Table 10 多了一個 BigInt,所以現在變成五項 8 個了 🙃
ToBoolean-falsy

Falsy 值

這邊再整理一次增加 BigInt 的版本,所以以後就是五項 8 個 Falsy 值

  1. ''
  2. +0、-0、NaN ( 無效的數字 )
  3. null、undefined
  4. false
  5. 0n

Falsy 物件

Table 10 指出所有物件都是 truthy,那如果包裹一個 falsy 的物件包裹器轉成 Boolean 會是什麼呢 🤔

    let a = new Boolean(false);

    let b = new Number(0);

    let c = new String('');

    false、0、'' 基本型別值強制轉型都會是 false

    typeof a; // object

    Boolean({}); // true

    Boolean(a); // true

    Boolean( a && b && c ); // true
  • 另外一個最廣為人知的是 document.all,是一個類陣列 ( array-like ) 物件,是由 DOM 提供的 JavaScript 程式而非 JavaScript 引擎本身 ( what? document 老兄我一直以為你是 JavaScript 提供的啊 ),它以前像是個正常的物件,轉成 Boolean 是 truthy
  • 過去 document.all 總是被用來偵測非標準或舊的IE 的方法,無法完全移除,而 IE 也不希望這些舊的程式碼 if( document.all ){...} 繼續運作,( 刪不掉也不想再用,該怎麼辦呢? )
  • 所以把 document.all 設為 false,不移除前人留下的 code 也讓 IE 用新的 code,所以瀏覽器為 JavaScript 新增一個瘋狂而且非標準的 falsy 物件 ( OMG 😱 罷特! 做點什麼總比什麼都不做來得好! )

Truthy 值

JavaScript 沒有真正定義一個 truthy 值清單,所以除了五項 8 個 falsy 值之外的,全部都是 truthy 值

    let a = 'false';

    let b = '0';

    let c = '""';

    let d = Boolean ( a && b && c );

    d; // true

    a b c 皆為 string 值,所以都是 truthy

    注意 c 是包含 "" 的字串,所以會是 true

    ------------------------------------------

    How about these?

    let e = [];

    let f = {};

    let g = function(){};

    let h = Boolean ( e && f && g );

    h; // true

    因為 []、{}、function(){} 這三個都沒有出現在五項 8 個 falsy 清單,不過也因為它們是 Object 根據 Table 10 皆為 true

Truthy 與 Falsy 的重要性在於了解一個值被強制轉型 ( 不管是明確或隱含地 ) 為 Boolean 時會有什麼行為
🚩建議是把五項 8 個 Falsy 值背起來,時不時就問自己有哪 8 個

#ToBoolean #falsy #truthy
「你所不知道的 JS 」系列書籍閱讀心得,未閱讀前對於 JavaScript 皆是懵懵懂懂,因面試時發現自己很多觀念都不正確不清楚,所以這次一探 JavaScript 的運作方式。 * 系列一開始會先把大方向簡短的整理,之後會以每個項目做詳細的筆記






Related Posts

Reactive Programming 簡介與教學(以 RxJS 為例)

Reactive Programming 簡介與教學(以 RxJS 為例)

Day2 android UI實作+activity介紹!!

Day2 android UI實作+activity介紹!!

七天帶你初探AR世界-Day 3

七天帶你初探AR世界-Day 3



Sponsored



Comments