JavaScript 基础语法

这一章我们系统过一遍 JS 的基础语法——语句、注释、字面量、命名规则、严格模式。读完你就能看懂任何 JS 代码的"骨架",知道每一行在做什么。

1. 程序由语句组成

JS 程序是一条条语句(statement)的集合,每条语句让计算机做一件事。语句通常以分号结尾:

// 一条语句以分号结尾(JS 会自动补,但建议显式写)
let x = 1;
let y = 2;
let sum = x + y;

// 一行也可以写多条语句(不推荐,可读性差)
let a = 1; let b = 2;

// 语句末尾的分号可省略,但保留能让代码更稳妥
let name = "小明"   // 不写分号也行,但不推荐

JS 有自动分号插入(ASI)机制——你不写分号,引擎会尝试自动补。但这偶尔会踩坑(比如以 ( 或 [ 开头的行会和上一行合并),所以建议始终显式写分号。配 ESLint 这种代码检查工具可以统一团队风格。

2. 注释

注释是给人看的,引擎会忽略。JS 有单行、多行两种,外加一种文档注释:

// 这是单行注释,双斜杠开头,到行尾结束

/*
   这是多行注释,
   用斜杠星号包裹,
   可以跨多行。
*/

/**
 * 这是文档注释(JSDoc),
 * 用于描述函数/类的用途,
 * 编辑器和 IDE 会读取并提示。
 */
function add(a, b) {
  return a + b;
}

JSDoc 是 JS 的文档规范,VS Code 会读取它,在你调用函数时显示参数说明。写公共函数时,养成写 JSDoc 的习惯。

3. 字面量(Literal)

字面量就是直接写在代码里的值。下面这些都是字面量:

// 字面量(literal):直接写在代码里的常量值

100          // 数字字面量
3.14         // 浮点数字面量
"hello"      // 字符串字面量(双引号)
'world'      // 字符串字面量(单引号)
`模板`      // 模板字符串字面量(反引号)
true         // 布尔字面量
false
null         // 空
undefined    // 未定义
[1, 2, 3]    // 数组字面量
{ name: "小明" } // 对象字面量

JS 里字符串可以用单引号、双引号、反引号三种方式包裹,效果几乎一样。但反引号(\\`)是模板字符串,支持换行和嵌入变量,是现代 JS 的首选:

const name = "小明";
const greeting = `你好, ${name}! 你 ${20 + 1} 岁了。`;
console.log(greeting);
// 输出: 你好, 小明! 你 21 岁了。

4. 标识符与命名规则

标识符就是程序员自己起的名字(变量名、函数名、参数名)。规则是:

由字母、数字、下划线 _、美元符 $ 组成。
不能以数字开头(可以以字母、_、$ 开头)。
不能是关键字(let、if、function 等)。
区分大小写(age 和 Age 是两个不同变量)。

// 标识符:变量名、函数名等
// 规则:由字母/数字/下划线/$ 组成,不能以数字开头
let userName = "小明";    // 驼峰命名,推荐
let _count = 0;
let $elem = document.body;

// ❌ 不能以数字开头
// let 2ndPlace = "亚军";  // 报错

// ❌ 不能用关键字
// let let = 1;            // 报错:let 是关键字

// 区分大小写!
let age = 20;
// let Age;                // 这是另一个变量,不等于 age

命名风格上,JS 社区统一用驼峰命名法(camelCase):首字母小写,每个单词首字母大写,如 userName、getUserId。类名用大驼峰(PascalCase),如 UserModel。常量有时用全大写加下划线(MAX_SIZE)。

5. 关键字与保留字

JS 有几十个关键字,不能用作变量名。常见的有:

声明:var let const function class
控制流:if else switch case for while do break continue return try catch finally throw
类型与值:true false null undefined typeof instanceof void
其他:this new delete in of yield async await import export default

另外还有一批"保留字"(如 enum、package、implements),虽然现在没用到,但也别用,以防未来冲突。

6. 大小写敏感

JS 严格区分大小写。console.log() 写成 Console.log() 会直接报错——浏览器里没有 Console 这个对象。常见的坑:

document.getElementById ≠ document.getElementByID(末尾 ID 全大是错的)。
innerHTML ≠ innerHtml。
NaN(Not a Number)不能写成 nan。

7. 严格模式(use strict)

JS 早期有些"不严谨"的设计,比如未声明就赋值的变量会自动变成全局变量。严格模式把这些行为改成报错,强制你写更安全的代码:

"use strict";   // 在文件或函数开头加这一行

// 严格模式下,代码更规范:
// 1. 未声明直接赋值的变量会报错(普通模式会创建全局变量)
// x = 10;   // 严格模式:ReferenceError
// 普通模式:自动变成 window.x = 10,污染全局

// 2. 函数内 this 默认是 undefined(普通模式是 window)
function check() {
  console.log(this);   // undefined
}
check();

// 3. 删除不可删除的属性会报错
// delete Object.prototype;   // TypeError

// ES6 模块和 class 默认就是严格模式,无需手动加

严格模式有两种用法:

全局严格:在文件第一行写 "use strict";,整个文件都严格。
函数级严格:在函数体第一行写,只对当前函数生效。

ES6 模块(<script type="module">)和 class 默认就是严格模式,无需手动加。新项目推荐始终启用。

8. 输出方式

JS 有几种输出结果的方式,各有用途:

console.log("普通日志");        // 控制台输出,最常用
console.error("出错啦");     // 红色错误信息
console.warn("警告");        // 黄色警告
console.table([1, 2, 3]);    // 表格形式输出

alert("弹窗显示");           // 浏览器弹窗

document.write("写入页面");   // 直接写到 HTML(几乎不用,会覆盖整个页面)

document.body.innerHTML = "改页面内容";  // 修改 DOM

日常开发 99% 用 console.log。其他方式仅在特定场景用。

小结

这一章你了解了 JS 程序的整体骨架:语句以分号结尾、注释怎么写、字面量长什么样、命名规则、严格模式。下一篇我们看 JS 的变量声明——let、const、var 的区别和坑。

← 上一篇 JavaScript 简介

下一篇 JavaScript 变量 →

✈️💬