在昨天的文章中，我們成功在網頁中引入了第一行JavaScript，並打開瀏覽器的控制台（Console），成功向網頁大腦發出了連線訊號。

當我們開始要求JavaScript幫我們處理邏輯與複雜的網頁操作時，大腦必須先學會辨認它眼前接收到的數據到底是何方神聖，在程式的世界裡，不同的資料有著不同的幾何特性與處理規則，而這就是我們今天的主題：基礎資料型態（Data Types） 與 運算子（Operators）。

JavaScript的五大原始資料型態

在JavaScript中，最基礎的數據單位被稱為「原始型態（Primitive Types）」，今天我們將介紹五個最常用的原始型態：

1.數字(Number)

• 特性：在JS中不特別區分整數或浮點數，所有數值通通歸類在數字型態中。
• 舉例：100、-25、0、3.14159。

2.字串(String)

• 特性：用來表示純文字的符號軌道，字串必須被單引號' '、雙引號 " " 或反單引號 ` 給包裹起來，否則JS會把它誤認為是程式碼指令而噴出錯誤。
• 舉例："Hello"、'鐵人賽'。

3. 布林值 (Boolean)

• 特性：代表邏輯上的對與錯，只有兩種絕對的幾何狀態：true（對/真） 和 false（錯/假）。通常用在開關控制或條件檢查。

4. 空值 (Null)

• 特性：這是一個非常有禮貌的屬性，代表「這個地方『故意』被清空了」，是一個有被明確賦予、但刻意沒放的空間。

5. 未定義 (Undefined)

• 特性：代表「這裡本該放東西，但目前還沒人給它值」，這是系統自動產生的預設虛無狀態，就像是有一個箱子卻連標籤都沒貼一樣。

算術與比較運算子

辨認出資料型態後，我們需要使用運算子來命令大腦對這些資料進行加工與算力分配。

1. 算術運算子（加、減、乘、除、取餘數）

• 基本四則運算：使用+、-、*、/ 進行數字的幾何增減。
• 取餘數（%）：例如10 % 3，結果會得到餘數1，這在實務上常用來判斷奇數或偶數。
• 字串相加：當+遇到字串時，它會瞬間從計算機變成「膠水」，例如"Day"+21會融合並升級為全新字串"Day21"。

2. 比較運算子（判定真假值）

比較運算得到的結果，一定會是布林值（true或false）：

• 幾何範圍比較：大於>、小於<、大於等於>=、小於等於 <=。
• 嚴格相等（===）：在JS中，建議永遠使用三個等號來進行比較。它會同時嚴格檢查兩邊的「數值」與「資料型態」是否百分之百吻合。
• 嚴格不相等（!==）：用來檢查兩者是否「不相同」。

實作範例

<!DOCTYPE html>
<html lang="zh-Hant">
<head>
    <meta charset="UTF-8">
    <title>Day21 基礎資料型態與運算子</title>
</head>
<body>

    <h1 style="text-align: center;">請打開 Console 觀察資料與運算結果</h1>

    <script>
        // 觀察資料型態 (使用 typeof 關鍵字) 
        console.log("資料型態檢查");
        console.log(typeof 2026);       // 印出: "number"
        console.log(typeof "鐵人賽");   // 印出: "string"
        console.log(typeof true);       // 印出: "boolean"

        //  2. 算術運算子與字串拼接 
        console.log("算術運算演練");
        console.log(100 - 45);          // 印出: 55
        console.log(10 % 3);            // 印出: 1 (取餘數)
        console.log("目前關卡：" + 21); // 印出: "目前關卡：21" (膠水融合)

        // 3. 比較運算子 (三個等號) 
        console.log(" 比較運算演練 ");
        console.log(10 > 5);            // 印出: true
        
        // 數字的7與字串"7"
        console.log(7 === "7");         // 印出: false (型態不同，一個是數字，一個是文字)
        console.log(7 == "7");          // 印出: true  (兩個等號會偷偷把型態自動轉換，實務上極度不推薦使用)
    </script>
</body>
</html>

介紹

當你觀察控制台的輸出時，可以注意到最後一個的範例：

• 當我們執行7 === "7"時，JavaScript 吐出了false，因為左邊是可以用來加減乘除的「數值幾何」，右邊是有雙引號「文字符號」，兩者在底層的基因完全不對等，透過三個等號，能幫我們的程式省下許多難以捕捉的Bug。

總結

今天我們成功幫JavaScript大腦建立了最基本的邏輯世界觀，我們學會了如何辨識五大基礎資料型態，並透過算術與比較運算子，讓程式幫我們算出正確的數據與真假結果。

但是，如果每次運算完的資料沒有找地方存起來，它們瞬間就會在網頁的記憶體裡消失。

明天（Day 22），我們將引進程式世界中的「專屬置物櫃」：變數宣告（var、let、const），嘗試把算好的資料牢牢記住，並探討現在為什麼大家都不再使用舊時代的var了，明天見。