JavaScript 命名规范详解：变量、函数、类与组件

作者：木棉时间：2026-10-27 01:55:45浏览：116

本文详细解析 JavaScript 中的命名约定，涵盖变量、函数、类、组件、常量及私有成员的命名规则。重点介绍驼峰命名法（camelCase）与帕斯卡命名法（PascalCase）的应用场景，以及布尔值、私有变量和全局变量的特定命名策略，帮助开发者编写更具可读性和一致性的代码。

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 变量名应清晰表达其含义。若变量名已足够直观，通常无需额外添加注释。

// bad
var value = 'Robin';
// bad
var val = 'Robin';
// good
var firstName = 'Robin';

大多数情况下，JavaScript 变量采用驼峰命名法（camelCase），且首字母为小写。

// bad
var firstname = 'Robin';
// bad
var first_name = 'Robin';
// bad
var FIRSTNAME = 'Robin';
// bad
var FIRST_NAME = 'Robin';
// good
var firstName = 'Robin';

然而，JavaScript 中的常量、私有变量、类或组件的命名规则略有差异，下文将分别介绍。

通常情况下，无论变量类型是字符串、布尔值、数字、对象、数组还是函数，均遵循驼峰命名法。

以下简要介绍几种常见的大小写命名风格：

camelCase（驼峰命名法）：单词相连，首词首字母小写，后续词首字母大写，JavaScript 中常用。

PascalCase（帕斯卡命名法）：单词相连，所有单词首字母大写，JavaScript 中也有应用。

snake_case（蛇形命名法）：单词间以下划线分隔。

kebab-case（短横线命名法）：单词间以中横线分隔。

JavaScript 布尔值命名规范

布尔变量通常以表示判断意义的单词（如 is、are、has）作为前缀，以便与其他类型变量区分，例如：

// bad
var visible = true;
// good
var isVisible = true;
// bad
var equal = false;
// good
var areEqual = false;
// bad
var encryption = true;
// good
var hasEncryption = true;

这种命名方式属于软规则，并非强制要求。

JavaScript 函数命名规范

函数通常采用驼峰命名法，但建议在函数名前添加特定动词前缀，以明确其功能。

// bad
function name(firstName, lastName) {
    return `${firstName} ${lastName}`;
}
// good
function getName(firstName, lastName) {
    return `${firstName} ${lastName}`;
}

动词前缀无严格限制（如 get、post、fetch、push、complete、calculate、compute 等均可）。这属于 JavaScript 变量的另一条软规则，旨在使名称更具描述性且易于理解。

JavaScript 类命名规范

与其他数据结构不同，JavaScript 中的类通常采用帕斯卡命名法（PascalCase）定义。

class SoftwareDeveloper {
    constructor(firstName, lastName) {
    this.firstName = firstName;
        this.lastName = lastName;
    }
}
var me = new SoftwareDeveloper('Robin', 'Wieruch');

由于类定义时已使用帕斯卡命名法，通过构造函数创建新实例时，所用类名也符合帕斯卡命名规范。

JavaScript 组件命名规范

组件虽不常见，但常出现在 React 等前端框架中。由于组件可实例化且通常出现在 DOM 中，与类相似，因此也采用帕斯卡命名法（PascalCase）。

// bad
function userProfile(user) {
    return (
        <div>
            <span>First Name: {user.firstName}</span>
            <span>Last Name: {user.lastName}</span>
        </div>
    );
}
// good
function UserProfile(user) {
    return (
        <div>
            <span>First Name: {user.firstName}</span>
            <span>Last Name: {user.lastName}</span>
        </div>
    );
}

使用组件时，为与普通 HTML 元素区分，通常要求首字母大写。

<div>
    <UserProfile
        user={{ firstName: 'Robin', lastName: 'Wieruch' }}
    />
</div>

JavaScript 方法命名规范

与 JavaScript 函数相同，类中的方法命名也采用驼峰式。

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 强制规则，但能提高可读性，直观反映其用途。

例如，类的私有方法通常仅在类内部使用。通过此类命名方式，可避免在实例中误用该方法。

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');

私有方法、函数或变量也可出现在 JavaScript 文件中。若如此定义，意味着该变量不应在文件外部使用，仅用于处理文件内的相关逻辑。

JavaScript 常量命名规范

JavaScript 常量的重要特征是值不可变。为与其他变量区分，变量名需全大写书写。

var SECONDS = 60;
var MINUTES = 60;
var HOURS = 24;
var DAY = SECONDS * MINUTES * HOURS;

若常量包含多个单词，单词间需以下划线分隔。

var DAYS_UNTIL_TOMORROW = 1;

JavaScript 全局变量命名规范

若变量在所有上下文中均可访问，则通常定义为全局变量。全局变量一般定义在 JavaScript 文件中；对于小型项目，该文件可能即为整个项目。全局变量定义无特殊规定：

JavaScript 全局变量通常定义在项目/文件的最顶部。

若全局变量可变，则采用驼峰形式书写。

若全局变量不可变，则采用大写字母形式。

JavaScript 下划线使用规范

JavaScript 变量命名中的下划线和破折号如何？由于 JavaScript 主要考虑驼峰和帕斯卡命名法（PascalCase），因此下划线使用较少，通常仅用于私有变量或常量。偶尔在从第三方（如数据库或 API）获取信息时，可能会看到下划线。另一种可能出现下划线的情况是函数参数未被使用时，若未使用这些参数，可忽略。

JavaScript 破折号使用规范

JavaScript 变量中使用破折号并不理想，这会使处理变得更加困难。例如在对象中使用：

// bad
var person = {
    'first-name': 'Robin',
    'last-name': 'Wieruch',
};
var firstName = person['first-name'];
// good
var person = {
    firstName: 'Robin',
    lastName: 'Wieruch',
};
var firstName = person.firstName;

甚至无法直接对变量声明使用破折号。

因此，建议避免使用破折号。

翻译自：https://www.robinwieruch.de/javascript-naming-conventions

以上就是 JavaScript 命名约定（变量、函数、类、组件）的详细内容，更多关于 JavaScript 命名约定的资料请关注本站其它相关文章！

作者最新文章

JavaScript怎么准确判断数据类型：typeof、instanceof与Object.prototype.toString

2026-11-05 17:09:21

JS中将数组和对象混合组装为JSON字符串

2026-11-05 16:41:42

JS运算符优先级与结合性的区别是什么？

2026-11-05 13:22:02

JS Map怎么只遍历Key或Value

2026-11-05 13:00:36

D3.js 与 ECharts 选型对比：灵活性 vs 开发效率

2026-11-05 09:45:01