JS如何宣告變數-筆記

Katechou2025-08-272026-01-12

1. 變數宣告方式

使用 let 宣告變數，可以重新賦值。
使用 const 宣告常數，不可重新賦值。

1
2
3

let apple = 4;   // 宣告 apple 變數，值為 4
const pi = 3.14; // 宣告 pi 常數，值為 3.14

2. 變數命名規則

不能以數字開頭

❌ let 1apple = 3;

✅ let apple1 = 3;
大小寫敏感

let name = "小熊";
let Name = "大熊";

console.log(name); // 小熊
console.log(Name); // 大熊

不能使用保留字（如 let, if, for 等）

3. 在瀏覽器 Console 中使用變數

變數只會在 當前頁面與當前 Console session 存在。
重新整理頁面或開新分頁，變數會消失。
如果已經宣告過 let，再次賦值時 不需要重複宣告。

let count = 10;   // 第一次要用 let
count = 20;       // 之後改值，不需要 let
console.log(count); // 20

4. `let` 與 `const` 的差異

let → 可以修改值
const → 不能直接修改值

let score = 100;
score = 120;
console.log(score); // 120 ✅

const country = "Taiwan";
country = "Japan";
// ❌ TypeError: Assignment to constant variable

5. 賦值文字時要加引號

let fruit = "Apple"; // 使用雙引號或單引號都可以
let drink = 'Tea';

console.log(fruit); // Apple
console.log(drink); // Tea

📌 Console 變數特性

在 Google Chrome 開發者工具 Console 中宣告的變數：
- 只在 當前頁面 與 當前 session 有效
- 重新整理頁面 或 開新分頁 → 變數會消失，不會保留

✅ 小結：

let → 可變數值
const → 常數不可改
命名規則要遵守（不能數字開頭、大小寫敏感、不能用保留字）
Console 變數只在當前頁面有效

JavaScript 逐行拆解筆記

（含 typeof 與類型說明）

下面先放你提供的原始程式碼，接著逐行拆解並整理成筆記式重點與範例：

let friendName = "Tom";
let clause = "你好嗎?";
let total = friendName + "  " + clause;
let age = 18;
let ageString = "18";
console.log(total);
console.log(typeof friendName);
console.log(typeof age);

🧩 逐行拆解（筆記型式）

let friendName = "Tom";
- 用 let 宣告變數 friendName，值為字串 "Tom"。
- 字串需要加引號（" 或 '）。
- let 宣告的變數可以被重新賦值（可變）。
let clause = "你好嗎?";
- 宣告字串變數 clause，內容 "你好嗎?"。
let total = friendName + " " + clause;
- 使用 + 做字串 串接（concatenation）。
- 中間有 " "（兩個空白字元），結果會把空白也串進去。
- 若任一運算元是字串，+ 會把另一方也轉成字串再串接（自動型別轉換）。
範例：total 的值 → "Tom 你好嗎?"

更簡潔的寫法（推薦）：
1
2
let total = `${friendName} ${clause}`; // template literal（可讀性更好）
let age = 18;
- age 是數字（Number），不加引號表示數字型別，可做算術運算。
let ageString = "18";
- ageString 是字串，即使內容看起來像數字也 是字串（因為有引號）。
console.log(total);
- 在開發者工具（Console）會顯示 Tom 你好嗎?。
console.log(typeof friendName);
- typeof 用來檢查變數的型別（回傳字串）。
- 這行會印出："string"。
console.log(typeof age);
- 會印出："number"。

🔎 執行輸出（預期結果）

Tom  你好嗎?
string
number

⚠️ 類型與型別行為要點

typeof 會回傳一個表示型別的字串（例如 "string", "number", "boolean", "undefined", "object", "function"）。
常見 JS 小坑：
- typeof null === "object"（歷史遺留問題）
- typeof NaN === "number"（NaN 還是 number 型別）
- typeof [] === "object"（陣列的 typeof 也是 object）

⚠️ JavaScript `typeof` 常見小坑

1. `typeof null === "object"`

原因：
- 在早期的 JS 設計（大概 1995 年），null 的二進位標記是 全 0。
- 當時用來判斷型別的內部實作錯誤地把「全 0」解讀成 object。
- 這個 bug 一直被保留下來，因為修改會造成大量舊程式碼壞掉。
實際上：
- null 代表「空值」或「沒有值」。
- 它不是物件，但 typeof 會誤判成 "object"。

正確判斷方式：

console.log(typeof null); // "object" (誤導)
console.log(null === null); // true (判斷是否為 null 最安全的方法)
console.log(value === null); // 判斷變數是否為 null

2. `typeof NaN === "number"`

NaN = Not a Number（不是數字）。
但它的型別其實仍然是 數字型別（number），只是這個數字是「無效的數字運算結果」。

例子：

console.log(typeof NaN); // "number"

console.log(0 / 0);       // NaN
console.log(Number("abc")); // NaN
console.log(Math.sqrt(-1)); // NaN

檢查 NaN：

不要用 ===，因為 NaN === NaN → false（NaN 不等於任何東西，包含自己）。

正確做法：

1
2
3

console.log(Number.isNaN(NaN)); // true
console.log(isNaN("abc"));      // true (會先嘗試轉數字再檢查)

3. `typeof [] === "object"`

陣列在 JS 裡其實是一種特殊的物件。
因此 typeof [] 會得到 "object"。

正確判斷陣列的方法：

let arr = [1, 2, 3];
console.log(typeof arr);           // "object"
console.log(Array.isArray(arr));   // true ✅
console.log(arr instanceof Array); // true ✅

✅ 小結

typeof null → "object"（歷史 bug）
typeof NaN → "number"（NaN 是非法數值，但型別還是 number）
typeof [] → "object"（陣列其實是物件，要用 Array.isArray() 來判斷）

🔁 型別轉換範例（常見情境）

let age = 18;
let ageString = "18";

console.log(age + 2);              // 20      (數字相加)
console.log(age + "2");            // "182"   (數字 + 字串 -> 字串串接)
console.log(ageString + 2);        // "182"   (字串 + 數字 -> 字串串接)

console.log(Number(ageString) + 2);   // 20   (把字串轉成數字)
console.log(parseInt("18px") + 2);    // 20   (parseInt 會讀到非數字就停)
console.log(Number("18px"));          // NaN  (Number 無法解析 "18px" -> NaN)

✅ 比較運算要注意（`==` vs `===`）

1
2
3

console.log(age == ageString);  // true   (== 會做型別轉換再比較)
console.log(age === ageString); // false  (=== 不做型別轉換，型別與數值都要相同)

建議： 優先使用 ===（嚴格相等）來避免意外的型別轉換。

📋 小結 / 快速筆記

用 let 宣告可變變數；用 const 宣告不會被重新賦值的常數。
字串要加引號；沒引號的是數字或其他型別。
+ 若碰到字串會變成字串串接（可能導致數字被轉成字串）。
typeof 可以快速檢查變數型別。
需要在字串與數字間轉換時，使用 Number()、parseInt()、parseFloat() 或 String()。
比較時用 === 比較安全。

1. 變數宣告方式

2. 變數命名規則

3. 在瀏覽器 Console 中使用變數

4. let 與 const 的差異

5. 賦值文字時要加引號

📌 Console 變數特性

JavaScript 逐行拆解筆記

🧩 逐行拆解（筆記型式）

🔎 執行輸出（預期結果）

⚠️ 類型與型別行為要點

⚠️ JavaScript typeof 常見小坑

1. typeof null === "object"

2. typeof NaN === "number"

3. typeof [] === "object"

✅ 小結

🔁 型別轉換範例（常見情境）

✅ 比較運算要注意（== vs ===）

📋 小結 / 快速筆記

4. `let` 與 `const` 的差異

⚠️ JavaScript `typeof` 常見小坑

1. `typeof null === "object"`

2. `typeof NaN === "number"`

3. `typeof [] === "object"`

✅ 比較運算要注意（`==` vs `===`）