[JavaScript知识库] 你有想过如何合适地给 JavaScript 变量命名吗？

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> 你有想过如何合适地给 JavaScript 变量命名吗？ -> 正文阅读

[JavaScript知识库]你有想过如何合适地给 JavaScript 变量命名吗？

在开发过程中，遵循标准的命名约定可以提高代码的可读性。下面就来看看 JavaScript 中命名约定的最佳实践。

1. 变量的命名约定

JavaScript 变量名称是区分大小写的，大写和小写字母是不同的。比如：

let?DogName?=?'Scooby-Doo';
let?dogName?=?'Droopy';
let?DOGNAME?=?'Odie';
console.log(DogName);???//?"Scooby-Doo"
console.log(dogName);???//?"Droopy"
console.log(DOGNAME);???//?"Odie"

但是，最推荐的声明 JavaScript 变量的方法是使用驼峰式变量名。我们可以对JavaScript 所有类型的变量使用驼峰式命名约定，这样就不会相同命名的变量。

//?bad
let?dogname?=?'Droopy';?
//?bad
let?dog_name?=?'Droopy';?
//?bad
let?DOGNAME?=?'Droopy';?
//?bad
let?DOG_NAME?=?'Droopy';?
//?good
let?dogName?=?'Droopy';

变量的名称应该是不言自明的，并描述了储存的值。例如，如果需要一个变量来储存狗的名字，应该使用 dogName 而不是 Name，因为 dogNam 更有意义：

//?bad
let?d?=?'Droopy';
//?bad
let?name?=?'Droopy';
//?good
let?dogName?=?'Droopy';

2. 布尔值的命名约定

当定义布尔类型的变量时，应该使用is或者has作为变量的前缀。例如，如果需要一个变量来检查狗是否有主人，应该使用 hasOwner 作为变量名：

//?bad
let?bark?=?false;
//?good
let?isBark?=?false;

//?bad
let?ideal?=?true;
//?good
let?areIdeal?=?true;

//?bad
let?owner?=?true;
//?good
let?hasOwner?=?true;

3. 函数的命名约定

JavaScript 中函数的名称也是区分大小写的。因为在声明函数时，推荐使用驼峰式方法来命名函数。

除此之外，推荐使用描述性名词和动词来作为前缀。例如，如果声明一个函数来获取名称，则函数名字应该是 getName：

//?bad
function?name(dogName,?ownerName)?{?
??return?'${dogName}?${ownerName}';
}

//?good
function?getName(dogName,?ownerName)?{?
??return?'${dogName}?${ownerName}';
}

4. 常量的命名约定

JavaScript 中的常量和变量是一样的，都区分大小写，在定义常量时，推荐使用大写，因为它们是不变的变量。

const?LEG?=?4;
const?TAIL?=?1;
const?MOVABLE?=?LEG?+?TAIL;

如果变量声明名称中包含多个单词，就应该使用 UPPER_SNAKE_CASE。

const?DAYS_UNTIL_TOMORROW?=?1;

5. 类的命名约定

JavaScript 中类的命名约定规则与函数非常相似，推荐使用描述性的名称来描述类的功能。

函数名和类名之间的主要区别在于类名要使用大写开头：

class?DogCartoon?{?
??constructor(dogName,?ownerName)?{?
????this.dogName?=?dogName;?
????this.ownerName?=?ownerName;?
??}
}

const?cartoon?=?new?DogCartoon('Scooby-Doo',?'Shaggy');

6. 组件的命名规则

JavaScript 组件广泛应用于React、Vue等前端框架中。组件的命名建议与类保持一致，使用开头大写的驼峰式命名法：

//?bad
function?dogCartoon(roles)?{?
??return?(?
????<div>?
??????<span>?Dog?Name:?{?roles.dogName?}?</span>?
??????<span>?Owner?Name:?{?roles.ownerName?}?</span>?
????</div>?
??);
}?

//?good
function?DogCartoon(roles)?{?
??return?(?
????<div>?
??????<span>?Dog?Name:?{?roles.dogName?}?</span>?
??????<span>?Owner?Name:?{?roles.ownerName?}?</span>?
????</div>?
??);
}

由于组件的命名开头字母是大写，因此在使用时，就很容易和HTML、属性值等区分开来：

<div>?
??<DogCartoon?
????roles={{?dogName:?'Scooby-Doo',?ownerName:?'Shaggy'?}}?
??/>
</div>

7. 方法的命名约定

这里说的方法指的是类中方法，在 JavaScript 中，类的方法和函数的结构是非常类似的，因此，命名约定规则也是一样的。

推荐需要使用驼峰式方法来声明 JavaScript 方法，并使用动词作为前缀，使方法名称更有意义：

class?DogCartoon?{
??constructor(dogName,?ownerName)?{?
????this.dogName?=?dogName;?
????this.ownerName?=?ownerName;?
??}

??getName()?{?
????return?'${this.dogName}?${this.ownerName}';?
??}
}

const?cartoon=?new?DogCartoon('Scooby-Doo',?'Shaggy');

console.log(cartoon.getName());???//?"Scooby-Doo?Shaggy"

8. 私有函数的命名约定

下划线 (_) 在 MySQL 和 PHP 等语言中广泛用于定义变量、函数和方法。但在 JavaScript 中，下划线用于表示私有变量或函数。

例如，有一个私有函数名 toonName，则可以通过添加下划线作为前缀 (_toonName) 来将其表示为私有函数。

class?DogCartoon?{?
??constructor(dogName,?ownerName)?{?
????this.dogName?=?dogName;?
????this.ownerName?=?ownerName;?
????this.name?=?_toonName(dogName,?ownerName);?
??}?
??_toonName(dogName,?ownerName)?{?
????return?`${dogName}?${ownerName}`;?
??}?
}

const?cartoon?=?new?DodCartoon('Scooby-Doo',?'Shaggy');?

//?good
const?name?=?cartoon.name;
console.log(name);???//?"Scooby-Doo?Shaggy"?

//?bad
name?=cartoon._toonName(cartoon.dogName,?cartoon.ownerName);
console.log(name);???//?"Scooby-Doo?Shaggy"