本文 AI 產出，尚未審核

JavaScript 語法基礎 — 識別字與命名規則（Identifiers）

簡介

在任何程式語言中，識別字（Identifier） 是開發者與程式碼之間最直接的橋樑。它們代表變數、函式、類別、屬性等可被程式辨識的名稱。若命名不當，程式不只難以閱讀，還會埋下潛在的錯誤與維護成本。

在 JavaScript 這門彈性十足、同時也是大型前端與後端應用的核心語言裡，正確理解 命名規則、字元允許範圍 與 慣例，能讓你寫出易讀、可維護、避免衝突的程式碼，從入門到中階開發者都必須掌握。

本篇文章將從語法層面說明 JavaScript 識別字的規則，並結合實務範例、常見陷阱與最佳實踐，幫助你在日常開發中建立良好的命名習慣。

核心概念

1. 什麼是識別字？

在 JavaScript 中，識別字 是由 字母、數字、底線（_）或美元符號（$） 組成的字串，用來指代程式中的實體。以下是最常見的識別字類型：

類型 說明 範例
變數 用 let、const、var 宣告的名稱 let count = 0;
函式 定義或宣告的函式名稱 function fetchData() {}
物件屬性 物件內的鍵名（若符合識別字規則） user.name
類別 class 關鍵字所建立的名稱 class Person {}

注意：雖然 JavaScript 允許使用 Unicode 字元（如中文、日文）作為識別字，但在團隊開發與跨平台環境中，仍建議使用 ASCII（英文字母）以避免編碼、搜尋與工具相容性問題。

2. 基本命名規則

  1. 第一個字元

    • 必須是 字母（a‑z、A‑Z）、底線（_） 或 美元符號（$）。
    • 不能是數字、空格或其他特殊符號。

  2. 後續字元

    • 可以是字母、數字、底線或美元符號。
    • 允許 Unicode 組合字元（如 é、漢），但不建議在正式專案中使用。

  3. 大小寫區分

    • JavaScript 是 大小寫敏感 的語言，myVar 與 MyVar 被視為不同的識別字。

  4. 保留字不可用

    • 例如 class、return、if、while、await、enum 等關鍵字以及未來保留字（如 package、private）不能作為識別字。

  5. 嚴格模式（'use strict'）的額外限制

    • 嚴格模式下，eval 與 arguments 仍可作為識別字，但不建議使用，因會影響執行環境的行為。

3. 命名慣例（Naming Conventions）

慣例 說明 範例
camelCase 首字小寫，後續單字首字大寫。適用於變數、函式、物件屬性。 let userName = 'Tom';
PascalCase 每個單字首字皆大寫。常用於類別、構造函式。 class UserProfile {}
UPPER_SNAKE_CASE 全部大寫，單字以底線分隔。多用於常數（不會被重新賦值）。 const MAX_RETRY = 5;
匈牙利命名法（已不建議） 在名稱前加上類型前綴，如 strName、arrItems。現代 JavaScript 較少使用。 let strName = 'Alice';

實務建議：在團隊中統一慣例，使用 ESLint 或 TSLint 設定規則，讓程式碼自動檢查命名是否符合約定。

4. 程式碼範例

以下示範常見的識別字寫法與錯誤情況，並附上說明註解。

範例 1：合法的變數與函式命名

// 合法的識別字
let userCount = 0;          // camelCase
const MAX_USERS = 100;      // UPPER_SNAKE_CASE（常數）
function calculateTotal(a, b) { // camelCase
  return a + b;
}

// 使用
userCount = calculateTotal(userCount, 5);
console.log(`目前使用者數：${userCount}`);

說明：變數 userCount、常數 MAX_USERS、函式 calculateTotal 均符合命名慣例，且第一個字元皆為字母。

範例 2：非法或容易產生錯誤的命名

// ❌ 錯誤範例
let 1stPlace = 'Gold';      // 第一個字元是數字，語法錯誤
let class = 'myClass';      // 使用保留字，會拋出 SyntaxError
let $ = 10;                 // 雖合法，但覆寫全局物件 $（常用於 jQuery）不建議
let user-name = 'Bob';      // 中間有連字號，非法

// ✅ 正確寫法
let firstPlace = 'Gold';
let className = 'myClass';
let $elem = $('#id');       // 用前綴避免衝突
let userName = 'Bob';

說明：第一個例子在語法層面會直接拋錯，第二個例子則可能在執行時造成衝突或可讀性下降。

範例 3：使用 Unicode 識別字（不建議）

// 雖然語法允許，但不建議在正式專案使用
let 變數 = 123;          // 中文變數名
function 計算總和(a, b) { // 中文函式名
  return a + b;
}
console.log(變數, 計算總和(5, 7));

說明：在本地環境可能正常執行，但在跨平台、CI/CD、搜尋或第三方套件中會增加不必要的障礙。

範例 4：常數與凍結物件的命名

// 常數使用大寫底線
const API_ENDPOINT = 'https://api.example.com/v1';

// 凍結的設定物件（仍使用 camelCase，因為屬性會被取用）
const CONFIG = Object.freeze({
  timeout: 5000,
  retryCount: 3,
});

console.log(API_ENDPOINT, CONFIG.timeout);

說明：常數本身使用 UPPER_SNAKE_CASE，但物件屬性仍遵循 camelCase，保持一致性與可讀性。

範例 5：ESLint 規則示範（自動檢查命名）

/* .eslintrc.json 片段 */
{
  "rules": {
    "camelcase": ["error", { "properties": "always" }],
    "no-underscore-dangle": ["error", { "allowAfterThis": true }],
    "id-length": ["warn", { "min": 2, "max": 30 }]
  }
}

說明：設定 camelcase 為錯誤等級，可在寫出 user_name 時即時提示；no-underscore-dangle 防止不必要的前置或後置底線；id-length 控制識別字長度，避免過長或過短。

常見陷阱與最佳實踐

陷阱 可能的問題 最佳實踐
使用保留字 產生 SyntaxError，或在嚴格模式下行為異常 參考官方保留字清單，避免使用 class、enum、await 等
過長或過短的名稱 可讀性下降、搜尋困難或易拼寫錯誤 讓名稱意義明確，長度建議 3–30 個字元；避免只用單字母（如 a、b）除非在迴圈索引
使用全域變數 造成命名衝突、難以追蹤來源 使用 let/const、模組化 (ES6 import/export) 或 IIFE 包裹變數
混用命名慣例 團隊成員閱讀困惑、工具規則衝突 統一慣例並使用 Linter 自動檢查
在函式內重新宣告 var 變數提升 (hoisting) 造成不可預期結果 優先使用 let/const，避免 var
覆寫常見全域物件 (window, $, Array) 破壞第三方函式庫或瀏覽器原生行為 不要直接覆寫，若必須可使用命名空間或別名 (const $j = jQuery;)
使用 Unicode 識別字 編碼不一致、搜尋困難、跨平台問題 僅在學習或特殊需求時使用，正式專案使用 ASCII

最佳實踐總結

  1. 遵守語法規則：第一個字元只能是字母、_、$；後續可加數字。
  2. 遵循團隊慣例：camelCase 用於變數與函式，PascalCase 用於類別，UPPER_SNAKE_CASE 用於常數。
  3. 避免保留字與全域衝突：使用 Linter 及 IDE 提示。
  4. 適度命名：名稱要能描述其用途，過長或過短皆不宜。
  5. 使用 const、let：取代 var，確保作用域與不可變性。

實際應用場景

1. 前端 UI 元件

在 React、Vue、Angular 等框架中，元件名稱必須使用 PascalCase（如 UserCard），而屬性（props）則採 camelCase（如 userName）。這不僅符合框架規範，也讓 JSX/Template 更具可讀性。 

// React 範例
function UserCard({ userName, userAge }) {
  return (
    <div className="card">
      <h2>{userName}</h2>
      <p>Age: {userAge}</p>
    </div>
  );
}

2. 後端 Node.js API

在 Express 路由或服務層，常見的做法是把路由檔案名稱採 kebab-case（檔名），而在程式碼內部則使用 camelCase 變數與函式。 

// routes/userRoutes.js
const express = require('express');
const router = express.Router();

router.get('/list', getUserList); // 函式名稱使用 camelCase

function getUserList(req, res) {
  // ...
}
module.exports = router;

3. 常數與環境變數

專案中與 API、設定相關的常數常以 UPPER_SNAKE_CASE 命名，並集中於 config.js 或 .env 檔案，方便管理與環境切換。 

// config.js
export const API_BASE_URL = process.env.API_BASE_URL || 'https://api.dev.local';
export const TIMEOUT_MS = 8000;

4. 第三方套件與命名空間

若使用全域函式庫（如 jQuery），避免直接使用 $ 作為自訂變數名稱，以免衝突。可建立自訂命名空間（namespace）。 

// 建立自己的命名空間
const MyApp = {
  utils: {},
  data: {}
};

MyApp.utils.formatDate = function(date) {
  // ...
};

總結

  • 識別字是程式碼的語言基礎，正確的命名不僅避免語法錯誤，更提升可讀性與維護性。
  • 語法規則：第一字元只能是字母、_、$；後續可有數字；大小寫敏感；保留字不可使用。
  • 命名慣例：camelCase（變數/函式） → PascalCase（類別/元件） → UPPER_SNAKE_CASE（常數）。
  • 實務上：統一團隊慣例、使用 Linter、自動檢查、避免全域衝突與過長/過短名稱。
  • 應用範例：前端元件、Node.js API、環境設定、第三方套件等，都能從正確的識別字命名中受益。

掌握了 識別字與命名規則，你就為寫出乾淨、易懂、可擴充的 JavaScript 程式碼奠定了堅實的基礎。未來在面對更複雜的模組化、型別系統（如 TypeScript）或大型團隊協作時，這些基本原則仍是不可或缺的核心技能。祝你寫程式愉快！