程式碼結構

我們將要學習的第一個內容就是構建程式碼塊。

語句

語句是執行操作的語法結構和命令。

我們已經見過了 alert('Hello, world!') 這樣可以用來顯示訊息的語句。

我們可以在程式碼中編寫任意數量的語句。語句之間可以使用分號進行分割。

例如，我們將 "Hello World" 這條資訊一分為二：

alert('Hello'); alert('World');
複製程式碼

通常，每條語句獨佔一行，以提高程式碼的可讀性：

alert('Hello');
alert('World');
複製程式碼

分號

當存在分行符（line break）時，在大多數情況下可以省略分號。

下面的程式碼也是可以執行的：

alert('Hello')
alert('World')
複製程式碼

在這，JavaScript 將分行符理解成“隱式”的分號。這也被稱為 自動分號插入。

在大多數情況下，換行意味著一個分號。但是“大多數情況”並不意味著“總是”！

有很多換行並不是分號的例子，例如：

alert(3 +
1
+ 2);
複製程式碼

程式碼輸出 6，因為 JavaScript 並沒有在這裡插入分號。顯而易見的是，如果一行以加號 "+" 結尾，那麼這是一個“不完整的表示式”，不需要分號。所以，這個例子得到了預期的結果。

但存在 JavaScript 無法確定是否真的需要自動插入分號的情況。

這種情況下發生的錯誤是很難被找到和解決的。

一個錯誤的例子

如果你好奇地想知道一個這種錯誤的具體例子，那你可以看看下面這段程式碼：

[1, 2].forEach(alert)
複製程式碼

你不需要考慮方括號 [] 和 forEach 的含義，現在它們並不重要，之後我們會學習它們。讓我們先記住這段程式碼的執行結果：先顯示 1，然後顯示 2。

現在我們在程式碼前面插入一個 alert 語句，並且不加分號：

alert("There will be an error")

[1, 2].forEach(alert)
複製程式碼

現在，如果我們執行程式碼，只有第一個 alert 語句的內容被顯示了出來，隨後我們收到了一個錯誤！

但是，如果我們在第一個 alert 語句末尾加上一個分號，就工作正常了：

alert("All fine now");

[1, 2].forEach(alert)
複製程式碼

現在，我們能得到 "All fine now"，然後是 1 和 2。

出現無分號變數（variant）的錯誤，是因為 JavaScript 並不會在方括號 [...] 前新增一個隱式的分號。

所以，因為沒有自動插入分號，第一個例子中的程式碼被視為了一條簡單的語句，我們從引擎看到的是這樣的：

alert("There will be an error")[1, 2].forEach(alert)
複製程式碼

但它應該是兩條語句，而不是一條。這種情況下的合併是不對的，所以才會造成錯誤。諸如此類，還有很多。

即使語句被換行符分隔了，我們依然建議在它們之間加分號。這個規則被社群廣泛採用。我們再次強調一下 —— 大部分時候可以省略分號，但是最好不要省略分號，尤其對新手來說。

註釋

隨著時間推移，程式變得越來越複雜。為程式碼新增 註釋 來描述它做了什麼和為什麼要這樣做，變得非常有必要了。

你可以在指令碼的任何地方新增註釋，它們並不會影響程式碼的執行，因為引擎會直接忽略它們。

單行註釋以兩個正斜槓字元 // 開始。

這一行的剩餘部分是註釋。它可能獨佔一行或者跟隨在一條語句的後面。

就像這樣：

// 這行註釋獨佔一行
alert('Hello');

alert('World'); // 這行註釋跟隨在語句後面
複製程式碼

多行註釋以一個正斜槓和星號開始 "/*" 並以一個星號和正斜杆結束 "*/"。

就像這樣:

/* 兩個訊息的例子。
這是一個多行註釋。
*/
alert('Hello');
alert('World');
複製程式碼

註釋的內容被忽略了，所以如果我們在 /* ... */ 中放入程式碼，並不會執行。

有時候，可以很方便地臨時禁用程式碼：

/* 註釋程式碼
alert('Hello');
*/
alert('World');
複製程式碼

使用快捷鍵

在大多數的編輯器中，一行程式碼可以使用 key:Ctrl+/ 熱鍵進行單行註釋，諸如 key:Ctrl+Shift+/ 的熱鍵可以進行多行註釋（選擇程式碼，然後按下熱鍵）。對於 Mac 電腦，應使用 key:Cmd 而不是 key:Ctrl。

不支援註釋巢狀！

不要在 /*...*/ 內巢狀另一個 /*...*/。

下面這段程式碼報錯而無法執行：

/*
  /* 巢狀註釋 ?!? */
*/
alert( 'World' );
複製程式碼

對你的程式碼進行註釋，這還有什麼可猶豫的！

註釋會增加程式碼總量，但這一點也不是什麼問題。有很多工具可以幫你在把程式碼部署到伺服器之前縮減程式碼。這些工具會移除註釋，這樣註釋就不會出現在釋出的指令碼中。所以，註釋對我們的生產沒有任何負面影響。

在後面的教程中，會有一章 程式碼質量 的內容解釋如何更好地寫註釋。

本教程首發於微信公眾號「技術漫談」。

---

現代 JavaScript 教程：開源的現代 JavaScript 從入門到進階的優質教程。React 官方文件推薦，與 MDN 並列的 JavaScript 學習教程。

線上免費閱讀：zh.javascript.info

---

掃描下方二維碼，關注微信公眾號「技術漫談」，訂閱更多精彩內容。