JavaScript 語法

JavaScript 是一門程式語言,程式基本上就是編寫一連串的指令 (instructions),告訴瀏覽器要做什麼事情。

我們將 JavaScript 程式指令,稱作語句 (statement),一個程式會由許多語句組成,而瀏覽器會由上至下、由左到右依序執行這些語句。

語句定義了 JavaScript 中的主要語法,語句通常使用一或多個關鍵字來描述你想做的事情。語句可以很簡單,例如執行一個函數 (function);也可以比較複雜,例如一個邏輯判斷區塊 (if else)。

分號 ;

JavaScript 的每一個語句以分號 ; 來做結束。

JavaScript 的結尾分號 ; 是可以省略的 (optional),但為了讓程式碼更清楚也避免拿掉後可能讓程式碼解析錯誤,一般最好還是習慣加上分號。

變數 (Variable)

變數的用途是用來儲存和讀取資料:

  • 你可以用 letconst 關鍵字來宣告一個變數(傳統用法是 var
  • = 等號來設定一個值 (value) 給變數

例如,我們宣告一個變數 x,並將 x 的值設為 100:

let x;
x = 100;

你也可以在宣告變數的同時指定值:

const x = 100;

運算子 (Operator)

JavaScript 有許多不同類型的運算子,來讓你可以做不同的操作。

像是指定運算子 (assignment operator) = 等號,用來指定一個值給變數:

let x = 100;

或像是算術運算子 (arithmetic operator) + - * /,用來對數值做操作:

let x = 100 + 20;
let y = x + 50;

上面的 x 變數值將會是 120,而 y 變數的值則是 170。

註解 (Comment)

註解顧名思義,是寫給開發人員自己看的註釋,註解語法是告訴瀏覽器忽略和不要執行這段語句。

JavaScript 的註解有分單行註解 (雙斜線 //) 和多行註解 (/* 用 "/*" 和 "*/" 符號,被包住在中間的所有字都是註解 */)。

// 這是單行註解

/*
這是...
多
行
註解
*/

空白 (whitespace)

空白 (space), tab 或換行符號 (newline characters) 在 JavaScript 都稱為空白 (whitespace),JavaScript 程式碼在解析時,會忽略所有的空白,所以你可以自由利用空白字元來編排你的程式碼讓它更好讀。

const x = ['stringggggggggg1', 'stringggggggggg2', 'stringggggggggg3'];

// 這個寫法,和上面的意思是一模一樣的
const x = ['stringggggggggg1', 'stringggggggggg2', 'stringggggggggg3'];

有區分大小寫 (case sensitive)

不像 HTML,JavaScript 語句是有區分大小寫的,無論是對於變數、函式或物物件名稱,如 alert() 寫成 Alert() 或是寫成 ALERT() 都會產生錯誤。

數值分隔符號 (Numeric Separators)

當我們在處理很大的數字時(例如一百萬),一長串的零往往很難一眼看清楚。現代 JavaScript 支援使用底線 _ 作為數值分隔符號,來增加程式碼的可讀性,瀏覽器在執行時會自動忽略這些底線。

例如:

// 傳統寫法,很難數有幾個零
const budget = 100000000;

// 使用分隔符號,一眼就能看出是一億
const easyToReadBudget = 100_000_000;

// 也可用於小數點或十六進位
const fee = 0.000_001;
const color = 0xff_aa_00;