JavaScript 變數詳解：從基礎到實戰

在

變數是 JavaScript 的核心組成部分，也是幾乎所有程式語言的基礎。它們就像程式中的「資料容器」，讓我們能夠儲存、調用和修改資訊，是實現複雜邏輯、建構動態功能的基石。本文將帶你從零掌握 JavaScript 變數的定義、使用與核心特性。

一、什麼是變數？生活化比喻輕鬆理解

簡單來說，變數就是儲存資料的「容器」。我們可以用日常生活中的「抽屜」來類比：

  1. 建立抽屜（宣告變數）：先準備一個空抽屜，給它貼上標籤（變數名），告訴別人這個抽屜是用來放東西的。

  2. 放入物品（賦值）：把需要保存的東西（資料）放進抽屜裡。

  3. 取用/替換（呼叫/修改）：之後可以隨時從抽屜裡拿東西用，也能把舊東西拿出來，換成新的。

例如，我們想讓瀏覽器彈出數字「25」，直接寫 alert(25) 當然可以，但用變數會更靈活：

// 宣告變數 x 並給它賦值 25（「建立抽屜並放入 25」）
var x = 25;
// 呼叫變數 x，瀏覽器會彈出 x 存儲的值「25」
alert(x);

動手試試：在 HTML 中運行 JavaScript

創建一個名為 index.html 的檔案，把變數程式碼寫在 <script> 標籤裡：

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript 變數實戰</title>
</head>
<body>
    <h1>變數入門範例</h1>
    <script>
        // 這裡寫 JavaScript 程式碼
        var username = "小明";
        alert("歡迎你，" + username + "！");
    </script>
</body>
</html>

用瀏覽器打開這個檔案，就能看到彈出的歡迎提示——這就是變數的實際作用！

二、變數的核心操作：宣告、賦值與修改

變數的使用離不開「宣告」和「賦值」兩個步驟，掌握這兩個操作，就掌握了變數的基本用法。

1. 宣告變數：告訴程式「我要一個容器」

在 JavaScript 中，宣告變數需要使用變數宣告關鍵字。早期最常用的是 var，後來 ES6（2015 年）新增了 let 和 const（現代開發更推薦使用）。

宣告語法很簡單：關鍵字 + 變數名;

// 用 var 宣告一個叫 age 的變數（此時是「空抽屜」）
var age;
// 用 let 宣告一個叫 gender 的變數
let gender;

2. 賦值：給「容器」裝資料

宣告變數後，用 = （賦值運算子）給變數添加資料，這一步叫「賦值」。也可以把宣告和賦值合併成一行（更常用）：

// 先宣告，後賦值
var age;
age = 18; // 給 age 賦值 18

// 宣告+賦值合併
let gender = "男";
const height = 1.75; // const 宣告的變數必須同時賦值，且不能修改

3. 修改變數：更新「容器」中的資料

變數的靈活性在於「可以修改存儲的值」。注意：修改時不需要再寫宣告關鍵字（var/let），直接用變數名賦值即可；JavaScript 允許變數跨類型修改（例如把數字改成字串、布林值等）。

// 宣告並賦值一個數字變數
let score = 85;
console.log(score); // 輸出：85

// 修改為另一個數字
score = 92;
console.log(score); // 輸出：92

// 跨類型修改為字串
score = "優秀";
console.log(score); // 輸出：優秀

⚠️ 注意：const 宣告的變數不能修改（constant 常量），強行修改會報錯：

const pi = 3.14;
pi = 3.1415; // 報錯：Assignment to constant variable.

三、JavaScript 中的常見資料型別

變數儲存的資料有不同的「型別」，JavaScript 會根據資料型別處理邏輯（例如數字可做加減，字串可拼接）。常見基礎資料型別有三種：字串、數字、布林值。

1. 字串（String）：文字資料

字串是文字內容的統稱，必須用**單引號（'）、雙引號（"）或反引號（`）**包裹，否則 JavaScript 會把它當作變數名，可能導致錯誤。

// 單引號字串
let greeting = 'Hello World!';
// 雙引號字串（與單引號功能一致）
let name = "小紅";
// 反引號字串（支持換行和模板語法）
let info = `姓名：${name}
年齡：18`;
console.log(info);
// 輸出：
// 姓名：小紅
// 年齡：18

✨ 小技巧：反引號的 ${變數名} 可直接將變數嵌入字串，不用拼接 +，非常方便！

2. 數字（Number）：整數與小數

數字型別包含整數、小數，不需要加引號，直接書寫即可。JavaScript 不區分整數和浮點數，統一為 Number。

// 整數
let count = 100;
// 小數
let price = 99.9;
// 特殊數字：NaN（Not a Number）
let invalidNum = "abc" - 1;
console.log(invalidNum); // 輸出：NaN

3. 布林值（Boolean）：真假判斷

布林值只有兩個可能的值：true（真）和 false（假），主要用於條件判斷。

let isStudent = true;
let hasGraduated = false;

if (isStudent) {
  console.log("享受學生優惠");
} else {
  console.log("不享受學生優惠");
}
// 輸出：享受學生優惠

四、變數宣告關鍵字對比：var、let、const 怎麼選？

ES6 之前只有 var，但它有設計缺陷（例如「變數提升」「全域污染」），現代開發更推薦 let 和 const。

關鍵字 作用域 能否重複宣告 能否修改值 推薦場景
var 函數級/全域 能 能 不推薦（僅兼容舊程式碼）
let 區塊級（{}內） 不能 能 儲存需修改的值（如計數器）
const 區塊級（{}內） 不能 不能 儲存不需修改的值（如常量）

為什麼優先用 let 和 const？

舉例「區塊級作用域」：let 和 const 只在 {} 內有效，避免 var 的全域污染問題。

if (true) {
  var a = 1; // var 宣告，作用域穿透到外部
  let b = 2; // let 宣告，僅在 if 的 {} 內有效
}
console.log(a); // 輸出：1
console.log(b); // 報錯：b is not defined

最佳實踐：

  1. 優先使用 const（大部分變數值不需修改）；

  2. 需要修改時再用 let；

  3. 避免使用 var。

五、變數命名規則：這些坑千萬別踩！

給變數命名時，必須遵守 JavaScript 語法規則，並保持可讀性，讓他人（或未來的自己）能快速理解變數意義。

1. 語法規則（必須遵守）

  • 只能由 字母、數字、底線（_）、美元符號（$） 組成；

  • 不能以 數字開頭（例如 1age 錯，age1 對）；

  • 不能使用 JavaScript 保留字（如 var、let、if）；

  • 區分 大小寫（Age 與 age 為不同變數）。

2. 可讀性原則（推薦遵守）

  • 用 英文單字 命名（避免拼音）；

  • 採用 小駝峰命名法（第一個單字首字母小寫，後面單字首字母大寫，例如 userAge、totalScore）；

  • 見名知義（變數名要能反映資料內容，例如 count 表示「計數」，price 表示「價格」）。

❌ 錯誤示例：123abc（數字開頭）、var（關鍵字）、my name（含空格）
✅ 正確示例：user123、myName、$total

六、總結：變數核心知識回顧

  1. 變數的本質：儲存資料的「容器」，類比生活中的「抽屜」。

  2. 核心操作：宣告（let/const/var）→ 賦值（=）→ 修改（重新賦值，const 除外）。

  3. 三大基礎型別：

    • 字串：文字，需用引號包裹（推薦反引號模板語法）；

    • 數字：整數/小數，直接書寫；

    • 布林值：true/false，用於條件判斷。

  4. 關鍵字選擇：優先 const，需要修改時用 let，避免 var。

  5. 命名規範：遵守語法規則，採用小駝峰命名法，見名知義。

掌握變數是學習 JavaScript 的第一步，接下來可以深入學習「條件判斷（if 語句）」「迴圈」「函式」等進階知識——這些都離不開變數的靈活運用。


留言

發佈留言