【JavaScript-Day 3】掌握JS语法规则：语句、分号、注释与大小写敏感详解

吴师兄大模型

于 2025-05-05 15:55:16 发布

阅读量1k

点赞数 12

CC 4.0 BY-SA版权

分类专栏： Java编程全景指南：从零到精通文章标签： javascript 开发语言 java 开发语言语法规则人工智能后端前端

本文链接：https://blog.csdn.net/Kiradzy/article/details/147718660

Java编程全景指南：从零到精通专栏收录该内容

63 篇文章

订阅专栏

Langchain系列文章目录

01-玩转LangChain：从模型调用到Prompt模板与输出解析的完整指南
 02-玩转 LangChain Memory 模块：四种记忆类型详解及应用场景全覆盖
 03-全面掌握 LangChain：从核心链条构建到动态任务分配的实战指南
 04-玩转 LangChain：从文档加载到高效问答系统构建的全程实战
 05-玩转 LangChain：深度评估问答系统的三种高效方法（示例生成、手动评估与LLM辅助评估）
06-从 0 到 1 掌握 LangChain Agents：自定义工具 + LLM 打造智能工作流！
07-【深度解析】从GPT-1到GPT-4：ChatGPT背后的核心原理全揭秘
 08-【万字长文】MCP深度解析：打通AI与世界的“USB-C”，模型上下文协议原理、实践与未来

JavaScript系列文章目录

01-【JavaScript-Day 1】从零开始：全面了解 JavaScript 是什么、为什么学以及它与 Java 的区别
 02-【JavaScript-Day 2】开启 JS 之旅：从浏览器控制台到 ＜script＞ 标签的 Hello World 实践
03-【JavaScript-Day 3】掌握JS语法规则：语句、分号、注释与大小写敏感详解

前言

大家好，欢迎来到 JavaScript 学习之旅的第三天！在前两篇文章中，我们初步认识了 JavaScript，并成功运行了第一行代码。今天，我们将深入探讨 JavaScript 的基本语法规则，这些规则如同语言的“语法”，规定了我们如何书写代码才能让计算机（更具体地说是 JavaScript 引擎）准确无误地理解并执行我们的指令。掌握这些基础规则——语句、分号、注释以及大小写敏感性——对于编写出规范、可读且不易出错的代码至关重要。它们是构建更复杂程序逻辑的基石。让我们一起开始吧！

一、JavaScript 语句 (Statements): 指令的基石

在编程世界里，我们通过向计算机发出一系列的指令来完成任务。在 JavaScript 中，这些独立的指令或操作单元被称为“语句”（Statements）。

1.1 什么是语句？

1.1.1 语句的定义

简单来说，一条 JavaScript 语句就是执行某个特定任务的一行代码。它告诉浏览器（或 Node.js 等环境）要做什么。

类比理解： 如果将 JavaScript 代码比作一篇文章，那么语句就相当于文章中的一个个句子，每个句子表达一个完整的意思或执行一个动作。

1.1.2 语句的作用

语句是构成 JavaScript 程序的基本单位。程序的功能就是通过一条条语句按顺序（或按逻辑控制）执行来实现的。常见的语句类型包括：

声明语句: 如 let message; (声明一个变量)
赋值语句: 如 message = 'Hello, CSDN!'; (给变量赋值)
函数调用语句: 如 console.log(message); (调用函数输出信息)
控制流语句: 如 if, for, while 等（我们将在后续文章学习）
表达式语句: 如 count++; (一个表达式也可以作为一条语句)

1.2 语句的构成与书写

1.2.1 基本结构

一条典型的 JavaScript 语句通常包含表达式、关键字、运算符等，并以一个特定的方式组合。

// 这是一个声明语句，声明了一个名为 userName 的变量
let userName;

// 这是一个赋值语句，将字符串 'Alice' 赋给 userName 变量
userName = 'Alice';

// 这是一个函数调用语句，调用 console.log 函数打印 userName 的值
console.log(userName); // 输出: Alice

// 这是一个表达式语句，将 a 的值增加 1
let a = 10;
a++; // 这本身就是一条语句
console.log(a); // 输出: 11

1.2.2 语句块 (Block Statements)

有时，我们需要将多条语句组合在一起，形成一个逻辑单元。这时可以使用花括号 {} 将它们包裹起来，形成一个语句块。语句块常用于 if 语句、for 循环、函数体等结构中。

// 示例：if 语句中的语句块
let score = 85;
if (score > 60) { // 开始语句块
  console.log('成绩合格');
  let grade = 'Pass'; // 块级作用域变量 (后续会讲)
  console.log('评级:', grade);
} // 结束语句块

二、分号 (Semicolon): 语句的终结符？

在许多编程语言（如 C++, Java）中，分号是强制要求的语句结束符。JavaScript 也有分号，但它的使用规则稍微有些“灵活”，这也常常是新手混淆的地方。

2.1 分号的作用

2.1.1 明确分隔语句

分号的主要作用是清晰地标记一条语句的结束。这有助于 JavaScript 引擎准确地解析代码，区分不同的指令。

// 使用分号明确分隔语句
let x = 10; console.log(x); // 在一行写多条语句，必须用分号分隔
let y = 20; let z = x + y; // 清晰地表示两条语句

2.1.2 提高代码可读性

即使在可以省略分号的情况下（见下文），显式地添加分号也能让代码意图更明确，便于阅读和维护，尤其是在团队协作中。

2.2 自动分号插入 (ASI) 机制

2.2.1 ASI 的工作原理

JavaScript 引擎有一个“自动分号插入”（Automatic Semicolon Insertion, ASI）机制。当解析器遇到换行符，并且根据语法规则判断这里“可能”需要一个分号来结束语句时，它会自动帮你插入一个分号。

（1）ASI 触发场景（常见）

当一行代码结束，下一行的代码无法与当前行代码构成合法的语句时。
遇到 } (代码块结束) 时。
文件末尾。

（2）ASI 带来的便利（表面上）

由于 ASI 的存在，很多时候即使我们省略了行末的分号，代码也能正常运行。

// ASI 可能会生效的情况
let name = 'Bob' // 换行了，下一行是 console.log，无法与上一行构成合法语句，ASI 可能介入
console.log(name) // 文件末尾，ASI 可能介入

2.3 ASI 的风险与陷阱

2.3.1 依赖 ASI 的潜在问题

过度依赖 ASI 是 非常不推荐 的做法，因为它可能导致难以发现的错误和非预期的行为。

（1）导致语法错误或逻辑错误

某些情况下，ASI 的插入位置可能并非你的本意，导致代码无法按预期工作。一个经典的例子是 return 语句后换行：

// 错误的示例：ASI 导致返回 undefined
function getUser() {
  return // ASI 在这里插入分号！return; 表示返回 undefined
         { name: 'Charlie' }; // 这变成了一个无法访问的代码块
}
console.log(getUser()); // 输出: undefined，而不是 { name: 'Charlie' }

// 正确的写法：
function getUserCorrect() {
  return { // 对象字面量必须紧跟 return
    name: 'Charlie'
  };
}
console.log(getUserCorrect()); // 输出: { name: 'Charlie' }

（2）代码压缩或合并时的问题

在代码压缩或多个文件合并的过程中，如果省略了分号，可能会因为 ASI 规则的意外应用而导致合并后的代码出错。

2.4 最佳实践：始终添加分号

为了代码的清晰性、可维护性以及避免 ASI 带来的潜在风险，强烈建议：

始终在每条 JavaScript 语句的末尾显式地添加分号！

这是一种良好且专业的编码习惯。

三、代码注释 (Comments): 给自己和他人看的笔记

注释是代码中不会被 JavaScript 引擎执行的部分，它们存在的意义是给人阅读的，用来解释代码的逻辑、目的或用法。

3.1 为什么需要注释？

3.1.1 提高代码可读性

解释复杂逻辑: 对于难以理解的算法或业务逻辑，注释可以提供清晰的说明。
阐述设计意图: 解释为什么采用某种实现方式，而不是另一种。

3.1.2 方便代码维护与协作

快速理解: 当你或其他开发者回顾旧代码时，注释能帮助快速回忆起代码的功能。
团队沟通: 在团队项目中，注释是重要的沟通工具。

3.1.3 临时禁用代码（调试）

在调试时，可以使用注释快速地“注释掉”一部分代码，使其暂时不执行，而无需真正删除。

3.2 单行注释 (`//`)

3.2.1 语法与用法

使用两个斜杠 // 开始，从 // 开始到该行的末尾都被视为注释。

// 这是一条单行注释
let pi = 3.14; // 也可以在代码后面添加注释，解释这行代码
// let radius = 5; // 使用注释暂时禁用这行代码

3.2.2 适用场景

适用于简短的解释、行内说明或临时禁用单行代码。

3.3 多行注释 (`/* ... */`)

3.3.1 语法与用法

使用 /* 开始，并以 */ 结束。介于 /* 和 */ 之间的所有内容（可以跨越多行）都被视为注释。

/*
  这是一个多行注释。
  它可以跨越好几行。
  通常用于详细说明函数、模块或复杂的代码段。
*/
function calculateArea(radius) {
  /*
   * 计算圆的面积
   * 参数: radius (number) - 圆的半径
   * 返回: number - 圆的面积
   */
  return 3.14 * radius * radius; // 使用近似 Pi 值
}

/*
let unusedVariable = 'test';
console.log(unusedVariable);
*/ // 使用多行注释禁用一段代码

3.3.2 注意事项

多行注释 /* ... */ 不能嵌套使用。

3.4 注释的最佳实践

3.4.1 写什么？

解释“为什么”而非“是什么”: 如果代码本身很清晰地表达了“做了什么”，那么注释应该侧重于解释“为什么”这么做（设计决策、背景原因）。
解释复杂的逻辑或算法。
标注 TODO 或 FIXME: 标记待办事项或已知需要修复的问题。

3.4.2 不写什么？

避免无意义的注释: 不要为显而易见的代码添加注释（如 i++; // 变量 i 加 1）。
避免过时的注释: 代码更新时，务必同步更新相关注释，错误的注释比没有注释更糟糕。

3.4.3 何时写？

最好在编写代码的同时添加注释，而不是事后补充。

四、大小写敏感 (Case Sensitivity): 细节决定成败

这是 JavaScript 中一个非常基础但极其重要的特性：JavaScript 是 大小写敏感 的语言。

4.1 JavaScript 的“大小写区分”

4.1.1 含义解释

这意味着在 JavaScript 中，大写字母和小写字母被视为不同的字符。

4.1.2 体现在哪些方面？

大小写敏感性适用于：

变量名: myVariable 和 myvariable 是两个不同的变量。
函数名: calculate() 和 Calculate() 是两个不同的函数。
对象属性名: user.name 和 user.Name 是不同的属性。
关键字: if, for, while 等关键字必须使用小写。写成 IF 或 For 会导致语法错误。
内置对象和方法: console.log() 必须是小写的 c 和 l。Math.PI 必须是大写的 PI。

4.2 常见错误与陷阱

4.2.1 变量/函数名拼写错误

最常见的错误是由于大小写不匹配导致引用不到正确的变量或函数。

let message = "Hello";

// 错误：尝试访问 message，但使用了大写 M
// console.log(Message); // Uncaught ReferenceError: Message is not defined

// 正确
console.log(message); // 输出: Hello

4.2.2 调用内置方法/访问属性时大小写错误

let text = "csdn blog";

// 错误：toUpperCase 方法名应为全大写
// let upperText = text.touppercase(); // Uncaught TypeError: text.touppercase is not a function

// 正确
let upperText = text.toUpperCase();
console.log(upperText); // 输出: CSDN BLOG

// 错误：getElementById 的 D 应大写
// document.getelementbyid('myElement'); // Uncaught TypeError: document.getelementbyid is not a function

// 正确 (假设在 HTML 中存在 id="myElement" 的元素)
// let element = document.getElementById('myElement');

4.3 命名约定（简提）

为了避免大小写混淆并提高代码可读性，社区形成了一些广泛接受的命名约定：

驼峰命名法 (Camel Case): 变量名、函数名、对象属性名通常使用驼峰命名法。第一个单词小写，后续每个单词首字母大写。例如：myVariableName, calculateTotalPrice, userInfo。
帕斯卡命名法 (Pascal Case): 类名（构造函数名）通常使用帕斯卡命名法。每个单词的首字母都大写。例如：User, HttpRequest, MyComponent。
常量名: 常量（使用 const 声明且值不应改变）通常使用全大写字母，并用下划线分隔单词。例如：MAX_CONNECTIONS, API_KEY。

遵循这些约定有助于减少因大小写错误导致的问题。

五、总结

今天我们深入学习了 JavaScript 的几项基本语法规则，它们是编写有效、可读代码的基础：

语句 (Statements): 是 JavaScript 执行的基本指令单元，告诉浏览器做什么。每条语句执行一个特定的任务。
分号 (Semicolon): 用于明确标记语句的结束。虽然 JavaScript 有自动分号插入 (ASI) 机制，但强烈建议始终显式添加分号，以提高代码清晰度和避免潜在错误。
注释 (Comments): // 用于单行注释，/* ... */ 用于多行注释。注释用于解释代码、提高可读性、方便维护和临时禁用代码，它们不会被引擎执行。编写有意义且及时更新的注释非常重要。
大小写敏感 (Case Sensitivity): JavaScript 严格区分大小写。变量名、函数名、关键字等的大小写必须准确无误。遵循常见的命名约定（如驼峰命名法）有助于减少相关错误。

掌握这些基础规则，就像学好了一门语言的拼写和标点。虽然简单，但它们是构建复杂、健壮应用程序的必要前提。在接下来的学习中，我们将不断运用这些规则。希望大家勤加练习，养成良好的编码习惯！