Trailing zero 尾隨零 – JS 數字後面補 0（padEnd 與 toFixed）

在處理固定長度資料代號或金額小數點顯示時，常需要實作 JavaScript 數字後面補 0（Trailing Zero，尾隨零）。這與 Leading zero 前導零 — JS 數字前補 0 在數字前方補零的概念正好相反，主要用於「字串右側補齊指定長度」或「小數點後方固定保留 N 位數（如 12.5 顯示為 12.50）」。

---

一、 核心複製即用範本與補零方法對照表

針對「整數／代號右側補零」與「小數點後方補零」兩種不同需求，JavaScript 提供了以下 3 種原生實作方式：

補零需求場景	建議使用語法	輸入範例	輸出結果
字串或數字右側補 0 至指定總長度	String(val).padEnd(length, '0')	123（目標長度 9）	"123000000"
金額小數點後方固定位數補 0	Number(val).toFixed(digits)	12.5（小數 2 位）	"12.50"
舊版環境（IE）右側長度補 0	(val + '0'.repeat(n)).slice(0, length)	7890（目標長度 9）	"789000000"

一般數字與經過 Trailing Zero 處理後的對照

原始輸入資料	經過右側補 0（目標長度 9 位）	小數點後固定 2 位補 0
123	123000000	123.00
44444	444440000	44444.00
5566666	556666600	5566666.00
7890	789000000	7890.00

---

二、 3 種 JS 數字後面補 0 實作方式

1. 使用 ES2017 String.prototype.padEnd()（固定總長度補零）

當需求是「資料總長度不足 N 位時，一律往右邊補 0 直到滿 N 位」（例如商品條碼、固定欄位長度電文），可先將數字轉為字串後呼叫 padEnd(目標長度, '0')：

/**
 * 將數字或字串右側補 0 至指定總長度
 * @param {number|string} code - 原始輸入資料
 * @param {number} targetLength - 補 0 後的目標總長度
 * @returns {string} 補零後的字串
 */
function padTrailingZero(code, targetLength) {
  return String(code).padEnd(targetLength, '0');
}

console.log(padTrailingZero(123, 9));      // 輸出: "123000000"
console.log(padTrailingZero('abc123', 10)); // 輸出: "abc1230000"

若原本字串長度已經超過 targetLength（例如輸入 "123456" 且 targetLength 為 4），padEnd() 會保留原字串 "123456" 不會截斷；若希望強制截斷至指定長度，可在後方加上 .slice(0, targetLength)。

2. 使用 Number.prototype.toFixed()（小數點後方補零）

在進行 JavaScript Math.ceil 無條件進位 或折扣計算後，JavaScript 的 Number 型別會自動省略小數點末尾的 0（例如 12.50 在變數中只會儲存為 12.5）。若要在畫面顯示固定的小數位數，可使用 toFixed(小數位數) 轉換為補零後的字串：

const price1 = 120;
const price2 = 99.5;

console.log(price1.toFixed(2)); // 輸出: "120.00"
console.log(price2.toFixed(2)); // 輸出: "99.50"

如果同時需要加上千分位逗號與保留小數點後兩位補零，也可直接使用 Intl.NumberFormat 的 minimumFractionDigits 參數（詳見 JS 數字加逗號與轉換千分位顯示）：

const amount = 1234.5;
const formatted = new Intl.NumberFormat('zh-TW', {
  minimumFractionDigits: 2,
  maximumFractionDigits: 2,
}).format(amount);

console.log(formatted); // 輸出: "1,234.50"

3. 使用 Array.join() 與 slice()（相容舊版 IE 系統）

若維護的專案需要相容不支援 ES2017 padEnd() 的老舊瀏覽器環境，可透過字串串接搭配 slice(0, dataLength) 實作：

// 數字、字串後補 0（相容舊版瀏覽器）
// code : 輸入的資料（字串或數字）
// dataLength : 資料補 0 後的目標長度
function TrailingZero(code, dataLength) {
  var padding = new Array(dataLength + 1).join('0');
  var str = String(code) + padding;
  return str.slice(0, dataLength);
}

var str = 'abc123';
console.log(TrailingZero(str, 10)); // 輸出: "abc1230000"
console.log(TrailingZero(123, 8));  // 輸出: "12300000"

如果需要在後面補上其他自訂符號（例如 '*' 或空白 ' '），直接將 join('0') 或 padEnd(targetLength, '0') 中的 '0' 替換為目標字元即可。

---

三、 常見問題與排錯 Q&A

Q1：為什麼補 0 之後不能再直接用 Number() 轉回數字型別？

• 問題原因：對小數點後方補零（例如 "12.50"）而言，一旦執行 Number("12.50") 或 parseFloat("12.50")，JavaScript 數值型別會自動捨棄無數值意義的尾隨零，變回 12.5。
• 解決思路：請在所有數學運算完成後，最後一步要渲染到畫面（UI）時才執行 toFixed() 或 padEnd() 轉為字串顯示。

Q2：padEnd() 可以直接對數字變數呼叫嗎（如 (123).padEnd(6, '0')）？

• 問題原因：padEnd() 是 String.prototype 上的字串方法，Number 原型鏈上並沒有此方法，直接呼叫會拋出 TypeError: (123).padEnd is not a function。
• 解決思路：呼叫前務必先使用 String(num) 或 num.toString() 轉換為字串型別。

---

參考資料與延伸閱讀

• MDN Web Docs: String.prototype.padEnd()
• MDN Web Docs: Number.prototype.toFixed()
• Leading zero 前導零 — JS 數字前補 0
• JavaScript Math.ceil 無條件進位：小數點第 N 位、十位數進位公式與分頁總頁數計算
• JS 數字加逗號與轉換千分位顯示