JavaScript: JavaScript 语法

Q: 不加分号真的会出 bug 吗？

大多数时候不会，但有些边界情况会。比如 return 后换行，JS 会在 return 后自动插入分号，返回 undefined 而不是你期望的值。这类 bug 非常隐蔽，排查半天才发现是少了个分号——何必呢？

Q: 驼峰命名法和下划线命名法哪个好？

在 JS 世界里驼峰命名是主流（ firstName ），下划线命名（ first_name ）更多出现在 Python 和数据库字段中。入乡随俗，写 JS 就用驼峰。

语法是语言的规则——掌握 JS 的语法规则，你写出的代码才能被浏览器正确理解。

1. 语句和分号

JS 代码由一条条语句组成，每条语句执行一个操作。分号 ; 用来标记语句的结束。

虽然 JS 有自动分号插入机制（不加分号大多也能跑），但强烈建议你主动加分号。为什么？因为自动分号插入偶尔会猜错你的意图，导致难以排查的 bug。养成加分号的习惯，省下的调试时间远比省下的分号值钱。

▶ 示例

JAVASCRIPT

// 本节代码示例
const message = "你好，世界!";
console.log(message);

▶ 试一试

这是最简单的示例，后续章节会详细解释。## 2. 代码块

用花括号 {} 包裹的多条语句组成一个代码块，常见于函数体、条件语句和循环中：

HTML

<script>
if (score > 60) {
  result = "及格";
  color = "green";
}
</script>

代码块让多条语句像一个整体一样执行。虽然单条语句时花括号可以省略，但永远不要省略——加上花括号，代码意图更清晰，以后加语句也不会出错。

3. 注释

注释是写给人看的，浏览器完全忽略。好的注释解释"为什么"，而不是"做了什么"（代码本身应该能说明做了什么）。

单行注释：// 注释内容
多行注释：/* 注释内容 */

4. 大小写敏感

JS 严格区分大小写：myVar、myvar、MYVAR 是三个完全不同的变量。这个坑新手经常踩——明明代码逻辑没问题，结果就是报错，最后发现大小写写错了。

5. 关键字和保留字

JS 保留了一些词作为关键字（如 var、let、const、function、if、else 等），你不能用它们作为变量名。完整的保留字列表很长，常用的记住就行——编辑器的语法高亮会帮你识别。

▶ 示例：语句、分号与代码块

HTML

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>JS 语法 - 语句与代码块</title>
  <style>
    body { font-family: "Microsoft YaHei", sans-serif; max-width: 500px; margin: 60px auto; }
    #output { min-height: 40px; padding: 16px; background: #f5f5f5; border-radius: 8px; margin-top: 16px; }
    button { padding: 10px 24px; font-size: 16px; border: none; border-radius: 6px; cursor: pointer; color: #fff; background: #2196F3; margin-top: 8px; }
    button:hover { background: #1976D2; }
    input { padding: 8px; font-size: 16px; border: 2px solid #ddd; border-radius: 4px; width: 100px; }
  </style>
</head>
<body>
  <h2>语句与代码块</h2>
  <p>输入一个分数，判断是否及格：</p>
  <input type="number" id="scoreInput" placeholder="分数" value="75">
  <button id="checkBtn">判断</button>
  <div id="output"></div>
  <script>
    document.getElementById("checkBtn").onclick = function() {
      var score = parseInt(document.getElementById("scoreInput").value);
      var result = "";
      var color = "";
      if (score >= 60) {
        result = "及格了！分数：" + score;
        color = "#4CAF50";
      } else {
        result = "不及格，分数：" + score;
        color = "#f44336";
      }
      var outputEl = document.getElementById("output");
      outputEl.textContent = result;
      outputEl.style.color = color;
    };
  </script>
</body>
</html>

▶ 试一试

▶ 示例：注释的用法

HTML

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>JS 语法 - 注释</title>
  <style>
    body { font-family: "Microsoft YaHei", sans-serif; max-width: 500px; margin: 60px auto; }
    .code-box { background: #263238; color: #aed581; padding: 20px; border-radius: 8px; font-family: Consolas, monospace; font-size: 14px; line-height: 1.8; white-space: pre; overflow-x: auto; }
    .comment { color: #78909c; }
    button { margin-top: 16px; padding: 10px 24px; font-size: 16px; border: none; border-radius: 6px; cursor: pointer; color: #fff; background: #4CAF50; }
    #result { margin-top: 12px; font-size: 18px; }
  </style>
</head>
<body>
  <h2>JS 注释</h2>
  <div class="code-box"><span class="comment">// 这是单行注释：计算圆的面积</span>
var r = 5;
var area = 3.14 * r * r;
<span class="comment">/* 这是多行注释：
   保留两位小数输出 */</span>
area = area.toFixed(2);</div>
  <button id="runBtn">运行这段代码</button>
  <p id="result"></p>
  <script>
    document.getElementById("runBtn").onclick = function() {
      var r = 5;
      var area = 3.14 * r * r;
      area = area.toFixed(2);
      document.getElementById("result").textContent = "半径为5的圆面积 = " + area;
      document.getElementById("result").style.color = "#4CAF50";
    };
  </script>
</body>
</html>

▶ 试一试

▶ 示例：大小写敏感演示

HTML

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>JS 语法 - 大小写敏感</title>
  <style>
    body { font-family: "Microsoft YaHei", sans-serif; max-width: 500px; margin: 60px auto; text-align: center; }
    .card { display: inline-block; padding: 20px; border: 2px solid #ddd; border-radius: 12px; margin: 8px; min-width: 120px; }
    .card h3 { margin: 0 0 8px; }
    .card p { margin: 0; font-family: Consolas, monospace; font-size: 18px; }
    #myVar { border-color: #4CAF50; }
    #myvar { border-color: #FF9800; }
    #MYVAR { border-color: #9C27B0; }
    button { margin-top: 20px; padding: 10px 24px; font-size: 16px; border: none; border-radius: 6px; cursor: pointer; color: #fff; background: #e91e63; }
  </style>
</head>
<body>
  <h2>JS 大小写敏感</h2>
  <p>以下三个变量名各不相同：</p>
  <div class="card" id="myVar"><h3>myVar</h3><p>---</p></div>
  <div class="card" id="myvar"><h3>myvar</h3><p>---</p></div>
  <div class="card" id="MYVAR"><h3>MYVAR</h3><p>---</p></div>
  <br>
  <button id="showBtn">赋值并显示</button>
  <script>
    document.getElementById("showBtn").onclick = function() {
      var myVar = "绿色";
      var myvar = "橙色";
      var MYVAR = "紫色";
      document.querySelector("#myVar p").textContent = myVar;
      document.querySelector("#myvar p").textContent = myvar;
      document.querySelector("#MYVAR p").textContent = MYVAR;
    };
  </script>
</body>
</html>

▶ 试一试

▶ 示例：命名规则实战

HTML

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>JS 语法 - 命名规则</title>
  <style>
    body { font-family: "Microsoft YaHei", sans-serif; max-width: 550px; margin: 60px auto; }
    .rule { padding: 12px 16px; border-left: 4px solid #2196F3; background: #e3f2fd; margin: 8px 0; border-radius: 0 8px 8px 0; }
    .bad { border-left-color: #f44336; background: #ffebee; }
    .good { border-left-color: #4CAF50; background: #e8f5e9; }
    code { background: #eceff1; padding: 2px 6px; border-radius: 3px; font-size: 14px; }
  </style>
</head>
<body>
  <h2>变量命名规则</h2>
  <div class="rule">✅ 可以：字母、数字、下划线 <code>_</code>、美元符 <code>$</code></div>
  <div class="rule">✅ 不能以数字开头</div>
  <div class="rule">✅ 不能使用关键字（如 <code>var</code> <code>let</code> <code>function</code>）</div>
  <div class="rule good">✅ 推荐：驼峰命名法 — <code>myFirstName</code> <code>totalScore</code></div>
  <div class="rule bad">❌ 不推荐：<code>my_first_name</code>（下划线风格在 JS 中不主流）</div>
  <div class="rule bad">❌ 错误：<code>2ndPlace</code>（数字开头）<code>my-var</code>（含减号）</div>
  <hr style="margin: 24px 0;">
  <h3>驼峰命名法示例</h3>
  <div id="demo" style="font-size: 18px; line-height: 2;"></div>
  <script>
    var firstName = "张";
    var lastName = "三";
    var ageInYears = 25;
    var isStudent = true;
    var favoriteLanguage = "JavaScript";
    var demoEl = document.getElementById("demo");
    demoEl.innerHTML = "firstName = \"" + firstName + "\"<br>" +
      "lastName = \"" + lastName + "\"<br>" +
      "ageInYears = " + ageInYears + "<br>" +
      "isStudent = " + isStudent + "<br>" +
      "favoriteLanguage = \"" + favoriteLanguage + "\"";
  </script>
</body>
</html>

▶ 试一试

❓ 常见问题

Q 不加分号真的会出 bug 吗？

A 大多数时候不会，但有些边界情况会。比如 return 后换行，JS 会在 return 后自动插入分号，返回 undefined 而不是你期望的值。这类 bug 非常隐蔽，排查半天才发现是少了个分号——何必呢？

Q 单行语句也要加花括号吗？

A 建议加。今天只有一行，明天可能加两行，忘了补花括号就会出逻辑错误。花括号不占多少字节，但能省下很多排错时间。

Q 驼峰命名法和下划线命名法哪个好？

A 在 JS 世界里驼峰命名是主流（firstName），下划线命名（first_name）更多出现在 Python 和数据库字段中。入乡随俗，写 JS 就用驼峰。

📖 小节

JS 语句以分号结尾，建议永远主动加分号，别依赖自动分号插入
代码块用 {} 包裹，即使单条语句也别省略花括号
单行注释 //，多行注释 /* */，注释解释"为什么"而非"做了什么"
JS 严格区分大小写，myVar ≠ myvar，这是新手最常见的低级错误
变量名不能以数字开头，不能使用关键字和保留字
命名推荐驼峰命名法：firstName、totalScore

📝 作业

基础题：写一段 JS 代码，声明两个变量 studentName 和 studentAge 并赋值，用 console.log() 输出它们。确保所有语句都加了分号，变量名使用驼峰命名法。
进阶题：创建一个页面，包含一个输入框和按钮，用户输入年龄后判断是否成年（≥18），用代码块和 if/else 实现判断逻辑，并在页面上显示结果。
挑战题：创建一个"命名检查器"页面，用户输入一个变量名，JS 判断它是否合法（不能数字开头、不能含空格和减号、不能是关键字），并在页面上显示"合法"或"不合法"及原因。

Web-Tutorial 技术团队

由多位开发者共同维护的编程教程平台。每篇教程由对应领域的开发者编写和审核，确保内容准确可靠。如发现任何问题，欢迎向我们反馈。

关于我们

JavaScript: JavaScript 语法

1. 语句和分号

▶ 示例

3. 注释

4. 大小写敏感

5. 关键字和保留字

▶ 示例：语句、分号与代码块

▶ 示例：注释的用法

▶ 示例：大小写敏感演示

▶ 示例：命名规则实战

❓ 常见问题

📖 小节

📝 作业

🙏 帮我们做得更好