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

最後更新於 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 變數命名規則

引用：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學習生活

About
Latest Posts

pluto

懶癌末期患者，正以經營博客治癒。