JavaScript if 判斷邏輯優化：隱藏數值不顯示、條件合併與變數作用域最佳實踐

前端表單邏輯中常遇到「計算中間值需參與判斷但不直接顯示在頁面」、「多條件合併判斷」、「輸入值即時校驗與顯示分離」等場景。本文針對典型 `if` 判斷困惑，提供變數分離、邏輯簡化、DOM 操作解耦的最佳實踐方案。

核心問題拆解

• 問題 1：數值 `50` 需參與計算/判斷，但**不想直接賦值給輸入框顯示**。
• 問題 2：`if` 條件中引用的 `input` 值未改變，導致後續判斷邏輯失效 (如 `20w` 比較不成立)。
• 問題 3：能否在同一條 `if` 語句中完成多條件判斷？

解決方案：引入「邏輯變數」與「顯示變數」分離

// ❌ 錯誤示範：直接操作 DOM 值參與判斷，導致顯示與邏輯耦合
if (input.value <= 10000) {
    input.value = 50; // 強制顯示 50，破壞用戶輸入
}

// ✅ 正確模式：JS 變數承載邏輯，DOM 僅負責顯示
let logicValue = 0;      // 純邏輯計算變數
let displayValue = '';   // 面向用戶的顯示值

function calculate(inputVal) {
    // 1. 純邏輯運算，不觸碰 DOM
    if (inputVal <= 10000) {
        logicValue = 50; // 中間值只存在 JS 變數中
    } else if (inputVal <= 100000) {
        logicValue = inputVal * 0.05;
    } else {
        logicValue = inputVal * 0.1;
    }

    // 2. 根據邏輯結果決定顯示內容 (可不同於邏輯值)
    if (inputVal <= 10000) {
        displayValue = '優惠價'; // 或空字串、特定提示
    } else {
        displayValue = logicValue.toFixed(2);
    }

    // 3. 統一更新 DOM (單一職責)
    document.getElementById('resultInput').value = displayValue;
    document.getElementById('hiddenLogic').value = logicValue; // 若需表單提交隱藏域
}

條件合併與簡化技巧

• 區間判斷鏈：`if (x <= 10000) ... else if (x <= 100000) ... else ...` 利用短路特性，無需寫 `x > 10000 && x <= 100000`。
• 邏輯變數預計算：`const isSmall = val <= 10000; const isMedium = val <= 100000;` 再組合 `if (isSmall) ... else if (isMedium) ...`，提升可讀性。
• 查表法替代多層 if：若區間固定，用陣列/物件映射：

const rules = [
    { max: 10000, logic: 50, display: '優惠價' },
    { max: 100000, logic: v => v * 0.05, display: v => v.toFixed(2) },
    { max: Infinity, logic: v => v * 0.1, display: v => v.toFixed(2) }
];
const rule = rules.find(r => val <= r.max);
logicValue = typeof rule.logic === 'function' ? rule.logic(val) : rule.logic;
displayValue = typeof rule.display === 'function' ? rule.display(val) : rule.display;

輸入值「未改變」導致判斷失效的根因

若代碼中：

let inputVal = document.getElementById('input').value; // 字串 "5000"
if (inputVal <= 10000) { ... } // JS 隱式轉型為數字，成立
// 後續代碼未重新獲取 input.value
if (inputVal > 200000) { ... } // 仍用舊值 "5000"，永遠不成立

修正：每次判斷前**重新獲取** `parseFloat(input.value)`，或封裝 `getInputVal()` 函式確保數據新鮮度。

最佳實踐總結

1. 關注點分離：JS 變數存邏輯數據，DOM 只負責渲染。**絕不**直接讀寫 DOM 參與核心運算。
2. 單一數據源：用戶輸入 → 統一解析為數字 → 所有邏輯分支共用此數值。
3. 顯示邏輯可配置：將「計算規則」與「顯示格式」分離，支援國際化、主題切換、A/B 測試。
4. 防禦性編程：`parseFloat` + `isNaN` 守護，預設值兜底。

掌握「邏輯層與視圖層分離」思想，`if` 判斷不再是纏繞的條件語句堆砌，而是清晰可維護的業務規則表達。