JavaScript 表達式完全解析：新手必懂的基礎概念

更新日期： 2025 年 3 月 29 日

在學習 JavaScript 程式語言的過程中，我們會常常聽到「表達式（Expression）」這個詞。

你可能會寫出一些代碼，但不一定知道自己寫的是「表達式」還是「語句（Statement）」。

這在日常開發中其實很重要，因為理解這些基本概念可以幫助你更流暢地閱讀與撰寫程式，也對學習進階主題（如箭頭函式、三元運算子、立即函式等）有很大幫助。

這篇文章將一步一步帶你認識什麼是 JavaScript 的「表達式」，搭配範例解說，讓你不再困惑！

什麼是 JavaScript 表達式（Expression）？

表達式的定義

在 JavaScript 中，「表達式」是一段可以被求值（evaluate）並回傳一個值的程式碼。

簡單來說，只要這段程式碼會產生一個值，就是表達式。

📌 例如：

2 + 3        // 表達式，結果是 5
"Hello"      // 表達式，結果是 "Hello"
true && false // 表達式，結果是 false

所有表達式都會「有值」

這是表達式最重要的特徵。就算值是 undefined 或 null，它仍然是一個「值」。

let a = 10;     // "10" 是表達式
let b = a + 5;  // "a + 5" 是表達式，結果為 15

常見的 JavaScript 表達式類型

在 JavaScript 中，表達式的種類非常多，從最簡單的數字、字串，到複雜的運算、函式呼叫都可以是表達式。

以下我們依照「由淺入深」的順序，一一介紹幾種最常見的表達式類型，幫助你建立完整的概念。

常值表達式（Literal Expressions）

「常值」是程式中直接寫出來的資料，像是數字、字串、布林值、null 等等。

100
"JavaScript"
true
null

這些都是常值表達式，因為它們本身就是值。你只要輸入這段程式碼，它就會立刻被求值，並回傳那個值。

📌 舉例：

console.log(100);         // 輸出 100
console.log("JavaScript"); // 輸出 JavaScript

這些值不需要透過運算或函式呼叫，是 JavaScript 原始支援的基本類型，最簡單的表達式就是從這些常值開始。

賦值表達式（Assignment Expression）

在 JavaScript 中，賦值運算符（例如 =）本身是一個表達式，因為它會將右邊的值賦給左邊的變數，並且回傳該值。

📌 例如：

x = 5

這裡 x = 5 是一個「賦值表達式」，它的結果是 5，你可以把它當成一個有值的表達式來使用。

let y = (x = 5); // 表達式 `(x = 5)` 被包在括號中
console.log(y);  // 輸出 5

👆 在這段程式中：

• (x = 5) 是一個表達式，會被求值並回傳 5
• let y = (...) 是一個語句，裡面使用了賦值表達式

🛑 小心不要把「宣告」和「賦值表達式」搞混！

有些初學者會以為 let x = 10; 這整行是表達式，但其實這是語句，不是表達式。

let x = 10;   // 這是「變數宣告語句」，不是表達式

雖然裡面有個 = 10 的部分，這的確是「賦值表達式」，但整體來說，let x = 10; 是語句，不能直接被用在只接受「表達式」的地方

（像是三元運算子、箭頭函式的省略寫法、JSX 中的花括號等）。

📌 對比看看：

// ❌ 錯誤用法，會報錯
const result = let x = 10;

// ✅ 正確寫法
let x;
const result = (x = 10); // 這裡是賦值表達式，回傳值是 10

✅ 小總結

運算表達式（Arithmetic Expressions）

運算表達式會使用數學運算符（+, -, *, /, % 等）來對數值進行運算，並回傳計算後的結果。

3 * 4       // 回傳 12
10 - 2      // 回傳 8
5 + 7 * 2   // 回傳 19（運算順序注意！）

這些表達式可以單獨存在、也可以被包進更大的表達式中：

let result = (3 + 5) * 2;  // 表達式的結果為 16

📌 重點：這類表達式的運算順序會依照「運算子優先順序（operator precedence）」來執行，可以使用括號來強制順序。

比較表達式（Comparison Expressions）

比較表達式會比較兩個值的大小、相等與否，回傳的結果是布林值（true 或 false）。

5 > 3      // true
2 == "2"   // true（寬鬆相等）
2 === "2"  // false（嚴格相等，型別不同）

這類表達式經常出現在條件判斷中，例如：

if (score >= 60) {
  console.log("及格");
}

這裡的 score >= 60 就是比較表達式，它會被求值為 true 或 false，用來決定 if 條件是否成立。

邏輯表達式（Logical Expressions）

邏輯表達式是用來處理布林邏輯的表達式，常見的邏輯運算符包括：

• &&（AND）：兩邊都為 true 時，結果才是 true
• ||（OR）：只要任一邊為 true，結果就是 true
• !（NOT）：反轉布林值

true && false   // false
false || true   // true
!true           // false

這類表達式不僅可以處理布林值，還能處理其他類型的值（根據 JavaScript 的「真值」機制），例如：

console.log(0 || "default");   // "default"
console.log("user" && "admin"); // "admin"

📌 這類表達式常被用在「條件預設值」、「簡化 if 判斷」等技巧中。

函式調用表達式（Function Call Expressions）

只要你呼叫一個函式，不論這個函式有沒有回傳值，它就是一個「函式調用表達式」。

Math.max(1, 2, 3)  // 回傳 3
alert("Hi!")       // 回傳 undefined（但仍是表達式）

📌 無論函式的內容是什麼，只要它是「被呼叫」，那麼整段 函式名稱(...) 就是一個表達式，因為它會被求值並回傳結果。

函式表達式也可以嵌套使用：

let maxValue = Math.max(5, Math.min(10, 20));
// 先算 Math.min(10, 20) → 回傳 10，再執行 Math.max(5, 10) → 回傳 10

語句（Statement）vs 表達式（Expression）：完全解析

語句的定義

在 JavaScript 中，語句（Statement）是一段完整的「操作指令」，代表你要電腦做某件事。

語句本身通常不會回傳值，它更像是程式的流程控制單位，例如定義變數、執行條件判斷、建立迴圈、函式定義等等。

📌 常見語句的範例：

let a = 3;       // 變數宣告語句（包含了表達式 x = 3）
if (a > 2) {     // if 條件語句（內含比較表達式 a > 2）
  console.log(a) // 函式呼叫語句
}

你可以這樣理解：

• 表達式產生值
• 語句執行動作

有些語句裡面包含表達式作為一部分，但整體來說仍是語句。

表達式與語句的差別在哪裡？

最主要的差別是：

✅ 如何快速區分？

一個簡單的測試方式：把它包進 console.log()，看看能不能印出值。

console.log(2 + 3);     // ✅ 表達式，會印出 5
console.log("hello");   // ✅ 表達式，會印出 hello
console.log(let x = 5); // ❌ 語句，語法錯誤，不能這樣用

只有「表達式」可以被求值並當作一個值來使用；「語句」只能單獨存在，不能當作值放進其他地方。

表達式語句（Expression Statement）：語句中的表達式

這是最容易混淆的地方 —— JavaScript 中有許多語句，其實本質上是表達式，只是加上分號構成語句，我們稱它們為 表達式語句（Expression Statement）。

📌 例如：

x = 10;      // 賦值表達式 + 分號 → 表達式語句
"Hello";     // 字串常值表達式 + 分號 → 表達式語句
3 + 5;       // 運算表達式 + 分號 → 表達式語句

這些語句的主體是表達式，它們在執行時會被求值，但因為加上了分號、成為一行完整的語句，可以獨立執行。

你可以理解為：

✨ 表達式 ➕ 分號 ➡️ 就是語句！

不能成為表達式語句的語句

但並不是所有語句都能變成表達式語句。有些語法是只能作為語句使用，不能嵌入其他地方的，例如：

if (true) { console.log("yes"); }  // ✅ 合法語句
const result = if (true) { ... };  // ❌ 語法錯誤：if 不是表達式

這就是為什麼在 JavaScript 中你不能把 if 或 for 當成「值」來使用的原因。

統整：哪些是語句？哪些是表達式？

為什麼理解「表達式」很重要？

到目前為止，我們已經學會了什麼是表達式、語句，還有它們的差異。你可能會想：「這些概念很抽象，我真的需要搞懂這些嗎？」

答案是：絕對需要！

因為在 JavaScript 的實務開發中，有很多地方「只能」寫表達式、不能寫語句。

如果你不懂這個規則，就很容易遇到語法錯誤，甚至不知道錯在哪裡。

以下我們介紹三個最常見的應用場景，讓你明白為什麼表達式如此關鍵。

箭頭函式的簡潔寫法只能用表達式

JavaScript 的箭頭函式（Arrow Function）有兩種語法形式：

✅ 簡寫語法（只接受表達式）：

const add = (a, b) => a + b;

這行等同於：

const add = (a, b) => {
  return a + b;
}

為什麼簡寫能這麼短？因為 a + b 是一個表達式，它會產生值，JavaScript 可以自動幫你加上 return 回傳值。

❌ 語句不能用在簡寫裡：

const doSomething = () => if (true) { console.log("Hi") }; // ❌ 會報錯

這段會出現語法錯誤，因為 if (...) { ... } 是語句，不能放在箭頭函式的簡寫形式中。只有表達式能這樣使用！

✅ 正確寫法（語句要用大括號）：

const doSomething = () => {
  if (true) {
    console.log("Hi");
  }
}

📌 重點：箭頭函式的簡寫形式（沒有 {}）只能寫「一個表達式」當作函式內容，不能寫語句！

三元運算子（條件運算子）只能使用表達式

JavaScript 的三元運算子（條件 ? 成立時 : 否則）是一種表達式語法，只能搭配其他表達式來使用。

let result = isSunny ? "Go out" : "Stay in";

這邊：

• isSunny 是條件判斷（表達式）
• "Go out" 是條件為 true 時的結果（表達式）
• "Stay in" 是條件為 false 時的結果（表達式）

三個部分都必須是表達式！

❌ 錯誤示範：不能寫語句

let result = isSunny ? alert("Go out") : if (true) { console.log("Nope") };
// ❌ 語法錯誤：三元運算子的分支不能是語句

✅ 正確使用：

isSunny ? alert("Go out") : alert("Stay in");

📌 三元運算子只適合處理簡單條件，所有分支都必須是表達式，不能是語句（如 if）。

React JSX 中只能寫表達式，不能寫語句

在使用 React 開發時，JSX 語法是我們最常操作的模板語言。

而在 JSX 中，大括號 {} 只能用來嵌入「JavaScript 表達式」。

✅ 正確寫法：

<div>{isLoggedIn ? "Welcome!" : "Please log in"}</div>

這裡使用了三元運算子，整個 { ... } 中的內容是一個「表達式」，符合語法要求。

❌ 錯誤寫法：不能寫語句

<div>
  {if (isLoggedIn) { return "Welcome!" }}  // ❌ 語法錯誤
</div>

這段會直接報錯，因為 if 是語句，不能放在 {} 中。JSX 只接受能被求值的東西，也就是——表達式！

解法：提前把結果存進變數，或改用三元運算子

let text = isLoggedIn ? "Welcome!" : "Please log in";

<div>{text}</div>

📌 React JSX 中的 {} 就像 console.log(...) 一樣，只能放表達式，不能放語句！

小練習：你能分辨這是表達式還是語句嗎？

試著思考以下每一行是「表達式」還是「語句」：

3 + 4
let x = 5
"hello"
if (x > 0) {}
console.log("Hi")
x = 10

答案：

• 3 + 4 👉 表達式
• let x = 5 👉 語句（但 x = 5 是表達式）
• "hello" 👉 表達式
• if (x > 0) {} 👉 語句
• console.log("Hi") 👉 語句（由函式呼叫表達式構成）
• x = 10 👉 表達式（若加上分號就是表達式語句）

結語

理解 JavaScript 中的「表達式」是邁向中階開發者的重要一步。

雖然它看起來只是一些語法細節，但實際上關係到你能不能正確寫出簡潔、符合語法規則的程式。

當你進一步學習函式、條件邏輯、React、Node.js 等等，都會頻繁遇到表達式的應用。

希望這篇文章能幫助你打下穩固的基礎，未來寫程式就像呼吸一樣自然！💪