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; // 不推荐
相关推荐
徐小夕28 分钟前
JitWord Office预览引擎:如何用Vue3+Node.js打造丝滑的PDF/Excel/PPT嵌入方案
前端·vue.js·github
晴殇i37 分钟前
揭秘JavaScript中那些“不冒泡”的DOM事件
前端·javascript·面试
孟陬1 小时前
国外技术周刊 #1:Paul Graham 重新分享最受欢迎的文章《创作者的品味》、本周被划线最多 YouTube《如何在 19 分钟内学会 AI》、为何我不
java·前端·后端
BER_c1 小时前
前端权限校验最佳实践:一个健壮的柯里化工具函数
前端·javascript
兆子龙1 小时前
别再用 useState / data 管 Tabs 的 activeKey 了:和 URL 绑定才香
前端·架构
sudo_jin1 小时前
前端包管理器演进史:为什么 npm 之后,Yarn 和 pnpm 成了新宠?
前端·npm
敲敲敲敲暴你脑袋2 小时前
写个添加注释的vscode插件
javascript·typescript·visual studio code
叁两2 小时前
用opencode打造全自动公众号写作流水线,AI 代笔太香了!
前端·人工智能·agent
golang学习记2 小时前
GitLens 十大神技:彻底改变你在 VS Code 中的 Git 工作流
前端·后端·visual studio code
SuperEugene2 小时前
后台权限与菜单渲染:基于路由和后端返回的几种实现方式
前端·javascript·vue.js