介紹 JavaScript 程式碼加上不加分號有什麼差別

javascript欄位介紹程式碼加上不加分號的差別是什麼

推薦（免費）：javascript（影片）

這個問題在很多文章中都討論過，在ESlint 規範中也因為加不加分號而分為兩大陣營，到於加不加分號，關鍵是需要了解分號對於JavaScript 的影響，開始之前可以先看看下面這道面試題：

請問這段程式碼是否能夠正常運作？

var a = 1
(function() {
  console.log(2)
})()

。

。

。

。

如果執行這段程式碼，會出現下面的錯誤：

Uncaught TypeError: 1 is not a function

什麼鬼！ 1 is not a function ？我們沒有打算執行數字 1，為什麼說數字 1 不是函數，這種錯誤是很難找到原因的，常常會在出問題的程式碼行上打轉。這個錯誤必然是上嗎的程式碼在運行時被看作是同一行，其概念如下：

var a = 1(function() { /* */ })()

因此立即函數的() 被附加在1 上，這是一個呼叫函數的語法，所以會產生1 is not a function 的錯誤，想要避免這個錯誤就需要使用分號：

var a = 1 // 随便把分号放在哪里，只要能隔开就行
;(function() {
  console.log(2)
})()

ASI 自動加入分號

ASI是「Automatic Semicolon Insertion」 的縮寫，在執行時會往有些折行的程式碼中自動插入分號，這個機制可以讓部分程式碼在沒有加入分號時也能正常運行，例如下面的例子：

var b = 1
++b
console.log('b', b)

由於程式碼中的 屬於一元表達式，它只能在表達式的左邊或右邊放置變數，如果沒有ASI 的機制，程式碼會被轉換為var b = 1 b 這樣的錯誤語句。不過好在有 ASI，實際運作時會自動被加入分號，也不會出現上面的錯誤。

var b = 1;
++b;
console.log('b', b); // 2

return 與分號的關係

再來看一個例子，下面的程式碼在return 的後面空一行後再寫要返回的值，那麼問運行結果是什麼呢？

function fn() {
  return 
  '小明'
}
console.log(fn())

這段程式碼因為ASI 的修正，return 的後面會被加上一個分號，所以return 與預期回傳的值被分開了，結果return 的內容為空值，最終的結果也只能是undefined 。

function fn() {
  return;
  '小明';
}
console.log(fn()); // undefined

到底應該怎樣處理分號

本來ASI 是出於一片好心，用來修正沒有加入分號的程式碼片段，但偏偏在有的地方並沒有發揮它的作用（例如本文一開始所介紹的立即函數），導致程式碼出現了錯誤；甚至有些程式碼不會出錯，但會使你的程式碼執行結果和預期相差萬裡。

解決ASI 問題的方式如下：

• 無論如何都要加上分號，完全由自己決定程式碼的分割
• 牢記不會自動加入分號的規則，當不會自動插入分號時，則手動加入

不會被自動加入分號的規則

下面時各種不會自動加入分號的規則：

1. 新行的程式碼是從 (、[、/  字元開始的，這類情況一般會直接出現Uncaught TypeError 從而導致程式碼無法運作。

var a = 1
var b = a
(a + b).toString()

var a = 1
[1,2,3].forEach(bar)
 
(function() { })()
(function() { })()
 
var a = 1
var b = a
/test/.test(b)

1. 新行以 ，-，*，％ 開始，這類情況大多會影響運算結果，所以應該合併為一行。

var a = 2
var b = a
+a

1. 新行以, 或. 開始，這種用法經常會出現，主要是為了避免程式碼過長而加入的分隔，這種情況並不會影響運行，如果善用的話會使程式碼更容易閱讀。

var a = 2
var b = a
  .toString()
console.log(typeof b)
 
var a = 1
,b = 2 // b 同样会被 var 声明

如果遇到需要加入分號的情況，除了可以在語句的末尾加入分號外，也可以把分號加在「不會自動加入分號」的最前方，例如() 本身不會自動加入分號，在有這種需求時可以將; 加到前面（ESLint Standard JS 規範就用這個方法避免錯誤）。

// 运行错误
(function() { })()
(function() { })()
 
// 正确
;(function() { })()
;(function() { })()

總結

有的人認為不加分號可以讓程式碼看起來更乾淨和精簡，而且在大部分情況下並不會出現錯誤，所以很多人在敲代碼時不會加分號。

不過我更傾向於更嚴格的規範，也許是因為我是從後端轉到前端的，習慣了。至於到底怎麼選，只要搞清楚運行上的限制，不管哪種風格都是挺不錯的，只要你喜歡就好。

以上是介紹 JavaScript 程式碼加上不加分號有什麼差別的詳細內容。更多資訊請關注PHP中文網其他相關文章！