JavaScript 語法基礎 — 區分大小寫（Case Sensitivity）

簡介

在 JavaScript 中，大小寫是絕對敏感的。不論是變數、函式、物件屬性，甚至是關鍵字，只要字母的大小寫不同，就會被視為兩個完全不同的識別子。這個特性看似簡單，卻是寫出正確且可維護程式碼的根本。忽略大小寫的差異，常會造成執行錯誤、難以偵測的 bug，甚至在團隊合作時產生衝突。

本篇文章將深入說明 JavaScript 的大小寫規則，提供實用範例、常見陷阱與最佳實踐，讓你在開發過程中能 自信且正確 地使用大小寫，提升程式碼品質與可讀性。

核心概念

1. 變數與函式名稱的大小寫

JavaScript 會把 myVar、MyVar、MYVAR 視為 三個獨立的變數。同樣的規則也適用於函式名稱。

let userName = "Alice";
let UserName = "Bob";

function greet() {
  console.log("Hello, " + userName);
}
function Greet() {
  console.log("Hi, " + UserName);
}

greet(); // Hello, Alice
Greet(); // Hi, Bob

註：上述程式碼中，userName 與 UserName、greet 與 Greet 完全不相干，若不小心混用會導致未預期的結果。

2. 內建物件與方法的正確大小寫

所有 ECMAScript 標準的內建物件（如 Array、Date、Math）與其方法，都有固定的大小寫寫法。錯誤的大小寫會拋出 ReferenceError 或 TypeError。

// 正確寫法
let arr = new Array(1, 2, 3);
console.log(Math.max(...arr)); // 3

// 錯誤寫法（會拋錯誤）
let arr2 = new array(1, 2, 3);   // ReferenceError: array is not defined
console.log(math.max(...arr2)); // ReferenceError: math is not defined

3. 物件屬性名稱的大小寫

在物件字面量或點記法 (obj.prop) 中，屬性名稱同樣遵守大小寫敏感。若使用字串鍵則可自由大小寫，但存取時仍須保持一致。

let person = {
  firstName: "Tom",
  FirstName: "Jerry"
};

console.log(person.firstName); // Tom
console.log(person.FirstName); // Jerry

// 使用字串鍵的情況
let data = {
  "User-ID": 12345
};
console.log(data["User-ID"]); // 12345
// data.User-ID 會被解讀為 data.User - ID，產生語法錯誤

4. 模組匯入與匯出（ES6）

模組檔案名稱在大多數作業系統（尤其是 Linux）也是大小寫敏感的。匯入路徑與實際檔案名稱必須完全相符。

// 假設有檔案 utils/Helper.js
import { calc } from "./utils/Helper.js"; // 正確
// import { calc } from "./utils/helper.js"; // 錯誤，找不到檔案

5. 字串比較的大小寫處理

若需要不分大小寫的比較，必須自行將字串統一成同一大小寫（通常使用 toLowerCase() 或 toUpperCase()）。

let input = "JavaScript";
if (input.toLowerCase() === "javascript") {
  console.log("匹配成功"); // 輸出
}

常見陷阱與最佳實踐

陷阱	說明	解決方式
變數命名混用大小寫	例如 `count` 與 `Count` 同時出現在同一範圍，容易導致錯誤	遵循命名慣例：使用 `camelCase`（變數、函式）或 `PascalCase`（類別）
內建物件拼寫錯誤	`String` → `string`、`Array` → `array` 等	使用 IDE 或 Linter，即時提示未定義的名稱
模組路徑大小寫不一致	在 Windows 開發、Linux 部署時產生差異	在版本控制前檢查檔名大小寫，或在 `package.json` 中設定 `"type": "module"` 以強制檢查
屬性名稱不一致	例如 `obj.userName` 與 `obj.UserName`	統一使用字串鍵或使用 TypeScript 讓編譯階段捕捉錯誤
字串比較忽略大小寫	直接 `===` 會失敗	使用 `toLowerCase()` / `toUpperCase()` 或正則表達式加 `i` 標誌

最佳實踐

統一命名規則：
- 變數、函式 → camelCase
- 類別、建構子 → PascalCase
- 常數 → UPPER_SNAKE_CASE
開啟 Linter（ESLint）：自動檢查未宣告變數、錯誤的大小寫等問題。
在團隊中制定風格指南：如 Airbnb、Google JavaScript Style Guide，減少個人習慣造成的衝突。
利用 TypeScript：靜態型別檢查能在編譯階段捕捉大小寫不一致的屬性存取。

實際應用場景

1. 前端表單驗證

在處理使用者輸入的欄位名稱時，若後端 API 使用 snake_case，前端必須在送出前將鍵名轉換為正確大小寫，避免 400 錯誤。

function formatPayload(formData) {
  return {
    user_name: formData.userName,   // 前端變數 userName → 後端 user_name
    email: formData.email
  };
}

2. 動態產生物件屬性

在根據 API 回傳的欄位動態建立物件時，保持原始鍵名的大小寫，否則後續存取會失敗。

let apiResponse = { "ProductID": 101, "productName": "Keyboard" };
let product = {};

for (let key in apiResponse) {
  product[key] = apiResponse[key]; // 直接保留大小寫
}

console.log(product.ProductID); // 101

3. 多平台部署

開發時在 Windows 上測試，檔案路徑 ./Components/Button.js 正常；部署到 Linux 時若寫成 ./components/button.js，會因大小寫不符而 找不到模組。解決方法是 在 CI/CD 流程中加入檔名大小寫檢查。

總結

JavaScript 的 大小寫敏感 特性貫穿語言的每一層面，從變數、函式到內建物件、模組路徑，都必須保持一致。透過統一的命名規則、使用 Linter、以及在團隊內部建立風格指南，可以有效避免因大小寫不一致而產生的錯誤。掌握這些原則後，你的程式碼將更可靠、可讀且易於維護，在實務開發與團隊協作中也會更加順暢。祝你寫程式碼時，大小寫永遠正確，錯誤永遠遠離！