JavaScript 中变量命名的最佳实践

全篇大概1500 字(含代码),建议阅读时间5分钟。


1. 避免使用 var 关键字:过时的产物

在现代 JavaScript 中,我们通常避免使用 var,而是选择 letconst,它们提供更可预测和块范围的行为,使您的代码更易于理解和维护。

javascript 复制代码
// ✅
let name = '小那同学'; 
const PI = 3.14;

// ❌ 
var age = 30; // 不推荐使用 var

2. let:可以改变的变量

使用 let 关键字来声明稍后可能需要在代码中更改其值的变量。

javascript 复制代码
// ✅
let score = 0; 
score += 10;
// ❌
// 不推荐使用 var
var score = 0; 
score += 10; 

3. const:不变值的常量

如果有一个在整个程序中不应该改变的值,请使用 const 关键字。

javascript 复制代码
// ✅
const MAX_USERS = 100;
// ❌
var maxUsers = 100; 
// 不推荐使用 var

4. 清晰度和描述性

变量命名的主要目的是清楚地传达变量的用途和内容。选择不言自明且准确反映其存储数据的名称。

javascript 复制代码
// ✅
let firstName = '小那同学';
let totalPrice = 29.99; 
// ❌
let x = 5; 
let atemp = 'temp'; // 不清晰

5. 使用有意义的词语

避免使用缩写或过于技术性的术语,因为这可能会让其他程序员感到困惑。

javascript 复制代码
// ✅ 
let customerName = '小那同学'; 
let orderStatus = 'shipped'; 

// ❌
let custNm = 'JD';
let ordStempRec = 'record'; 

6. 驼峰式命名规范

JavaScript 中变量最广泛采用的命名约定是驼峰式命名法。

javascript 复制代码
// ✅ 
let fullName = '小那同学'; 
let dateOfBirth = '1990-01-01'; 
// ❌
let full_name = '小那同学'; 
let dateofbirthshipping_address = '1990-01-01'; 

7. 大写常量

如果有保存常量值且不应修改的变量,请用大写字母声明它们,并用下划线分隔单词。

javascript 复制代码
// ✅ 
const TAX_RATE = 0.07; 
const API_KEY = '123456'; 
// ❌
const taxRate = 0.07; 
const apiKeymaxAttempts = '123456';

8. 避免使用单字母变量

虽然单字母变量可能有利于快速迭代,但它们通常会降低代码的可读性。

javascript 复制代码
// ✅
let isActive = false; 
let canEdit = true; 
// ❌
let isActive = false, canEdit = true; // 不推荐

9. 使用复数数组

如果您的变量代表一个数组,请使用复数名称来表示它包含多个元素。

javascript 复制代码
// ✅
let isActive = false; 
let canEdit = true; 
// ❌
let isActive = false, canEdit = true; // 不推荐

10. 前缀布尔变量

对于布尔变量,请考虑使用诸如 ishascan 之类的前缀来明确其用途。

javascript 复制代码
// ✅ 
let isActive = false; 
let canEdit = true; 
// ❌
let isActive = false, canEdit = true; // 不推荐

11. 范围感知命名

如果您使用特定范围内的变量,请考虑添加指示其范围的前缀或后缀。

javascript 复制代码
// ✅
let isActive = false; 
let canEdit = true; 
// ❌ 
let isActive = false, canEdit = true; // 不推荐

12. 单独申报

为了提高可读性,最好将每个变量单独一行声明。

javascript 复制代码
// ✅
let isActive = false; 
let canEdit = true; 
// ❌
let isActive = false, canEdit = true; // 不推荐
相关推荐
heartmoonq5 分钟前
npm 包抽象封装并发布完整指南
前端
红衣信5 分钟前
深入剖析 hooks-todos 项目:前端开发的实用实践
前端·react.js·面试
今禾5 分钟前
深入理解 JavaScript 事件监听机制
前端·javascript
FogLetter5 分钟前
从饼干到Cookie:前端存储的身份密码本
前端·javascript
Spider_Man9 分钟前
🎭 React受控与非受控组件:一场"控制权"的争夺战
前端·react.js
Mintopia14 分钟前
LOD:图形世界里的 “看人下菜碟” 艺术
前端·javascript·计算机图形学
黑客老李16 分钟前
EDUSRC:智慧校园通用漏洞挖掘(涉校园解决方案商)
服务器·前端·网络·安全·web安全
Code季风17 分钟前
SQL关键字快速入门:CASE 实现条件逻辑
javascript·数据库·sql
拾光拾趣录18 分钟前
Vue依赖收集机制:响应式原理的核心实现
前端·vue.js
Mintopia18 分钟前
Three.js ArrowHelper:三维世界里的 “方向向导”
前端·javascript·three.js