以实例介绍JavaScript的命名规则 -- 这给你提供了在JavaScript中命名变量、函数、类或组件的常识。没有人强制执行这些命名规则，但是，它们在JS社区中被广泛接受为一种标准。
JavaScript的命名规则变量
JavaScript的变量是区分大小写的。因此，小写和大写字符的JavaScript变量是不同的：
var name = 'Robin Wieruch';
var Name = 'Dennis Wieruch';
var NAME = 'Thomas Wieruch';
console.log(name);// "Robin Wieruch"
console.log(Name);// "Dennis Wieruch"
console.log(NAME);// "Thomas Wieruch"
一个JavaScript变量应该是自我描述的。不应该为变量添加注释以获得额外的文档：
// badvar value = 'Robin';
// badvar val = 'Robin';
// goodvar firstName = 'Robin';
大多数情况下，你会发现JavaScript变量是用一个带小写字母前导的camelCase变量名来声明的：
// badvar firstname = 'Robin';
// badvar first_name = 'Robin';
// badvar FIRSTNAME = 'Robin';
// badvar FIRST_NAME = 'Robin';
// goodvar firstName = 'Robin';
对于JavaScript常量、私有变量和类/组件来说有一些例外--我们将在后面探讨。然而，一般来说，一个JavaScript变量--字符串、布尔值或数字，也包括对象、数组或函数--都是用camelCase变量名声明的。
简单介绍一下不同的大小写风格：
- camelCase（用于JS中）
- 帕斯卡尔大写 (用于JS中)
- 蛇形大小写
- kebab-case
JavaScript的命名规则布尔型
像is、are或has这样的前缀可以帮助每个JavaScript开发者通过观察来区分布尔值和其他变量：
// badvar visible = true;
// goodvar isVisible = true;
// badvar equal = false;
// goodvar areEqual = false;
// badvar encryption = true;
// goodvar hasEncryption = true;
与字符串和整数相比，你可以把它看作是JavaScript布尔命名规则的另一个软规则，除了用骆驼大写字母来写。
JavaScript的命名规则函数
JavaScript的函数也是用骆驼字母大小写的。此外，最好的做法是通过给函数名提供一个动词作为前缀来说明函数在做什么。
// badfunction name(firstName, lastName) { return `${firstName} ${lastName}`;}
// goodfunction getName(firstName, lastName) { return `${firstName} ${lastName}`;}
这个动词的前缀可以是任何东西（例如：get、fetch、push、apply、calculate、compute、post）。这也是另一条软规则，可以考虑让JavaScript变量更具有自我描述性。
JavaScript的命名规则类
与其他JavaScript数据结构相比，一个JavaScript类是用PascalCase来声明的：
class SoftwareDeveloper { constructor(firstName, lastName) { this.firstName = firstName; this.lastName = lastName; }}
var me = new SoftwareDeveloper('Robin', 'Wieruch');
每当一个JavaScript构造函数被调用来实例化一个新的类的时候，这个类的名字就应该以Pascal Case出现，因为这个类首先是以Pascal Case声明的。
JavaScript的命名规则组件
组件在JavaScript中并非无处不在，但在React这样的前端框架中很常见。因为一个组件有点儿实例化--而是附加在DOM上--就像一个JavaScript类，它们也被广泛地用Pascal Case声明：
// badfunction userProfile(user) { return ( <div> <span>First Name: {user.firstName}</span> <span>Last Name: {user.lastName}</span> </div> );}
// goodfunction UserProfile(user) { return ( <div> <span>First Name: {user.firstName}</span> <span>Last Name: {user.lastName}</span> </div> );}
当一个组件被使用时，它与本地HTML和Web组件区别开来，因为它的第一个字母总是用大写字母书写。
<div> <UserProfile user={{ firstName: 'Robin', lastName: 'Wieruch' }} /></div>
JavaScript的命名规则方法
与JavaScript函数相同，JavaScript类中的方法是用camelCase声明的。
class SoftwareDeveloper { constructor(firstName, lastName) { this.firstName = firstName; this.lastName = lastName; }
getName() { return `${this.firstName} ${this.lastName}`; }}
var me = new SoftwareDeveloper('Robin', 'Wieruch');
console.log(me.getName());// "Robin Wieruch"
这里适用与JavaScript函数相同的规则--例如添加一个动词作为前缀--以使方法的名称更具有自我描述性。
JavaScript的命名规则私有化
在JavaScript中，你很少会在一个变量/函数/方法的前面发现下划线（_）。如果你看到一个，它就意味着是 私有的。尽管它不能被JavaScript真正地强制执行，但将某样东西声明为私有，可以告诉我们它应该如何被使用或不应该如何被使用。
例如，一个类中的私有方法只能由该类内部使用，而应该避免在该类的实例中使用。
class SoftwareDeveloper { constructor(firstName, lastName) { this.firstName = firstName; this.lastName = lastName; this.name = _getName(firstName, lastName); }
_getName(firstName, lastName) { return `${firstName} ${lastName}`; }}
var me = new SoftwareDeveloper('Robin', 'Wieruch');
// goodvar name = me.name;console.log(name);// "Robin Wieruch"
// badname = me._getName(me.firstName, me.lastName);console.log(name);// "Robin Wieruch"
私有变量/函数也可以出现在JavaScript文件中。这可能意味着这个变量/函数不应该在这个文件之外使用，而只是在内部用于计算同一文件中其他函数的进一步业务逻辑。
JavaScript的命名规则常量
最后但并非最不重要的是，在JavaScript中，有一些常量--旨在成为非变化的变量--是用大写字母（UPPERC）书写的。
var SECONDS = 60;var MINUTES = 60;var HOURS = 24;
var DAY = SECONDS * MINUTES * HOURS;
如果一个变量在其变量声明名称中有一个以上的词，它就会使用下划线（_）。
var DAYS_UNTIL_TOMORROW = 1;
通常情况下，JavaScript常量是在JavaScript文件的顶部定义的。正如前面所暗示的，除了原始数据结构的变量的const声明外，没有人强制要求人们不要在这里改变变量，但是它的大写的命名方式建议避免。
JavaScript的命名规则全局变量
一个JavaScript变量是全局定义的，如果它的所有上下文都可以访问它。通常情况下，上下文是由声明/定义该变量的JavaScript文件定义的，但在较小的JavaScript项目中，它可能是整个项目。全局性的JavaScript变量没有特殊的命名规则。
- 全局变量是在项目/文件的顶部声明的。
- 如果一个全局变量是可变的，就用camelCase来写。
- 如果全局变量是不可改变的，则用UPPERCASE书写。
JavaScript的命名规则下划线
那么，JavaScript变量命名中的下划线和破折号是怎么回事？由于在JS中主要考虑的是camelCase和PascalCase，你已经看到下划线只在私有变量或常量中很少使用。偶尔你会在从数据库或API等第三方获取信息时发现下划线。另一种你可能会看到下划线的情况是未使用的函数参数，但如果你还没有在外面看到这些参数，先不要担心；-)
JavaScript的命名规则破折号
在JavaScript变量中使用破折号也是不符合常理的。它只是让事情变得更加困难；比如在一个对象中使用它们:
// badvar person = { 'first-name': 'Robin', 'last-name': 'Wieruch',};
var firstName = person['first-name'];
// goodvar person = { firstName: 'Robin', lastName: 'Wieruch',};
var firstName = person.firstName;
甚至不可能直接在变量声明中使用破折号。
var first-name = 'Robin';// Uncaught SyntaxError: Unexpected token '-'
这就是为什么最好避免使用它们。
JavaScript的命名规则文件
在JavaScript中，有两种命名文件的策略。PascalCase和kebab-case。在JavaScript前台应用中，你经常会看到PascalCase用于命名组件（例如React组件）。
- components/--- user/----- UserProfile.js----- UserList.js----- UserItem.js--- ui/----- Dialog.js----- Dropdown.js----- Table.js
相比之下，在JavaScript后端应用中，kebab-case是常识。
- routing/--- user-route.js--- messages-route.js
你也会看到camelCase的命名，但与PascalCase类似（对不起，前台应用），有一种风险是操作系统对它们的处理方式不同，可能导致bug。这就是为什么坚持使用kebab大小写应该是JavaScript中文件名的规范。
如果你想了解更多关于JavaScript代码风格和格式的信息，这里没有讨论命名规则，你肯定应该看看ESLint和Prettierfor JavaScript。
