JavaScript 課程 – 運算子（Operators）

主題：算術運算子（+、-、*、/、%、**）

---

簡介

在程式語言的世界裡，算術運算子是最基礎、也是最常用的工具之一。無論是計算商品總價、統計使用者行為次數，還是實作複雜的演算法，都離不開 +、-、*、/、%、** 這幾個符號。
對 JavaScript 初學者而言，掌握這些運算子的行為與細節，能夠大幅提升除錯效率與程式可讀性；對中級開發者來說，則是寫出高效、可維護代碼的前提。

本篇文章將以 淺顯易懂 的方式，系統性說明 JavaScript 中的算術運算子，並透過實務範例展示它們在日常開發中的應用。最後，我們也會探討常見的陷阱、最佳實踐以及實際使用情境，幫助你在寫程式時少走彎路。

---

核心概念

1. 加法運算子 +

• 數值加法：兩個或多個數字相加，結果仍為 Number。
• 字串串接：若任一運算元是字串，+ 會將另一個運算元轉成字串後進行串接。
• 隱式類型轉換：JavaScript 會在運算前自動嘗試轉型，這是新手最常踩的雷。

範例 1：純數值加法

const a = 12;
const b = 8;
const sum = a + b; // 20
console.log('12 + 8 =', sum);

範例 2：字串與數字混合

const price = 1999;
const unit = '元';
const message = price + unit; // "1999元"
console.log(message);

Tip：若希望確保是數值相加，請先使用 Number() 或 parseInt() 轉型。

範例 3：使用模板字串避免混淆

const count = 5;
const item = '蘋果';
console.log(`${count} 個 ${item}`); // "5 個 蘋果"

---

2. 減法運算子 -

• 僅支援數值運算。如果任一運算元不是數值，JavaScript 會嘗試將其轉成數值（NaN 代表非數值）。
• 常用於遞減、差值計算、負號的表達。

範例 4：計算差距

const start = 2025;
const now = 2025;
const yearsLeft = start - now; // 0
console.log('還有', yearsLeft, '年');

範例 5：負號與一元減法

const positive = 42;
const negative = -positive; // -42
console.log(negative);

---

3. 乘法運算子 *

• 兩個數值相乘，結果為 Number（若超過 IEEE‑754 的精度範圍，會產生 浮點數誤差）。
• 常用於面積計算、倍率、陣列初始化等。

範例 6：計算矩形面積

const width = 8;
const height = 5;
const area = width * height; // 40
console.log('矩形面積 =', area);

範例 7：快速產生陣列

// 產生長度為 10、每個元素皆為 0 的陣列
const zeros = Array(10).fill(0);
console.log(zeros);

---

4. 除法運算子 /

• 兩個數值相除，結果為 Number。
• 若除數為 0，會得到 Infinity（正除）或 -Infinity（負除），而 0 / 0 產生 NaN。

範例 8：平均值計算

const scores = [80, 90, 75, 95];
const total = scores.reduce((sum, v) => sum + v, 0);
const avg = total / scores.length; // 85
console.log('平均分 =', avg);

範例 9：除以零的行為

console.log(10 / 0);   // Infinity
console.log(-10 / 0);  // -Infinity
console.log(0 / 0);    // NaN

---

5. 餘數運算子 %（模數）

• 計算 除法的餘數，結果符號與左運算元相同（即被除數）。
• 常用於奇偶判斷、循環索引、時間格式化等。

範例 10：判斷奇偶

function isEven(num) {
  return num % 2 === 0;
}
console.log(isEven(7)); // false
console.log(isEven(12)); // true

範例 11：循環陣列索引

const colors = ['red', 'green', 'blue'];
let i = 0;
setInterval(() => {
  console.log(colors[i % colors.length]); // 依序輸出
  i++;
}, 1000);

---

6. 指數運算子 **

• ES2016 引入的 指數（冪） 運算子，等同於 Math.pow(base, exponent)。
• 右結合，即 2 ** 3 ** 2 等同於 2 ** (3 ** 2)。

範例 12：簡易的冪運算

const squared = 5 ** 2; // 25
const cubed = 2 ** 3;   // 8
console.log(squared, cubed);

範例 13：計算大數指數（注意精度）

const huge = 2 ** 53; // 9007199254740992（JavaScript 最大安全整數）
console.log(huge);

---

常見陷阱與最佳實踐

陷阱	說明	解決方式
字串與數字混用導致意外串接	+ 同時支援加法與字串串接，若其中一個是字串會全部變成字串。	使用 Number()、parseInt() 或 模板字串 來明確意圖。
浮點數誤差	0.1 + 0.2 ≠ 0.3，因為二進位表示的限制。	使用 toFixed()、Math.round() 或 bigint / decimal.js 等庫。
除以 0 產生 Infinity	有時會不小心除以 0，導致程式繼續執行但結果不正確。	在除法前檢查除數 if (denominator !== 0)，或使用 Number.isFinite() 驗證結果。
% 與負數的行為	-5 % 3 === -2（餘數符號同左運算元），在某些語言中會得到正餘數。	若需要正餘數，使用 (n % m + m) % m 的技巧。
指數運算子右結合	2 ** 3 ** 2 會先算 3 ** 2 再算 2 ** 9，結果是 512。	若想左結合，使用括號 (2 ** 3) ** 2。
隱式類型轉換產生 NaN	'' - 1 會得到 -1，但 'a' * 2 會得到 NaN。	使用 Number.isNaN() 檢測，或在運算前明確轉型。

最佳實踐

1. 明確類型：在需要數值運算時，先把變數轉成 Number（或 BigInt），避免意外的字串串接。
2. 避免魔法數字：將常用的除數、倍率抽成常數或設定檔，提升可讀性。
3. 使用 const：除非需要改變值，盡量使用 const，避免不小心改寫算術結果。
4. 檢查邊界：特別是除法與取餘時，先檢查除數是否為 0，或餘數是否會產生負值。
5. 利用內建函式：Math.pow()、Math.round()、Number.isFinite() 等都是安全的輔助工具。

---

實際應用場景

1. 電子商務 – 計算總金額與折扣

function calculateTotal(cartItems, discountRate = 0) {
  // cartItems: [{price: Number, qty: Number}, ...]
  const subtotal = cartItems.reduce(
    (sum, item) => sum + item.price * item.qty,
    0
  );
  const discount = subtotal * discountRate; // 折扣金額
  const total = subtotal - discount;
  return total.toFixed(2); // 兩位小數
}

// 範例
const cart = [
  { price: 1999, qty: 2 },
  { price: 350, qty: 1 },
];
console.log('應付金額：', calculateTotal(cart, 0.1)); // 10% 折扣

2. 遊戲開發 – 角色經驗值升級

function nextLevelExp(currentLevel) {
  // 常見的經驗值公式：base * level ^ 2
  const base = 100;
  return base * (currentLevel ** 2);
}
console.log('等級 5 所需經驗值 =', nextLevelExp(5)); // 2500

3. 時間格式化 – 計算剩餘秒數

function formatCountdown(seconds) {
  const mins = Math.floor(seconds / 60);
  const secs = seconds % 60;
  return `${String(mins).padStart(2, '0')}:${String(secs).padStart(2, '0')}`;
}
console.log(formatCountdown(125)); // "02:05"

4. 資料視覺化 – 圖表座標比例

function normalize(value, min, max) {
  // 把 value 正規化到 0~1 之間
  return (value - min) / (max - min);
}
const data = [12, 45, 23, 67];
const min = Math.min(...data);
const max = Math.max(...data);
const normalized = data.map(v => normalize(v, min, max));
console.log(normalized);

---

總結

算術運算子是 JavaScript 中最基本、最常用的工具。掌握 +、-、*、/、%、** 的行為與細節，能讓你在撰寫 資料處理、商業邏輯、遊戲機制 等程式時更加得心應手。本文重點回顧如下：

• + 同時支援加法與字串串接，使用時要注意隱式類型轉換。
• -、*、/ 只處理數值，除法除以 0 會得到 Infinity 或 NaN。
• % 用於餘數，在負數情況下會保留符號，若需要正餘數需自行調整。
• ** 為指數運算子，右結合且可取代 Math.pow()。
• 常見陷阱包括字串混用、浮點誤差、除以零與負餘數等，遵守 明確類型、邊界檢查 的最佳實踐可有效避免。

透過本文的範例與實務情境，你應該已經能夠自信地在各種專案中運用這些算術運算子，寫出正確、易讀且具備可維護性的程式碼。祝你在 JavaScript 的學習旅程中，持續探索、持續成長！ 🚀