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; // 不推荐
相关推荐
耶啵奶膘2 分钟前
css——width: fit-content 宽度、自适应
前端·css
OEC小胖胖4 分钟前
前端框架状态管理对比:Redux、MobX、Vuex 等的优劣与选择
前端·前端框架·web
hqxstudying15 分钟前
Java行为型模式---模板方法模式
java·开发语言·设计模式·代码规范·模板方法模式
字节架构前端1 小时前
k8s场景下的指标监控体系构建——Prometheus 简介
前端·架构
奕羽晨1 小时前
关于CSS的一些读书笔记
前端·css
Poetry2371 小时前
大屏数据可视化适配方案
前端
遂心_1 小时前
用React Hooks + Stylus打造文艺范的Todo应用
前端·javascript·react.js
轻语呢喃1 小时前
<a href=‘ ./XXX ’>,<a href="#XXX">,<Link to="/XXX">本质与区别
前端·react.js·html
用户3802258598241 小时前
vue3源码解析:watch的实现
前端·vue.js·源码