JavaScript 運算子全解：一元、二元、三元運算子一次搞懂！

在 JavaScript 中，「運算子（Operator）」是用來處理資料、變數、值的符號。

你可以把它們想像成程式碼中的「動作執行者」，負責做加法、比較、邏輯運算、條件判斷……等工作。

JavaScript 的運算子可依操作的運算元（operand）數量分成三大類：

• 🧍‍♂️ 一元運算子（Unary Operator） 👉 只需要一個運算元
• 🧍‍♂️🧍‍♀️ 二元運算子（Binary Operator）👉 需要兩個運算元
• 🎭 三元運算子（Ternary Operator）👉 特別的條件判斷用法

這篇文章將帶你完整了解這三類運算子的差別、用途與常見語法範例！

一元運算子（Unary Operators）

📌 定義：一個就夠，動作照做

在 JavaScript 中，「一元運算子」是指只需要一個操作對象（operand）就能執行的運算符號。

你可以把它想像成：「只要你給我一個值，我就可以馬上做事」，不像二元或三元運算子需要更多參與者。

常見一元運算子整理

重點解釋與實務範例

+：字串轉數字的快速技巧

let x = "42";
console.log(+x); // 42

這是一個超實用的小技巧，在表單輸入（通常是字串）轉數字時常用。

例如：

let price = document.getElementById("price").value;
let total = +price * 3; // 將字串轉成數字再運算

++ 與 --：前置 vs 後置

let a = 5;
console.log(++a); // 6（先加再印出）
console.log(a--); // 6（先印再減）
console.log(a);   // 5（上一行已減 1）

這在 for 迴圈中非常常見：

for (let i = 0; i < 5; i++) {
  console.log(i);
}

• 延伸閱讀：初學者指南：JavaScript 中的a++ 和++a 有什麼不同？

!：真假反轉的好幫手

console.log(!true);   // false
console.log(!0);      // true
console.log(!"hello"); // false（非空字串為真）

更常見的做法是連用兩次 !!，將任意值「強制轉成布林值」：

const input = "123";
console.log(!!input); // true（因為不是空值）

typeof：快速看資料型別

console.log(typeof 123);        // "number"
console.log(typeof "hello");    // "string"
console.log(typeof true);       // "boolean"
console.log(typeof undefined);  // "undefined"
console.log(typeof null);       // "object"（這是歷史遺留問題）
console.log(typeof {});         // "object"
console.log(typeof []);         // "object"
console.log(typeof (() => {})); // "function"

• 延伸閱讀：初學者指南：JavaScript 中的typeof

delete：從物件中移除屬性

const person = { name: "Amy", age: 25 };
delete person.age;
console.log(person); // { name: "Amy" }

注意：delete 不能刪變數，也不會移除陣列中的元素，只會變成 empty slot。

void：忽略回傳值的特殊用法

console.log(void 0); // undefined

用在不想要函式有回傳值的地方，例如：

<a href="javascript:void(0)">不跳轉的連結</a>

也會在一些立即執行函式中看到：

void function () {
  console.log("這是 IIFE");
}();

小提醒：你可能會混淆的幾件事

二元運算子（Binary Operators）

📌 定義：兩個值之間的橋樑

二元運算子是 JavaScript 中最常見的運算子形式，它需要兩個操作對象（operand），一前一後，來完成一個運算或比較的動作。

👉 你可以這樣理解它：

左邊的值 <運算子> 右邊的值

常見分類與詳細解說

📏 1️⃣ 算術運算子（Arithmetic Operators）

用於進行數值的加減乘除等數學運算。

📌 小提醒：

• 除法 / 的結果會是浮點數（即使能整除）。
• % 常用於判斷偶數、奇數（x % 2 === 0 ➜ 偶數）。
• ** 是 ES2016（ES7）才加入的新語法，舊版瀏覽器可能不支援。

• 延伸閱讀：初學者指南：為什麼在JavaScript 中先乘除後加減？

🧮 2️⃣ 指派運算子（Assignment Operators）

將某個值「指定（assign）」給變數，並支援進一步做運算再指定。

📌 應用技巧：

let total = 100;
total += 50; // total 現在是 150
total *= 2;  // total 現在是 300

這類語法常用於統計、加總、計數等需求中。

🔍 3️⃣ 比較運算子（Comparison Operators）

用來判斷兩個值之間的大小、相等與否，結果會回傳布林值（true 或 false）。

📌 推薦做法： 永遠使用 === 和 !==，避免型別自動轉換造成的誤判。

延伸閱讀：初學者指南：深入了解JavaScript 中的== 與=== 比較運算符

🔗 4️⃣ 邏輯運算子（Logical Operators）

用於組合多個條件，在 if 判斷或三元運算子中非常常見。

📌 範例與解說：

const name = "Alex";
console.log(name && "Hello"); // "Hello"（因為 name 為真）

const input = "";
const fallback = input || "Default";
console.log(fallback); // "Default"（空字串為 falsy）

const value = null;
console.log(value ?? "Not Found"); // "Not Found"

• 延伸閱讀：JavaScript 簡易指南：掌握|| 和&& 運算子的妙用

🔤 5️⃣ 字串連接運算子

除了數值，+ 也能用來合併兩個字串。

let first = "Hello";
let last = "World";
console.log(first + " " + last); // Hello World

📌 注意： 如果任一操作數是字串，JavaScript 就會將另外一個也轉成字串：

console.log(100 + "元"); // "100元"
console.log("數量：" + 5); // "數量：5"

這是初學者常見的錯誤來源，特別是在計算時意外拼接了字串。

二元運算子全覽

✨ 延伸提醒：運算的型別轉換

在進行二元運算時，JavaScript 常會「偷偷」做型別轉換，這是造成 bug 的元兇之一！

console.log("5" + 1); // "51"（加號觸發字串拼接）
console.log("5" - 1); // 4（減法會自動轉數字）

💡 建議：養成明確轉型的習慣，使用 Number()、String() 等函式更安全。

• 延伸閱讀：初學者指南：深入了解JavaScript 的類型強制轉換（Coercion）

三元運算子（Ternary Operator）

📌 定義：用一句話完成條件判斷

三元運算子是 JavaScript 中唯一一種需要三個運算元（operands）的運算子，語法簡潔，專門用來進行「條件判斷與選擇結果」。

📗 語法格式如下：

條件 ? 成立時執行的結果 : 不成立時執行的結果

可以讀成：「如果條件成立，則回傳前者；否則回傳後者」。

這種寫法可以取代簡單的 if...else 判斷式，讓程式碼更精簡。

使用範例：年齡判斷是否可喝酒

const age = 20;

const canDrink = age >= 18 ? "可以喝酒" : "不能喝酒";

console.log(canDrink); // 可以喝酒

解釋：

• age >= 18 是條件。
• 如果條件成立（即年齡 ≥ 18），就回傳 "可以喝酒"。
• 如果不成立，就回傳 "不能喝酒"。

多個條件的巢狀三元運算子

三元運算子也可以巢狀寫法，但要小心可讀性：

const score = 85;
const grade = score >= 90 ? "A+" :
               score >= 80 ? "A" :
               score >= 70 ? "B" :
               score >= 60 ? "C" : "F";

console.log(grade); // A

雖然語法短，但過度巢狀會讓人難以理解，建議只在條件不多時使用。

與 if…else 的比較

📄 傳統寫法：

let msg;
if (score > 60) {
  msg = "及格";
} else {
  msg = "不及格";
}

⚡ 三元寫法：

let msg = score > 60 ? "及格" : "不及格";

優勢：

• 程式碼簡潔，一行搞定
• 適合用於「值的選擇」，像是指派變數、顯示文字等

缺點：

• 不適合執行多段邏輯或流程，否則會失去可讀性

什麼時候不要用三元運算子？

避免像這樣的用法：

isAdmin
  ? user.isActive
    ? doSomething()
    : doSomethingElse()
  : anotherAction();

這會讓人一眼看不出邏輯，建議改用 if...else 重構，更容易維護與除錯。

結語：運算子是程式語言的骨幹

三種運算子差異整理

運算子不只是符號，更是程式的邏輯與運作核心。

掌握一元、二元與三元運算子的使用邏輯與差異，能幫助你：

• 寫出更精簡、好讀的程式碼
• 理解錯誤訊息與型別轉換問題
• 實作更有效率的條件邏輯與資料處理

未來不管你是在寫表單驗證、畫面顯示邏輯，還是處理後端資料，運算子都會是你的好幫手！