JavaScript 組合型房貸計算器實作指南：公式、UI 與邏輯完整解析

組合型房貸 = **公積金貸款 + 商業貸款** 同時申請。本文提供計算公式、前端介面設計、核心邏輯程式碼與進階功能擴展。

核心計算公式

等額本息 (最常見)

月利率 r = 年利率 / 12
月供 M = P * r * (1+r)^n / ((1+r)^n - 1)
總利息 = M * n - P
// P: 貸款本金, n: 總期數(月)

等額本金

月本金 = P / n
月利息 = 剩餘本金 * r
月供遞減，首月最高

組合貸試算邏輯

function calculateMixedLoan(params) {
  const { 
    totalPrice, downPaymentRatio, 
    gjjAmount, gjjRate, 
    syAmount, syRate, 
    years, method // 'equal_installment' | 'equal_principal'
  } = params;

  const n = years * 12;
  const r_gjj = ggjRate / 100 / 12;
  const r_sy = syRate / 100 / 12;

  // 公積金部分
  const gjjMonthly = calcMonthly(gjjAmount, r_gjj, n, method);
  const gjjTotal = gjjMonthly * n;
  const gjjInterest = gjjTotal - gjjAmount;

  // 商貸部分
  const syMonthly = calcMonthly(syAmount, r_sy, n, method);
  const syTotal = syMonthly * n;
  const syInterest = syTotal - syAmount;

  // 合計
  const totalMonthly = gjjMonthly + syMonthly;
  const totalInterest = gjjInterest + syInterest;
  const totalRepay = gjjTotal + syTotal;

  return {
    gjj: { monthly: gjjMonthly, total: gjjTotal, interest: gjjInterest },
    sy:  { monthly: syMonthly, total: syTotal, interest: syInterest },
    summary: { monthly: totalMonthly, total: totalRepay, interest: totalInterest }
  };
}

function calcMonthly(P, r, n, method) {
  if (method === 'equal_principal') return P / n + P * r; // 首月近似
  return P * r * Math.pow(1+r, n) / (Math.pow(1+r, n) - 1);
}

UI 介面設計要點 (參考新浪/銀行官網)

前端架構建議

• 框架：Vue 3 + Composition API / React Hooks，狀態集中管理試算參數。
• 計算層分離：loanCalculator.js 純函式，無 DOM 依賴，易單元測試。
• 防抖更新：輸入框 debounce(300ms) 觸發試算，避免頻繁重繪。
• 圖表化：ECharts 繪製「本金/利息佔比餅圖」、「月供走勢折線圖」。

資料來源與合規

• 利率以**央行公布 LPR** 為基準，銀行上浮/下浮幅度各異。
• 公積金額度、利率依各地住房公積金管理中心政策。
• 顯示免責聲明：「試算結果僅供參考，以銀行實際審批為準」。

開源參考專案

• mortgage-calculator (JS 純邏輯庫)
• Vue 財務類組件精選

掌握公式核心、分離計算與視圖、提供豐富互動與視覺化，即可打造專業級組合型房貸計算器。