了解語法和代碼結構

這篇文章最初是為 DigitalOcean 寫的。

簡介

在學習口語寫作之前，你必須先學習語法規則。以下是您可能會在英語中找到的一些規則示例：

• 句子以大寫字母開頭
• 句子以句號結尾
• 新段落縮進
• 口語對話放在雙引號內。

同樣，所有編程語言都必須遵守特定規則才能發揮作用。這組確定編程語言正確結構的規則稱為語法 .許多編程語言主要由相似的概念組成，但語法有所不同。

在本教程中，我們將介紹 JavaScript 語法和代碼結構的許多規則和約定。

功能性和可讀性

在開始使用 JavaScript 時，功能性和可讀性是關注語法的兩個重要原因。

JavaScript 功能有一些語法規則是強制性的。如果不遵守，控制台會報錯，腳本會停止執行。

考慮“Hello, World!”中的語法錯誤。程序：

// Example of a broken JavaScript program
console.log("Hello, World!"

此代碼示例缺少右括號，而不是打印預期的“Hello，World！”到控制台會出現如下錯誤：

Uncaught SyntaxError: missing ) after argument list

丟失的) 必須在腳本繼續運行之前添加。這是一個 JavaScript 語法錯誤如何破壞腳本的示例，因為必須遵循正確的語法才能運行代碼。

JavaScript 語法和格式的某些方面基於不同的思想流派。也就是說，有一些風格規則或選擇不是強制性的，並且在代碼運行時不會導致錯誤。然而，有許多常見的約定是明智的，因為項目和代碼庫之間的開發人員會更熟悉這種風格。遵守通用約定可以提高可讀性。

考慮以下三個變量賦值示例。

const greeting = 'Hello' // no whitespace between variable & string
const greeting = 'Hello' // excessive whitespace after assignment
const greeting = 'Hello' // single whitespace between variable & string

儘管上面所有三個示例在輸出中的功能完全相同，但 greeting = "Hello" 的第三個選項 是迄今為止最常用、最易讀的代碼編寫方式，尤其是在大型程序的上下文中考慮它時。

保持整個編碼項目的風格一致很重要。從一個組織到另一個組織，您會遇到不同的準則要遵循，因此您還必須靈活。

我們將在下面介紹一些代碼示例，以便您熟悉 JavaScript 代碼的語法和結構，如有疑問，請參閱本文。

空白

JavaScript 中的空白由空格、製表符和換行符組成（按 ENTER 鍵盤上）。如前所述，JavaScript 會忽略字符串之外的過多空格以及運算符和其他符號之間的空格。這意味著以下三個變量賦值示例將具有完全相同的計算輸出：

const userLocation = 'New York City, ' + 'NY'
const userLocation = 'New York City, ' + 'NY'
const userLocation = 'New York City, ' + 'NY'

userLocation 無論腳本中寫的是哪種樣式，都將代表“紐約市，紐約”，無論空格是用製表符還是空格寫的，都不會對 JavaScript 產生影響。

能夠遵循最常見的空白約定的一個好的經驗法則是遵循您在數學和語言語法中習慣的相同規則。

例如，let x = 5 * y 比 let x=5*y 更易讀 .

您可能會看到這種風格的一個顯著例外是在分配多個變量期間。注意=的位置 在下面的例子中：

const companyName = 'DigitalOcean'
const companyHeadquarters = 'New York City'
const companyHandle = 'digitalocean'

所有賦值運算符（= ) 排成一行，變量後面有空格。這種類型的組織結構並不是每個代碼庫都使用，但可以用來提高可讀性。

JavaScript 也會忽略多餘的換行符。一般會在註釋上方和代碼塊之後插入一個額外的換行符。

括號

對於 if 等關鍵字 , switch , 和 for , 括號前後通常添加空格。請注意以下比較和循環的示例。

// An example of if statement syntax
if () { }

// Check math equation and print a string to the console
if (4 < 5) {
	console.log("4 is less than 5.");
}

// An example of for loop syntax
for () { }

// Iterate 10 times, printing out each iteration number to the console
for (let i = 0; i <= 10; i++) {
	console.log(i);
}

如圖所示，if 語句和 for 循環在括號的每一邊都有空格（但不在括號內）。

當代碼與函數、方法或類相關時，括號將觸及各自的名稱。

// An example function
function functionName() {}

// Initialize a function to calculate the volume of a cube
function cube(number) {
  return Math.pow(number, 3)
}

// Invoke the function
cube(5)

在上面的例子中，cube() 是一個函數，一對括號() 將包含參數或參數。在這種情況下，參數是 number 或 5 ， 分別。雖然 cube () 有一個額外的空間是有效的，因為代碼將按預期執行，它幾乎從未見過。將它們放在一起有助於輕鬆地將函數名稱與括號對和任何關聯的傳遞參數相關聯。

分號

JavaScript 程序由一系列稱為語句的指令組成，就像書面段落由一系列句子組成一樣。雖然句子以句點結尾，但 JavaScript 語句通常以分號結尾 (; )。

// A single JavaScript statement
const now = new Date()

如果兩個或多個語句彼此相鄰，則必須用分號分隔它們。

// Get the current timestamp and print it to the console
const now = new Date()
console.log(now)

如果語句用換行符分隔，分號是可選的。

// Two statements separated by newlines
const now = new Date()
console.log(now)

一個安全且通用的約定是用分號分隔語句，而不考慮換行符。

// Two statements separated by newlines and semicolons
const now = new Date()
console.log(now)

for 的初始化、條件和遞增或遞減之間也需要分號 循環。

for (initialization; condition; increment) {
  // run the loop
}

分號不是 包含在任何類型的塊語句之後，例如 if , for , do , while , class , switch , 和 function .這些塊語句包含在大括號 {} 中 .請注意以下示例。

// Initialize a function to calculate the area of a square
function square(number) {
  return Math.pow(number, 2)
}

// Calculate the area of a number greater than 0
if (number > 0) {
  square(number)
}

小心，因為不是所有用大括號括起來的代碼都沒有分號結束。對像用大括號括起來，如果使用分號，則應以分號結尾。

// An example object
const objectName = {}

// Initialize triangle object
const triangle = {
  type: 'right',
  angle: 90,
  sides: 3,
}

廣泛接受的做法是在每個 JavaScript 語句之後包含分號，除了以大括號結尾的塊語句。

縮進

一個完整的 JavaScript 程序在技術上可以寫在一行上。但是，這很快就會變得非常難以閱讀和維護。相反，我們使用換行符和縮進

這是條件 if 的示例 /else 語句，寫在一行上或帶有換行符和縮進。

// Conditional statement written on one line
if (x === 1) {
  /* execute code if true */
} else {
  /* execute code if false */
}

// Conditional statement with indentation
if (x === 1) {
  // execute code if true
} else {
  // execute code if false
}

請注意，塊中包含的任何代碼都是縮進的。縮進可以用兩個空格、四個空格或按製表符來完成。是否使用製表符或空格取決於您的個人偏好（對於獨立項目）或您組織的指導方針（對於協作項目）。

如上例所示，在第一行末尾包含左大括號是構造 JavaScript 塊語句和對象的常規方式。您可能會看到編寫塊語句的另一種方式是將大括號放在自己的行中。

// Conditional statement with braces on newlines
if (x === 1) {
  // execute code if true
} else {
  // execute code if false
}

這種風格在 JavaScript 中不像在其他語言中那樣常見，但並非聞所未聞。

任何嵌套的塊語句都會進一步縮進。

// Initialize a function
function isEqualToOne(x) {
  // Check if x is equal to one
  if (x === 1) {
    // on success, return true
    return true
  } else {
    return false
  }
}

代碼的正確縮進對於保持可讀性和減少混淆是必不可少的。此規則的一個例外是要記住的壓縮庫將刪除不必要的字符，因此會縮小文件大小以加快頁面加載時間（如 [jquery.min.js](https://jquery.com/download/) 和 [d3.min.js](https://d3js.org/) )。

標識符

變量、函數或屬性的名稱稱為標識符 在 JavaScript 中。標識符由字母和數字組成，但不能包含 $ 之外的任何符號 和 _ , 不能以數字開頭。

區分大小寫

這些名稱區分大小寫。下面兩個例子，myVariable 和 myvariable 將引用兩個不同的變量。

var myVariable = 1
var myvariable = 2

JavaScript 名稱的約定是它們以駝峰形式書寫，這意味著第一個單詞是小寫的，但後面的每個單詞都以大寫字母開頭。您可能還會看到全部大寫的全局變量或常量，用下劃線分隔。

const INSURANCE_RATE = 0.4

這個規則的例外是類名，通常每個單詞都以大寫字母開頭（PascalCase）。

// Initialize a class
class ExampleClass {
  constructor() {}
}

為了確保代碼可讀，最好在整個程序文件中使用明顯不同的標識符。

保留關鍵字

標識符也不得包含任何保留關鍵字。關鍵字是 JavaScript 語言中具有內置功能的詞，例如 var , if , for , 和 this .

例如，您不能為名為 var 的變量賦值 .

var var = 'Some value'

由於 JavaScript 理解 var 作為關鍵字，這將導致語法錯誤：

SyntaxError: Unexpected token (1:4)

如需完整參考，請查看此保留關鍵字列表 (MDN)

結論

本文概述了 JavaScript 的基本語法和代碼結構。語法對於程序的正確執行以及代碼的可讀性和可維護性都很重要。

我們在本文中回顧了 JavaScript 語法和样式的許多常見約定，但歸根結底，最重要的是要記住要靈活並與您的團隊或組織保持一致。