陳述式 (Statement) 和運算式 (Expression)

JavaScript 中的語法主要可以分為兩大類，陳述式 (Statement) 和表達式 (Expression)，兩者的差別在於陳述式主要用來執行某個動作，例如宣告變數、邏輯判斷等。而運算式也被稱為表達式，顧名思義會產生一個運算後的「值」，而這個值通常會需要用某個變數去存放，例如 a = 2 + 1 中等號右側的程式就是表達式。

• 陳述式
  • 是一個敘述句，用來執行某個動作
  • 不會有回傳值
  • 宣告變數、if-else 判斷、迴圈等都是陳述式的一種
  • 範例

  // 宣告變數
  let a;
  
  // if-else 判斷
  if (a !=0 ) {
  }
  

• 運算式
  • 進行值的運算
  • 會回傳值
  • 通常會透過符號來表示運算的邏輯，這些符號又被稱為運算子
  • 範例

  100 + 100; // 無執行意義，需要用變數來存放運算結果
  let a = 100 + 100; // 將回傳的值放到變數中
  

運算子

運算子 (Operator) 是指在運算式中用來進行表達或定義運算規則的符號，讓我們達到數學運算、比較、賦值等目的，例如在運算式 1 + 2 中，符號 + 就是一個運算子。在 JavaScript 中運算子有很多種，我們今天主要介紹以下幾種：

• 算術運算子 (Arithmetic Operator)
• 指定運算子 (Assignment Operator)
• 比較運算子 (Comparison Operator)
• 邏輯運算子 (Logical Operator)
• 三元運算子 (Ternary Operator)

算數運算子 Arithmetic Operator

簡而言之，就是能夠使前後兩數進行運算的符號，例如常見的加減乘除等。

範例

let a = 5;
let b = 3;
let c = 6;
console.log(a + b); // 答案為 8
console.log(a - b); // 答案為 2
console.log(a * b); // 答案為 15
console.log(c / b); // 答案為 2
console.log(a % b); // 答案為 2

算數運算子的特殊情況 - + ( 加號 )

• 當兩數字型態的變數以 + 符號連接時，會正常進行數學的加法運算

  let a = 1 + 1; // 2
  

• 當字串 + 字串時，會產生拼接的效果，例如 "12" + "abc" 回傳值為 "12abc"

  let a = "abc" + "def"; // "abcdef"
  let b  = "哈囉，" + "你好嗎？"; // "哈囉，你好嗎？"
  

• 字串與任何型態的變數 (包括數字型態) 相加時，變數會先轉為字串再進行拼接，例如 123 + "23" 回傳值為 "12323"

  let a = 1 + "34"; // "134"
  

• 非字串型態的變數相加時會先轉為 Number 類型後再進行數學運算

  let a = true + 1; // 2 (true + 1 = 1 + 1)
  let b = 1 + null; // 1 (1 + null = 1 + 0)
  let c = 2 + NaN; // NaN (任何數與 NaN 運算後都是 NaN)
  

• 在多個值、不同型態的連續運算中，順序會影響到最終的結果，如下範例：

  // 範例一
  let a = 1 + 2 + "3"; // "33"
  // 從頭開始計算，首先計算 1 + 2，兩者皆為 Number 所以直接相加
  // 得到答案 3，繼續往後計算 3 + "3"
  // 任意型態遇到字串時皆會轉為字串進行拼接，得到最終答案 "33"
  
  // 範例二
  let b = "1" + 2 + 3; // "123"
  // 計算 "1" + 2，得到答案 "12"
  // 繼續計算 "12" + 3，得到最終答案 "123"
  

延伸重點

• 字串與任何型態的變數 (包括數字型態) 相加時，變數會先轉為字串再進行拼接，利用這個特點可以用變數 + 空字串達到將變數轉為字串型態的方法

  let a = 123;
  let b = a + ""; // "123" (變為字串型態)
  

• 除了符號 + 加法有較多特殊情況外，其他算數運算子在遇到非 Number 型態的變數時都會先將其轉為數字再進行運算

  let a = 100 - true; // = 100 - 1 = 99
  let b = 100 - "1"; // = 100 - 1 = 99
  let c = 2 * "8"; // = 2 * 8 = 16
  let d = 3 / undefined; // = 3 / NaN = NaN ( 任何數與 NaN 運算都會是NaN )
  let e = 2 * null; // = 2 * 0 = 0
  

• 基於上述特點，可以利用 變數 - 0、變數 * 1、變數 / 1 等方式來將值的型態轉為 Number

  let a = "33" - 0; // 33 (達到轉換型態，值不變的效果)
  

• 當我們需要利用 console.log 輸出變數或值時，可以以符號 + 拼接字串和值，以清楚辨識

  let number = 222;
  console.log("number 值為：" + number); // output 為："number 值為：222"
  

一元運算子

算數運算子中的符號 + 和 - 在數學上還有另一個意義，就是正和負，在 JavaScript 中也是同理，正號不會對數字值產生影響，負號會將正數變為負數，負數變為正數。而對於非 number 的值，JavaScript 會先將值轉為 Number 再進行運算，所以我們同樣可以透過在變數或值前面加入正號達到轉為 Number 的目的。

• 在變數前面加負號會對值產生影響

  let a = -2; // 值為 -2
  console.log(-a); // 值為 2 (-2的負數為正 2)
  

• 利用正號將變數改為 Number 型態，以順利進行數學加減運算

  // 範例一
  let a = +"3"; // "3" 原本是 string，透過在前面加正號將值轉為 Number 型態
  
  // 範例二
  let b = 1 + "2" + 4; // "124" (2 為字串，所以為 = "12" + 4 = "124")
  let c = 1 + +"2" + 4; // 7 (2前面加正號，已改為數字型態，所以為 = 1 + 2 + 4 = 7) 
  

遞增和遞減

運算符 ++ (遞增) 和 -- (遞減) 是少數幾個會影響到變數本身的值的運算子。當變數與遞增符號連接時，例如 1++ 會將變數 +1，它不會回傳運算後的值，所以不需要另外賦值到新的變數中。

範例：

let a = 2;
a++; // a 本身 + 1
console.log(a); // 3 (a + 1 後變為 3)

let b = 5;
b--; // b 本身 - 1
console.log(b); // 4 (b - 1 後變為 4)

遞增遞減的先後順序

上面範例是最常見的遞增(減)情境，不過在某些情況中我們會將 ++ 運算符寫在變數之前，例如 ++a，遞增運算符寫在前後的差別是在同一行程式中，先 ++ 會先讓變數 + 1 再做其他運算，而後 ++ 則相反，我們可以從以下幾個範例來了解：

// 範例一
let a = 1;
// 在 console 中放數 a++，會在同一行執行 a++ 且印出 a
console.log(a++); // ++ 在變數之後，所以會此時 a 還是 1
console.log(a); // a++ 執行完畢後 a = 2

// 範例二
let b = 1;
console.log(++b); // 2
console.log(b); // 2

// 範例三
let c = 5;
c++; // 此時 c = 6
console.log(c++); // 6 
console.log(c); // 7

// 範例四
let d = 6;
console.log(++d); // 7
console.log(++d); // 8

而在連續的加減中也一樣需要注意 ++ 或 -- 在變數前或後：

let a = 20;
let b = a++ + ++a + a; 
// = 20 (a++在後，所以此時 a 為 20) + ++a + a
// 此時 a 為 21 (已經經過第一個 a++)
// = 20 + 22 (a 經過前面 ++ 後為 21，再 ++a 為 22) + a
// 此時 a 為 22
// = 20 + 22 + 22 = 64
console.log(b); // 64

上一篇：[快速入門前端 39] JavaScript：資料型態 (2) 強制轉換資料型態
javascript
下一篇：[快速入門前端 41] JavaScript：運算式和運算子 (2) 指定運算子、比較運算子、邏輯運算子
系列文章列表：[快速入門前端] 系列文章索引列表