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; // 不推荐
相关推荐
一條狗14 分钟前
隨筆 20241224 ts寫入excel表
开发语言·前端·typescript
小码快撩19 分钟前
vue应用移动端访问缓慢问题
前端·javascript·vue.js
低调之人23 分钟前
Fiddler勾选https后google浏览器网页访问不可用
前端·测试工具·https·fiddler·hsts
yayaya15228 分钟前
javaScriptBOM
开发语言·javascript·ecmascript
Riesenzahn29 分钟前
使用vue如何监听元素尺寸的变化?
前端·javascript
阿征学IT33 分钟前
圣诞快乐(h5 css js(圣诞树))
前端·javascript·css
程序员黄同学36 分钟前
如何使用 Flask 框架创建简单的 Web 应用?
前端·python·flask
Sword9937 分钟前
豆包 MarsCode AI Apply功能揭秘:自动代码应用与 Diff 实现
前端·人工智能·豆包marscode
前端与小赵37 分钟前
什么是全栈应用,有哪些特点
前端
a1ex37 分钟前
shadcn/ui 动态 pagination
前端