最後更新於 2021 年 6 月 29 日
變數命名真的很重要,好的命名方式可以提升共同開發程式的效率,也能避免自己/他人需要用到時找不到變數。
變數/常數名稱命名的基本規則
- 開頭必須是英文字母(大小寫皆可)、$或底線(_),不能使用數字開頭。
- 有區分大小寫。
- 不可使用JS保留字。
宣告位置
1. 一行一個變數/常數,建議加上註解,最好按英文字母排列。
2. 把let宣告的放一起,const宣告的放一起。
3. 在需要用到的地方再宣告變數/常數
// 不建議的寫法 const age = 20; let name = 'Pluto'; const money = 10; // 建議的寫法 const age = 20; const money = 10; let name = 'Pluto';
在需要用到的地方再宣告變數/常數
// 不建議的寫法 let result; const count = () => { const a = 3; const b = 2; result = a * b; if (result = 6) { return 'true'; } } console.log(count()); // 建議的寫法 const count = () => { const a = 3; const b = 2; let result = a * b; if (result = 6) { return 'true'; } } console.log(count());
命名規則
駝峰式大小寫(Camel-Case)
電腦程式編寫時的一套命名規則(慣例)。
當變數名和函式名稱是由二個或多個單字連結在一起,而構成的唯一識別字時,利用「駝峰式大小寫」來表示,可以增加變數和函式的可讀性。
單字之間不以空格斷開(例:camel case)或連接號(-,例:camel-case)、底線(_,例:camel_case)連結。
駝峰式又分為兩種:
小駝峰式命名法(lower camel case)
第一個單字以小寫字母開始;第二個單字的首字母大寫,例如:firstName、lastName。
大駝峰式命名法(upper camel case)/ 帕斯卡命名法
每一個單字的首字母都採用大寫字母,例如:FirstName、LastName、CamelCase,也被稱為帕斯卡命名法(英語:Pascal Case)。
ESLint airbnb 變數命名規則
避免使用單一字母的名稱,讓你的名稱有解釋的含義。
// bad function q() { // ...stuff... } // good function query() { // ..stuff.. }
使用駝峰式大小寫命名物件,函式及實例。
// bad const OBJEcttsssss = {}; const this_is_my_object = {}; function c() {} // good const thisIsMyObject = {}; function thisIsMyFunction() {}
使用帕斯卡命名法來命名建構子或類別。
// bad function user(options) { this.name = options.name; } const bad = new user({ name: 'nope', }); // good class User { constructor(options) { this.name = options.name; } } const good = new User({ name: 'yup', });
命名私有屬性時請在前面加底線 _。
// bad this.__firstName__ = 'Panda'; this.firstName_ = 'Panda'; // good this._firstName = 'Panda';
請別儲存 this 為參考。請使用箭頭函式或是 Function#bind。
// bad function foo() { const self = this; return function () { console.log(self); }; } // bad function foo() { const that = this; return function () { console.log(that); }; } // good function foo() { return () => { console.log(this); }; }
如果你的檔案只有輸出一個類別,你的檔案名稱必須和你的類別名稱相同。
// 檔案內容 class CheckBox { // ... } export default CheckBox; // 在其他的檔案 // bad import CheckBox from './checkBox'; // bad import CheckBox from './check_box'; // good import CheckBox from './CheckBox';
當你導出為預設的函式時請使用駝峰式大小寫。檔案名稱必須與你的函式名稱一致。
function makeStyleGuide() { } export default makeStyleGuide;
當你導出為單例 / 函式庫 / 空物件時請使用帕斯卡命名法。
const AirbnbStyleGuide = { es6: { } }; export default AirbnbStyleGuide;
推薦閱讀:變數、常數與命名 – JavaScript學習生活
Latest posts by pluto (see all)
- React 那些好看、有趣、實用的函式庫、組件庫推薦(2) - 2022 年 6 月 26 日
- 解決 preact 資源請求路徑錯誤的問題 - 2022 年 6 月 24 日
- [楓之谷私服] 潮流轉蛋機 NPC 腳本優化 - 2022 年 6 月 19 日