Jayna's Blog

初期在開發程式時,在命名方法名稱或是命名變數名稱時, 時常煩惱不曉得如何下手命名, 自己也沒有一個規則性, 就依照當下的想法來命名, 加上經驗不足導致自己之後維護不容易需要再重新理解, 因此開始爬文各前輩分享的命名規則, 也順便將自己整理的筆記分享給大家~

養成一個好的變數命名習慣對於程式碼的可讀性及長期維護性會產生深遠的影響。

命名雖然沒有強制性，但在開發時基本上都會依照這套規則。

主要觀念 :

可讀性 : 經由命名可以直覺的理解此命名作用,盡量避免使用過簡短或縮寫的命名,導致閱讀性不易 (少寫簡寫 / 少寫自己發明的縮寫 / 少寫語意不明的命名)
維護性 : 若閱讀性高,將來再交接或維護上也會相對容易
一致性 : 使用相同的規則命名變數 / 在不同命名上使用對應不同的命名方式 (例如:駝峰式命名法/Snake Case 命名法…)
利用註解來說明你的程式碼

主要命名規則 :

1. 駝峰命名法[小駝峰]（Camel Case）：

將多個單字連接在一起，並將每個單字的首字母小寫。

➼ 常用場景 : 命名變數、函數、方法和屬性

➼ 例如：myVariableName、calculateTotalAmount()、customerInfo

2. 開頭大寫命名法[大駝峰]（Pascal Case）：

也稱為帕斯卡命名法，它將每個單詞的首字母大寫

➼ 常用場景 : 命名類別或建構子

➼ 例如 : MyFunctionName、BookAuthor :

function MyFunctionName(name, description) {
    this.name = name;
    this.description = description;
}

class BookAuthor {
    constructor(firstName, lastName) {
        this.firstName = firstName;
        this.lastName = lastName;       }
}

3. 蛇底式命名法（Snake Case）：

使用下劃線來分隔單詞，通常所有字母小寫。

➼ 常用場景 : 定義HTML和CSS類名稱(class/id)

➼ 例如：user_profile_info

 <div class="user_profile_info">

4. 變化型的烤肉串式命名法 ( Kebab Case ) :

各個單詞之間使用連字符（通常是減號或破折號）分隔。

➼ 常用場景 : 定義HTML和CSS類名稱(class/id)或URL路徑

➼ 例如 : main-content 、user-profile

<div id="main-content">

user-profile/edit：URL中的路徑，用於編輯用戶個人資料。
-> https://example.com/user-profile/edit

5. 匈牙利命名法（Hungarian Notation）：

將變數名稱的開頭加上一個描述變數類型的前綴。

➼ 常用場景 : 不常見

➼ 例如：strName（表示字符串）、intCount（表示整數）

➼ 原因 : 在JavaScript中，通常採用的是動態類型（Dynamic Typing）的方式，變數的類型不需要在變數名稱中明確指定，因此匈牙利命名法的使用變得不常見。

6. 布林命名法（Boolean Naming）：

在變數名稱中使用布林值的描述，通常以"is"或"has"開頭。

➼ 常用場景 : 狀態變數、權限檢查、選項開關

➼ 例如：isOpen、hasPermission

let isOpen = false; // 表示彈出視窗是否打開
let hasPermission = true; // 表示用戶是否具有某種權限

若是 function返回boolean值可在前面加 check，例如 : checkHasName()、checkIsUser()。

7. 常量命名法（Constant Naming）：

常量通常使用全大寫字母並使用下劃線來分隔單詞。

➼ 常用場景 : 數學和物理常數、環境變數和配置設定(.env檔)

➼ 例如：PI 、API_BASE_URL

const PI = 3.14159265359;

//在.env檔中的配置設定:
const API_BASE_URL = 'https://api.example.com';

8. 描述性命名法（Descriptive Naming）：

這種方式的命名著重於讓變數名稱盡可能清晰地描述其用途。

➼ 例如：counter、username、totalSales

常用的動作詞（函數用）開頭 :

公式 : 動作 + 做什麼事

‣ make / take 作某…事

‣ toggle 切換 [ex : toggleStatus切換狀態]

‣ move 移動

‣ add 加上、相加

‣ delete/remove 移除

‣ update 更新

‣ insert 單體 splice 複合體

‣ extend append 展開

‣ set 設定

‣ get 獲得

‣ print 印出

‣ list 列出

‣ submit 提交

‣ reset 重置

‣ link 連至

‣ repeat 重覆

‣ copy 複製

‣ replace 取代

‣ clean 清除

‣ find / search 尋找

‣ xxxxTo 到xxx

‣ handle 處理 (適合用在change事件/監聽)

[用JavaScript的命名魔法：讓你的程式碼充滿活力]-變數命名規則