【JS學習筆記】變數/常數的命名

最後更新於 2021 年 6 月 29 日

變數命名真的很重要,好的命名方式可以提升共同開發程式的效率,也能避免自己/他人需要用到時找不到變數。

變數/常數名稱命名的基本規則

  1. 開頭必須是英文字母(大小寫皆可)、$或底線(_),不能使用數字開頭。
  2. 有區分大小寫。
  3. 不可使用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)

1024px CamelCase 【JS學習筆記】變數/常數的命名

電腦程式編寫時的一套命名規則(慣例)。

變數名函式名稱是由二個或多個單字連結在一起,而構成的唯一識別字時,利用「駝峰式大小寫」來表示,可以增加變數和函式的可讀性。

單字之間不以空格斷開(例:camel case)或連接號(-,例:camel-case)、底線(_,例:camel_case)連結。

駝峰式又分為兩種:

小駝峰式命名法(lower camel case)

第一個單字以小寫字母開始;第二個單字的首字母大寫,例如:firstName、lastName。

大駝峰式命名法(upper camel case)/ 帕斯卡命名法

每一個單字的首字母都採用大寫字母,例如:FirstName、LastName、CamelCase,也被稱為帕斯卡命名法(英語:Pascal Case)。

ESLint airbnb 變數命名規則

引用:Airbnb JavaScript Style Guide

避免使用單一字母的名稱,讓你的名稱有解釋的含義。

// 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學習生活

4e52d54f6bc42abb41d26eb5b0df6517?s=250&d=wavatar&r=g 【JS學習筆記】變數/常數的命名
0 0 評分數
Article Rating
訂閱
通知
guest
0 Comments
在線反饋
查看所有評論