在前端串接 API 資料或處理使用者複製貼上的表單輸入時，常需要去除字串前後空白、換行符號（\n、\r）或全形空格（\u3000）。透過原生 JavaScript 字串方法先行清理空白，能有效避免後續執行 Input RegExp 表單驗證 — 只輸入數字 時因隱藏字元而驗證失敗。
一、 核心複製即用範本與去空白方法對照表
針對「僅去除頭尾空白」、「精確替換特定空格」與「連同字串中間的空格、換行一併清除」等不同情境，可對應選用以下 3 種 JavaScript 原生方法：
| 處理需求情境 | 建議使用語法 | 輸入範例 | 輸出結果 |
|---|---|---|---|
| 去除前後空白（含頭尾換行與全形空白） | str.trim() | ' aaa \n' | 'aaa' |
| 僅去除開頭空白 / 僅去除結尾空白 | str.trimStart() / str.trimEnd() | ' aaa ' | 'aaa ' / ' aaa' |
| 精確替換特定空格（無需正規表達式） | str.replaceAll(' ', '') | ' a b ' | 'ab' |
| 去除全部空白與換行（含字串中間空格） | str.replace(/\s+/g, '') | ' a \n b ' | 'ab' |
二、 3 種原生 JavaScript 去空白與換行 API 實作
在操作 JavaScript 字串時，需特別注意 字串具有不可變性（Immutability）：不論呼叫 str.trim()、str.replaceAll() 或 str.replace()，都不會直接修改原本的變數 str，而是回傳一個新的字串，因此務必將回傳值重新賦值或直接傳遞使用。
方法 1：String.prototype.trim()（去除前後空白）
JavaScript 內建的 trim() 會自動移除字串頭尾兩端的半形空格、Tab（\t）、換行符號（\n、\r）以及全形空白（\u3000），且不會動到字串中間的空白：
const str = ' aaa bbb ';
const result = str.trim();
console.log(result);
// 輸出: "aaa bbb"
// 若只需去除單側空白：
console.log(str.trimStart()); // 輸出: "aaa bbb "（僅去除左側開頭空白）
console.log(str.trimEnd()); // 輸出: " aaa bbb"（僅去除右側結尾空白）方法 2：String.prototype.replace() 搭配 RegExp（彈性去除空白與換行）
當需要清除字串中間的換行或所有空白時，使用 replace() 搭配正規表達式是彈性最大的方式。
1. 僅去除換行符號（保留英文單字間的空格）：
const str = 'Hello World\n\r\nJavaScript';
// 將 Windows (\r\n)、Linux/macOS (\n) 與舊式 (\r) 換行全部替換為空字串
const singleLine = str.replace(/\r?\n|\r/g, '');
console.log(singleLine);
// 輸出: "Hello WorldJavaScript"2. 清除字串內「所有」空白與換行（含中間空格與全形空白）：\s+ 在 JavaScript 正規表達式中已自動涵蓋半形空格、\t、\r、\n 與全形空白 \u3000：
const str = ' aaa\n\n\r\n bbb ccc ';
const cleanStr = str.replace(/\s+/g, '');
console.log(cleanStr);
// 輸出: "aaabbbccc"方法 3：String.prototype.replaceAll()（無正規表達式替換指定字元）
若不希望撰寫複雜的正規表達式（RegExp），且明確知道要替換的是特定字元（如純空格 或特定換行符號 \n），可直接呼叫 ES2021 推出的 replaceAll()：
const str = 'a b c d';
// 將所有半形空格替換為空字串
const noSpace = str.replaceAll(' ', '');
console.log(noSpace);
// 輸出: "abcd"舊環境相容替代方案：若專案環境較舊不支援
replaceAll()，也可以使用str.split(' ').join('')達到完全相同的無正規表達式替換效果。
若使用者在輸入時除了全形空白外，還將英數字打成全形字元（如 １２３），可再串聯 JS 英文數字全形轉半形 一併正規化。
三、 常見問題與排錯 Q&A
Q1：為什麼寫了 str.replace(/\s+/g, "") 之後，console.log(str) 卻發現空白還在？
- 問題原因：
String.prototype.replace()與trim()都不會改變原始字串本身（不會 In-place 修改），若只寫str.replace(...)而沒有用變數接住回傳值，轉換結果就會直接被丟棄。 - 解決思路：請改寫為
str = str.replace(/\s+/g, '')（需宣告為let str），或宣告新變數const cleaned = str.replace(/\s+/g, '')。
Q2：如何把字串中間「多個連續空白」壓縮成「單一空格」，同時去掉頭尾空白？
- 問題原因：在搜尋框或英文姓名欄位中，使用者可能不小心多按了好幾下空白鍵（如
"John Doe"），若用replace(/\s+/g, '')會變成"JohnDoe"黏在一起。 - 解決思路：先用
.trim()去除頭尾空白，再搭配.replace(/\s+/g, ' ')將中間連續空白替換為單一空格：const name = ' John \n Doe '; console.log(name.trim().replace(/\s+/g, ' ')); // 輸出: "John Doe"
發佈留言