👋 大家好，欢迎来到我的技术博客！ 📚 在这里，我会分享学习笔记、实战经验与技术思考，力求用简单的方式讲清楚复杂的问题。 🎯 本文将围绕JavaScript这个话题展开，希望能为你带来一些启发或实用的参考。 🌱 无论你是刚入门的新手，还是正在进阶的开发者，希望你都能有所收获！
文章目录
- JavaScript 语法基础规范：语句、注释与标识符的规则
-
- 🌟 引言
- 📚 语句 (Statements) 的基本概念
-
- 💡 什么是语句？
- 📝 语句的类型
-
- 1. 声明语句 (Declaration Statements)
- 2. 表达式语句 (Expression Statements)
- 3. 控制流语句 (Control Flow Statements)
- 🧱 语句的分隔符和块结构
-
- 🔧 分号的作用
- 🏗️ 块结构 (Block Statements)
- 📝 注释 (Comments) 规则详解
-
- 📌 单行注释
- 📚 多行注释
- 🎯 注释的最佳实践
- 🏷️ 标识符 (Identifiers) 的命名规则
-
- 📋 标识符的基本规则
-
- ✅ 有效标识符规则
- ❌ 无效标识符规则
- 🚫 JavaScript 保留关键字
- 🎯 标识符命名约定
-
- 1. 驼峰命名法 (Camel Case)
- 2. 帕斯卡命名法 (Pascal Case)
- 3. 下划线命名法 (Snake Case)
- 4. 全大写命名法 (UPPER_CASE)
- 🔄 JavaScript 语句的实际应用示例
-
- 🧪 综合示例：用户管理系统
- 📊 语句执行流程图
- 📝 注释在实际项目中的重要性
-
- 🛠️ 代码文档化
- 🧹 调试和维护
- 🎯 标识符命名的最佳实践
-
- 📈 命名清晰度原则
- 🔄 命名一致性
- 📊 复杂语句结构示例
-
- 🔄 嵌套控制流语句
- 📋 函数中的复杂语句
- 🧪 测试和验证
-
- 🧪 语句执行测试
- 🧪 注释测试
- 📚 总结与建议
-
- 📝 关键要点回顾
- 🎯 实践建议
- 🔄 持续学习资源
- 🎉 结语
JavaScript 语法基础规范：语句、注释与标识符的规则
🌟 引言
JavaScript 是一种广泛使用的编程语言，它在网页开发中扮演着至关重要的角色。理解 JavaScript 的基础语法规范对于任何开发者来说都是必不可少的。本文将深入探讨 JavaScript 中语句、注释和标识符的基本规则，帮助你建立扎实的语法基础。
📚 语句 (Statements) 的基本概念
💡 什么是语句？
在 JavaScript 中，语句是程序执行的基本单位。每个语句都代表一个操作或动作。语句可以是简单的赋值操作，也可以是复杂的控制结构。
// 简单语句示例
let x = 5;
let y = 10;
let sum = x + y;
// 函数调用语句
console.log("Hello, World!");
// 条件语句
if (sum > 10) {
console.log("Sum is greater than 10");
}
📝 语句的类型
JavaScript 中的语句主要分为以下几类：
1. 声明语句 (Declaration Statements)
声明语句用于创建变量和函数：
// 变量声明
let name = "Alice";
const PI = 3.14159;
var age = 25;
// 函数声明
function greet() {
return "Hello!";
}
// 类声明
class Person {
constructor(name) {
this.name = name;
}
}
2. 表达式语句 (Expression Statements)
表达式语句包含一个表达式，并以分号结尾：
// 赋值表达式语句
name = "Bob";
// 函数调用表达式语句
console.log("This is an expression statement");
// 数学运算表达式语句
result = 10 * 5;
3. 控制流语句 (Control Flow Statements)
控制流语句决定了程序的执行顺序：
// if-else 语句
if (age >= 18) {
console.log("Adult");
} else {
console.log("Minor");
}
// for 循环语句
for (let i = 0; i < 5; i++) {
console.log(i);
}
// while 循环语句
let count = 0;
while (count < 3) {
console.log(count);
count++;
}
🧱 语句的分隔符和块结构
🔧 分号的作用
虽然 JavaScript 具有自动分号插入机制，但显式使用分号是一个良好的编程习惯：
// 推荐写法 – 显式使用分号
let a = 1;
let b = 2;
let c = a + b;
// 虽然可以省略分号，但不推荐
let d = 3
let e = 4
let f = d + e
// 在某些情况下，省略分号可能导致问题
let x = 1
let y = 2
let z = x + y
(function() { /* some code */ })()
// 这里可能会被解释为 (function() { … })() + x + y
🏗️ 块结构 (Block Statements)
块结构使用花括号 {} 将多个语句组合在一起：
{
let a = 1;
let b = 2;
let sum = a + b;
console.log(sum); // 输出: 3
}
// 块结构常用于控制流语句
if (true) {
let message = "Inside block";
console.log(message);
}
📝 注释 (Comments) 规则详解
📌 单行注释
单行注释使用 // 开头，从 // 到行尾的内容都会被忽略：
// 这是一个单行注释
let userName = "John"; // 这行代码也有注释
// 多个单行注释
// 第一行注释
// 第二行注释
// 第三行注释
📚 多行注释
多行注释使用 /* */ 包围，可以跨越多行：
/*
这是一个多行注释
它可以跨越多行
用于详细说明代码功能
*/
/**
* 这是 JSDoc 风格的注释
* 通常用于文档生成工具
* @param {string} name – 用户名
* @returns {string} 返回问候语
*/
function sayHello(name) {
return `Hello, ${name}!`;
}
🎯 注释的最佳实践
// ❌ 不好的注释
let x = 5; // 设置 x 为 5
// ✅ 好的注释
let basePrice = 5; // 基础价格设置为 5 元
// ❌ 冗余注释
if (userAge >= 18) { // 如果用户年龄大于等于 18
console.log("成年人"); // 输出"成年人"
}
// ✅ 有意义的注释
// 检查用户是否成年，只有成年用户才能访问此功能
if (userAge >= 18) {
console.log("成年人");
}
🏷️ 标识符 (Identifiers) 的命名规则
📋 标识符的基本规则
标识符是用来标识变量、函数、类等程序元素名称的字符序列。JavaScript 标识符必须遵循以下规则：
✅ 有效标识符规则
// ✅ 有效的标识符
let myVariable = "value";
let _privateVar = "private";
let $dollarVar = "dollar";
let camelCase = "camelCase";
let PascalCase = "PascalCase";
let snake_case = "snake_case";
let number123 = "number123";
let var_ = "underscore";
let a = "single letter";
// ✅ Unicode 字符作为标识符的一部分
let café = "café";
let naïve = "naïve";
let piñata = "piñata";
❌ 无效标识符规则
// ❌ 无效标识符 – 以数字开头
// let 123variable = "invalid"; // SyntaxError
// ❌ 无效标识符 – 包含特殊字符
// let variable-name = "invalid"; // SyntaxError
// let variable.name = "invalid"; // SyntaxError
// ❌ 无效标识符 – 使用保留关键字
// let function = "invalid"; // SyntaxError
// let class = "invalid"; // SyntaxError
🚫 JavaScript 保留关键字
以下是 JavaScript 中的保留关键字，不能用作标识符：
// 严格模式下的保留关键字
const reservedKeywords = [
'break', 'case', 'catch', 'class', 'const', 'continue', 'debugger',
'default', 'delete', 'do', 'else', 'export', 'extends', 'finally',
'for', 'function', 'if', 'import', 'in', 'instanceof', 'let',
'new', 'return', 'super', 'switch', 'this', 'throw', 'try',
'typeof', 'var', 'void', 'while', 'with', 'yield'
];
// 以下是 ES6+ 新增的关键字
const es6Keywords = [
'await', 'enum', 'implements', 'interface', 'package',
'private', 'protected', 'public', 'static'
];
🎯 标识符命名约定
1. 驼峰命名法 (Camel Case)
// ✅ 驼峰命名法
let firstName = "John";
let lastName = "Doe";
let emailAddress = "john.doe@example.com";
let numberOfStudents = 25;
2. 帕斯卡命名法 (Pascal Case)
// ✅ 帕斯卡命名法 – 通常用于构造函数和类名
class UserProfile {
constructor(name, email) {
this.name = name;
this.email = email;
}
getFullName() {
return `${this.name}`;
}
}
3. 下划线命名法 (Snake Case)
// ✅ 下划线命名法
let user_name = "john_doe";
let number_of_items = 10;
let is_active = true;
4. 全大写命名法 (UPPER_CASE)
// ✅ 全大写命名法 – 通常用于常量
const MAX_SIZE = 100;
const API_URL = "https://api.example.com";
const DEFAULT_TIMEOUT = 5000;
🔄 JavaScript 语句的实际应用示例
🧪 综合示例：用户管理系统
让我们通过一个实际的例子来展示各种语句的使用：
// 用户管理系统的完整示例
// 定义用户类
class User {
constructor(id, name, email, isActive = true) {
this.id = id;
this.name = name;
this.email = email;
this.isActive = isActive;
this.createdAt = new Date();
}
// 检查用户是否活跃
checkActiveStatus() {
return this.isActive ? "Active" : "Inactive";
}
// 更新用户信息
updateInfo(newName, newEmail) {
this.name = newName;
this.email = newEmail;
return `User ${this.name} updated successfully`;
}
}
// 创建用户数组
const users = [];
// 添加用户到系统中
function addUser(id, name, email) {
const newUser = new User(id, name, email);
users.push(newUser);
return `User ${name} added to system`;
}
// 获取活跃用户列表
function getActiveUsers() {
return users.filter(user => user.isActive);
}
// 主程序逻辑
{
// 添加用户
addUser(1, "Alice Johnson", "alice@example.com");
addUser(2, "Bob Smith", "bob@example.com");
addUser(3, "Carol Davis", "carol@example.com");
// 显示所有用户
console.log("All Users:");
users.forEach(user => {
console.log(`ID: ${user.id}, Name: ${user.name}, Status: ${user.checkActiveStatus()}`);
});
// 获取并显示活跃用户
const activeUsers = getActiveUsers();
console.log("\\nActive Users Count:", activeUsers.length);
// 更新用户信息
if (users.length > 0) {
const result = users[0].updateInfo("Alice Brown", "alice.brown@example.com");
console.log(result);
}
}
📊 语句执行流程图
#mermaid-svg-tijmWCaCWcjqrdqh{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-tijmWCaCWcjqrdqh .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-tijmWCaCWcjqrdqh .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-tijmWCaCWcjqrdqh .error-icon{fill:#552222;}#mermaid-svg-tijmWCaCWcjqrdqh .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-tijmWCaCWcjqrdqh .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-tijmWCaCWcjqrdqh .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-tijmWCaCWcjqrdqh .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-tijmWCaCWcjqrdqh .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-tijmWCaCWcjqrdqh .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-tijmWCaCWcjqrdqh .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-tijmWCaCWcjqrdqh .marker{fill:#333333;stroke:#333333;}#mermaid-svg-tijmWCaCWcjqrdqh .marker.cross{stroke:#333333;}#mermaid-svg-tijmWCaCWcjqrdqh svg{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-tijmWCaCWcjqrdqh p{margin:0;}#mermaid-svg-tijmWCaCWcjqrdqh .label{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;color:#333;}#mermaid-svg-tijmWCaCWcjqrdqh .cluster-label text{fill:#333;}#mermaid-svg-tijmWCaCWcjqrdqh .cluster-label span{color:#333;}#mermaid-svg-tijmWCaCWcjqrdqh .cluster-label span p{background-color:transparent;}#mermaid-svg-tijmWCaCWcjqrdqh .label text,#mermaid-svg-tijmWCaCWcjqrdqh span{fill:#333;color:#333;}#mermaid-svg-tijmWCaCWcjqrdqh .node rect,#mermaid-svg-tijmWCaCWcjqrdqh .node circle,#mermaid-svg-tijmWCaCWcjqrdqh .node ellipse,#mermaid-svg-tijmWCaCWcjqrdqh .node polygon,#mermaid-svg-tijmWCaCWcjqrdqh .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-tijmWCaCWcjqrdqh .rough-node .label text,#mermaid-svg-tijmWCaCWcjqrdqh .node .label text,#mermaid-svg-tijmWCaCWcjqrdqh .image-shape .label,#mermaid-svg-tijmWCaCWcjqrdqh .icon-shape .label{text-anchor:middle;}#mermaid-svg-tijmWCaCWcjqrdqh .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-svg-tijmWCaCWcjqrdqh .rough-node .label,#mermaid-svg-tijmWCaCWcjqrdqh .node .label,#mermaid-svg-tijmWCaCWcjqrdqh .image-shape .label,#mermaid-svg-tijmWCaCWcjqrdqh .icon-shape .label{text-align:center;}#mermaid-svg-tijmWCaCWcjqrdqh .node.clickable{cursor:pointer;}#mermaid-svg-tijmWCaCWcjqrdqh .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-svg-tijmWCaCWcjqrdqh .arrowheadPath{fill:#333333;}#mermaid-svg-tijmWCaCWcjqrdqh .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-tijmWCaCWcjqrdqh .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-tijmWCaCWcjqrdqh .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-tijmWCaCWcjqrdqh .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-svg-tijmWCaCWcjqrdqh .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-tijmWCaCWcjqrdqh .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-svg-tijmWCaCWcjqrdqh .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-tijmWCaCWcjqrdqh .cluster text{fill:#333;}#mermaid-svg-tijmWCaCWcjqrdqh .cluster span{color:#333;}#mermaid-svg-tijmWCaCWcjqrdqh div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-tijmWCaCWcjqrdqh .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg-tijmWCaCWcjqrdqh rect.text{fill:none;stroke-width:0;}#mermaid-svg-tijmWCaCWcjqrdqh .icon-shape,#mermaid-svg-tijmWCaCWcjqrdqh .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-tijmWCaCWcjqrdqh .icon-shape p,#mermaid-svg-tijmWCaCWcjqrdqh .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-svg-tijmWCaCWcjqrdqh .icon-shape .label rect,#mermaid-svg-tijmWCaCWcjqrdqh .image-shape .label rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-tijmWCaCWcjqrdqh .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-svg-tijmWCaCWcjqrdqh .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-svg-tijmWCaCWcjqrdqh :root{–mermaid-font-family:\”trebuchet ms\”,verdana,arial,sans-serif;}
是
否
开始
用户输入
验证输入
输入有效?
处理数据
显示错误
保存数据
返回结果
重新请求输入
结束
📝 注释在实际项目中的重要性
🛠️ 代码文档化
/**
* 计算两个数的和
* @param {number} a – 第一个数字
* @param {number} b – 第二个数字
* @returns {number} 两个数字的和
* @example
* // returns 5
* add(2, 3);
*/
function add(a, b) {
return a + b;
}
/**
* 验证用户邮箱格式
* @param {string} email – 用户邮箱地址
* @returns {boolean} 邮箱格式是否正确
*/
function validateEmail(email) {
const emailRegex = /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/;
return emailRegex.test(email);
}
🧹 调试和维护
// 调试用的临时注释
function processData(data) {
// console.log("原始数据:", data); // 临时调试
// 数据预处理
const processedData = data.map(item => {
// console.log("处理项:", item); // 临时调试
return item.toUpperCase();
});
// console.log("处理后的数据:", processedData); // 临时调试
return processedData;
}
🎯 标识符命名的最佳实践
📈 命名清晰度原则
// ❌ 不清晰的命名
let x = 10;
let y = 20;
let z = x + y;
// ✅ 清晰的命名
let basePrice = 10;
let taxRate = 20;
let totalPrice = basePrice + taxRate;
// ❌ 混淆的命名
let a = "John";
let b = "Doe";
let c = a + " " + b;
// ✅ 明确的命名
let firstName = "John";
let lastName = "Doe";
let fullName = `${firstName} ${lastName}`;
🔄 命名一致性
// ✅ 保持命名风格一致
class UserManager {
constructor() {
this.users = [];
this.maxUsers = 100;
}
addUser(user) {
if (this.users.length < this.maxUsers) {
this.users.push(user);
return true;
}
return false;
}
removeUser(userId) {
const index = this.users.findIndex(user => user.id === userId);
if (index !== –1) {
this.users.splice(index, 1);
return true;
}
return false;
}
}
📊 复杂语句结构示例
🔄 嵌套控制流语句
// 复杂的条件和循环结构
function processUserData(users) {
const results = [];
// 外层循环遍历用户
for (let i = 0; i < users.length; i++) {
const user = users[i];
// 检查用户状态
if (user.status === "active") {
// 处理用户数据
let processedData = {};
// 内层循环处理用户属性
for (let key in user) {
if (key !== "password") {
processedData[key] = user[key];
}
}
// 条件判断
if (user.score >= 80) {
processedData.grade = "A";
} else if (user.score >= 70) {
processedData.grade = "B";
} else {
processedData.grade = "C";
}
results.push(processedData);
} else {
// 处理非活跃用户
console.log(`Skipping inactive user: ${user.name}`);
}
}
return results;
}
📋 函数中的复杂语句
// 复杂函数示例
function calculateDiscount(price, discountType, customerType) {
// 输入验证
if (typeof price !== 'number' || price <= 0) {
throw new Error('Invalid price');
}
let finalPrice = price;
let discountAmount = 0;
// 根据折扣类型计算折扣
switch (discountType) {
case 'student':
discountAmount = price * 0.1; // 10% 折扣
break;
case 'senior':
discountAmount = price * 0.15; // 15% 折扣
break;
case 'vip':
discountAmount = price * 0.2; // 20% 折扣
break;
default:
discountAmount = 0;
}
// 根据客户类型调整折扣
if (customerType === 'premium') {
discountAmount += price * 0.05; // 额外 5% 折扣
}
// 确保折扣不超过价格
discountAmount = Math.min(discountAmount, price);
finalPrice = price – discountAmount;
// 返回详细信息
return {
originalPrice: price,
discountAmount: discountAmount,
finalPrice: finalPrice,
savingsPercentage: (discountAmount / price * 100).toFixed(2)
};
}
🧪 测试和验证
🧪 语句执行测试
// 测试不同类型的语句
function testStatements() {
// 声明语句测试
let declarationTest = "declaration";
// 表达式语句测试
let expressionResult = 5 * 6;
// 条件语句测试
if (expressionResult > 20) {
console.log("Expression result is greater than 20");
}
// 循环语句测试
for (let i = 0; i < 3; i++) {
console.log(`Loop iteration: ${i}`);
}
// 函数调用测试
return "All statements executed successfully";
}
// 执行测试
console.log(testStatements());
🧪 注释测试
/**
* 测试注释功能
* @param {string} input – 输入字符串
* @returns {string} 处理后的字符串
*/
function testComments(input) {
// 单行注释测试
let result = input.trim(); // 去除首尾空格
/*
多行注释测试
可以跨越多行
用于详细说明
*/
return result.toUpperCase();
}
📚 总结与建议
📝 关键要点回顾
🎯 实践建议
// ✅ 好的编程实践
// 1. 使用有意义的标识符名称
const userAccountBalance = 1000;
// 2. 合理使用注释
// 计算用户总分，包括额外加分项
const totalScore = baseScore + extraPoints;
// 3. 保持代码结构清晰
function calculateTotal(items) {
let subtotal = 0;
for (let i = 0; i < items.length; i++) {
subtotal += items[i].price;
}
return subtotal;
}
🔄 持续学习资源
为了进一步提升 JavaScript 编程技能，建议关注以下资源：
- MDN Web Docs – 最权威的 JavaScript 文档
- JavaScript.info – 全面的 JavaScript 教程
- ECMAScript 规范 – JavaScript 语言规范
通过掌握这些基础语法规范，你将能够编写出更加清晰、可维护和高效的 JavaScript 代码。记住，良好的编程习惯需要在实践中不断培养和完善。
🎉 结语
JavaScript 语法的基础规范是每个开发者都应该掌握的知识点。从简单的语句到复杂的控制结构，从清晰的注释到规范的标识符命名，每一个细节都在影响着代码的质量和可维护性。希望这篇文章能够帮助你更好地理解和应用 JavaScript 的基础语法规范。
在实际开发中，不仅要理解这些规则，更要学会如何恰当地运用它们。编程不仅仅是让计算机执行指令，更是创造清晰、优雅、可维护的代码。让我们一起努力，写出更好的 JavaScript 代码！
本文涵盖了 JavaScript 语法基础的核心概念，包括语句、注释和标识符的详细规则和最佳实践。通过实际示例和代码演示，帮助读者深入理解这些基础知识的重要性。
记住，在编程的世界里，好的习惯胜过华丽的技巧。从今天开始，养成良好的编码规范，让你的 JavaScript 代码更加专业和优雅！
🙌 感谢你读到这里！ 🔍 技术之路没有捷径，但每一次阅读、思考和实践，都在悄悄拉近你与目标的距离。 💡 如果本文对你有帮助，不妨 👍 点赞、📌 收藏、📤 分享 给更多需要的朋友！ 💬 欢迎在评论区留下你的想法、疑问或建议，我会一一回复，我们一起交流、共同成长 🌿 🔔 关注我，不错过下一篇干货！我们下期再见！✨
![[LangChain] 学习笔记（02）：LCEL 链式调用与动态模型配置实战-171主机测评](https://www.171host.com/wp-content/uploads/2026/10/20261030203301-6ae4fefdb54f3-220x150.png)
![[LangChain] 学习笔记（02）：LCEL 链式调用与动态模型配置实战-171主机测评](https://www.171host.com/wp-content/uploads/2026/10/20261030202745-6ae4fdc1556bf-220x150.png)
