JavaScript 字串操作：`trim`、`padStart` 與 `padEnd`

簡介

在日常的前端開發中，字串的前後空白、對齊與補齊 是非常常見的需求。無論是處理使用者輸入、產生報表、或是與後端 API 交換資料，字串的格式化都會直接影響程式的正確性與使用者體驗。
ECMAScript 2019 之後，JavaScript 為 String 物件加入了三個實用的方法：trim()、padStart() 與 padEnd()。它們不僅語法簡潔，且在效能與可讀性上遠勝於自行寫迴圈或正規表達式的舊寫法。
本篇文章將從概念說明、實作範例、常見陷阱到實務應用，完整介紹這三個方法的使用方式，幫助 初學者 能快速上手，也讓 中級開發者 在大型專案中能夠寫出更乾淨、可維護的程式碼。

核心概念

1. `String.prototype.trim()` – 移除字串前後空白

trim() 會回傳一個 新字串，內容是原字串去除左側與右側的空白字元（包括空格、Tab、換行等 Unicode whitespace）。原字串本身不會被改變，因為字串在 JavaScript 中是 不可變 (immutable) 的。

// 基本用法
const raw = "   Hello, JavaScript!   \n";
const cleaned = raw.trim();   // "Hello, JavaScript!"
console.log(`原始長度: ${raw.length}`);      // 25
console.log(`清除後長度: ${cleaned.length}`); // 19

小技巧：如果只想去除左側或右側的空白，可分別使用 trimStart()（或別名 trimLeft()）與 trimEnd()（或別名 trimRight()）。

const spaced = "\t\t2024 年\n";
console.log(spaced.trimStart()); // "2024 年\n"
console.log(spaced.trimEnd());   // "\t\t2024 年"

為什麼 `trim()` 重要？

避免驗證錯誤：使用者在表單輸入時常會不小心多打空格，若未 trim()，資料庫的唯一鍵檢查或正則驗證可能會失敗。
提升效能：相較於自行寫正則式 /^\s+|\s+$/g，原生 trim() 在大多數瀏覽器都有最佳化實作，執行速度更快。

2. `String.prototype.padStart(targetLength, padString)` – 前方補齊

padStart() 會在字串左側加上指定的填充字元，直到字串長度達到 targetLength。如果原字串已經等於或超過目標長度，則直接回傳原字串。

// 常見的數字補零需求
function formatTwoDigits(num) {
  return String(num).padStart(2, "0");
}
console.log(formatTwoDigits(5));   // "05"
console.log(formatTwoDigits(12));  // "12"

多字元填充

padString 可以是任意長度的字串，JavaScript 會自動循環取用它的字元，直到滿足長度需求。

const id = "A1";
console.log(id.padStart(6, "0x")); // "0x0xA1"

注意：若 padString 為空字串 ("") 或未提供，padStart() 會拋出 RangeError。

3. `String.prototype.padEnd(targetLength, padString)` – 後方補齊

padEnd() 與 padStart() 的行為相同，只是把填充字元放在右側。在排版、產生固定寬度的文字表格時非常實用。

// 建立簡易的左對齊表格
const names = ["Alice", "Bob", "Charlie"];
names.forEach(name => {
  console.log(name.padEnd(10, " ") + "| 資料列");
});
// 輸出:
// Alice     | 資料列
// Bob       | 資料列
// Charlie   | 資料列

結合 `padStart` 與 `padEnd` 的應用

有時候需要同時在左右兩側補齊，形成「居中」的視覺效果：

function center(text, width, fill = " ") {
  const left = Math.floor((width - text.length) / 2);
  const right = width - text.length - left;
  return fill.repeat(left) + text + fill.repeat(right);
}
console.log(center("JS", 10, "*")); // "***JS*****"

4. 綜合範例：處理 CSV 檔案的欄位對齊

以下示範如何使用 trim()、padEnd() 以及 padStart()，把一段未對齊的 CSV 文字整理成固定寬度的表格，方便在 console 中閱讀：

const rawCsv = `
  name , age , country
  Alice,30, Taiwan
  Bob ,  25 ,Japan
  Charlie ,  35,   United States
`;

function formatCsv(csv) {
  const rows = csv.trim().split("\n");
  // 取出標題列並計算每欄位的最大寬度
  const columns = rows.map(r => r.split(",").map(c => c.trim()));
  const colWidths = columns[0].map((_, i) =>
    Math.max(...columns.map(row => row[i].length))
  );

  // 產生對齊好的文字
  const lines = columns.map(row =>
    row
      .map((cell, i) => cell.padEnd(colWidths[i], " "))
      .join(" | ")
  );
  return lines.join("\n");
}

console.log(formatCsv(rawCsv));

輸出結果：

name    | age | country       
Alice   | 30  | Taiwan        
Bob     | 25  | Japan         
Charlie | 35  | United States

此範例同時展示了：

trim() 先把整段文字前後的換行與空白去除。
split(",") 取得每個欄位，並再次 trim() 去除欄位內部的多餘空白。
依欄位最長長度，用 padEnd() 補齊，使得每一列的欄位寬度一致。

常見陷阱與最佳實踐

陷阱	可能的結果	建議的做法
忘記將 `trim()` 的結果回寫	`const s = " abc "; s.trim(); // s 仍是原字串`	永遠使用 `const trimmed = s.trim();` 或直接在表單驗證時 `value = value.trim();`
`padStart` / `padEnd` 的 `padString` 為空	會拋出 `RangeError: padString cannot be empty`	確認填充字元非空，或在函式內加入預設值 `padString = " "`
目標長度小於原字串長度	返回原字串，可能導致排版錯位	先檢查 `if (str.length < target) { … }`，或直接使用 `Math.max(str.length, target)`
使用 Unicode 佔位寬度不同的字元（如中文、emoji）	`padStart`/`padEnd` 以字元計算，視覺上仍會不對齊	若需「視覺寬度」對齊，可使用第三方函式庫（如 `string-width`）或自行計算全形/半形寬度
在大量字串上頻繁呼叫 `trim()`	可能產生過多暫存字串，影響記憶體	在迴圈外先做一次 `trim()`，或使用正則一次性處理多行資料

最佳實踐：

純函式設計：將 trim、padStart、padEnd 包裝成不改變原始資料的純函式，提升可測試性。
預設填充字元：在團隊程式碼規範中統一使用 ' '（空格）或 '0'，避免因不同填充字元造成不一致的 UI。
性能測試：在需要處理上千筆資料的情境下，使用 console.time 量測 trim 與 pad* 的執行時間，確保不成為瓶頸。

實際應用場景

表單驗證與資料庫寫入
- 使用 trim() 清除使用者輸入前後的空白，避免 email、username 重複判斷失效。
金融或編號系統的固定寬度編碼
- 例如發票號碼必須 8 位，使用 padStart(8, "0") 補齊。
CLI 輸出或日誌排版
- 用 padEnd() 讓每一列的欄位寬度相同，提升可讀性。
國際化（i18n）文字對齊
- 在多語系的 UI 中，利用 padStart/padEnd 把左/右對齊字串補齊，減少 CSS 的額外調整。
生成固定寬度的檔案（如固定格式的報表、主機檔）
- 金融業、物流業常見的「固定欄位寬度」檔案，直接使用 padEnd 產生符合規範的文字檔。

總結

trim()、padStart() 與 padEnd() 是 字串處理的三把好刀，它們不僅語法簡潔、效能佳，更能讓程式碼更具可讀性與可維護性。

trim()：去除前後空白，避免驗證與比對錯誤。
padStart()：左側補齊，常用於數字補零或左對齊需求。
padEnd()：右側補齊，適合產生表格、報表或右對齊的 UI。

在實務開發中，善用這三個方法，配合適當的錯誤處理與寬度計算，能大幅減少手寫迴圈或正則式的複雜度，提升開發效率與程式品質。希望本篇文章能讓你在日常的 JavaScript 專案裡，快速、正確地完成字串格式化的工作。祝 coding 愉快！

JavaScript 字串操作：trim、padStart 與 padEnd

簡介

核心概念

1. String.prototype.trim() – 移除字串前後空白

為什麼 trim() 重要？

2. String.prototype.padStart(targetLength, padString) – 前方補齊