如何在 JavaScript 中從字符串中修剪空格/字符

簡介

當您的目標是成為一名更好的 JavaScript 開發人員時，您最好了解 JavaScript 中的一些技巧和方法，以便將來避免不必要的難以解碼的錯誤。每當用戶通過表單字段輸入字符串值時，最好刪除字符串開頭和結尾的空格以及所有不必要的字符。輸入很少是乾淨的，不干淨的輸入在某些情況下會破壞應用程序。

從字符串中刪除空格

空白被定義為一個空白空間，即沒有視覺表示的空間，但確實存在用於分隔兩個字符的空間。這些空格是使用計算機鍵盤的空格鍵創建的 和標籤 ，以及換行符或行終止符，例如 \n , \t , \r .

注意： 修剪 字符串通常是指 trimming 字符串的左側、右側或更常見的兩側。最常見的是，我們修剪字符串周圍的潛在空格，但我們也可以修剪其他字符。

JavaScript 提供了三個函數來幫助我們修剪從輸入字段進入我們的數據庫或應用程序的字符串。

使用 trim() 修剪 JavaScript 中的字符串空白

trim() 是一個內置的字符串方法，用於修剪字符串。該方法從字符串的兩端刪除空格​​並返回它：

string.trim();

讓我們創建一個 username - 開頭有兩個空格，結尾有一個空格：

let username = '  John Doe ';
let trimmed = username.trim();

console.log(trimmed);

這導致：

John Doe

trim() 不能就地工作，因為字符串是不可變的。它返回一個修剪後的字符串 - 所以我們已經捕獲了返回的值並打印了它。

注意： 如果在兩個字符之間找到空格，則保留空格。它們只是從 start 開始修剪 和結束 一個字符串。

該方法還用於刪除行終止符，例如 \n , \t , \r ， ETC。例如，假設有一個討厭的 tab 就在序列號和換行符之前 在它之後休息：

let serialNumber = '\t  011-34201 \n';
console.log('Untrimmed: ', serialNumber)
console.log('Trimmed: ', serialNumber.trim());

這導致：

Untrimmed:	   011-34201 
Trimmed: 011-34201

同樣，trim() 通過從 both 中刪除空格來工作 雙方。但是，有時，您可能只想修剪一側。這是您選擇使用 trimStart() 的地方 和 trimEnd() 方法來代替。

用 trimStart() 修剪字符串的開頭

類似於 trim() 方法，顧名思義，trimStart() 用於僅從字符串的開頭修剪空格和行終止符。例如：

let company = '  Stack Abuse  ';
company.trimStart(); // 'Stack Abuse '
  
let serialNumber = '\t  011-34201 \n';
serialNumber.trimStart(); // '011-34201 \n'

在上面的示例中，您會注意到公司名稱開頭的空格已被刪除。相同的邏輯適用於 serialNumber 中仍然存在的換行符 .

用 trimEnd() 修剪字符串的結尾

trimEnd() 與 trimStart() 截然相反 方法，顧名思義，用於僅從字符串末尾修剪空格和行終止符。例如：

let company = '  Stack Abuse  ';
company.trimEnd(); // ' Stack Abuse'
  
let serialNumber = '\t  011-34201 \n';
serialNumber.trimEnd(); // '\t  011-34201'

在上面的例子中，你會注意到它並沒有像 trimStart() 那樣影響開頭 , 結尾受到刪除空格和行終止符的影響。

從字符串中刪除所有空格

繼續，現在讓我們看看如何使用正則表達式修剪所有空格。到目前為止，我們只看到瞭如何從字符串的開頭或結尾刪除空格 - 現在讓我們看看如何刪除 all 空格。

這可以使用 JavaScript 的 string.replace() 方法，它支持正則表達式 (RegEx) 並幫助在特定字符串中查找匹配項。 replace() 接受兩個參數，第一個是匹配我們要刪除的正則表達式，第二個是我們要插入的模式而不是第一個。

現在讓我們編寫一個正則表達式來處理字符串中所有空格的刪除：

• \s :匹配任何空白符號，例如空格、製表符和換行符。
• + :匹配一個或多個前面的標記（引用 \s )。
• g :放在末尾，表示在整個字符串中進行迭代搜索。

現在讓我們結合這個 RegEx 並利用它來刪除字符串內、之前和之後的空格：

免費電子書：Git Essentials

查看我們的 Git 學習實踐指南，其中包含最佳實踐、行業認可的標準以及隨附的備忘單。停止谷歌搜索 Git 命令並真正學習 它！

let sentence = '    I and the man decided   to move  ouT  ';
let trimmed = sentence.replace(/\s+/g, ''); // 'IandthemandecidedtomoveouT'
  
console.log('Untrimmed: ', sentence)
console.log('Trimmed: ', trimmed);

這導致：

Untrimmed:     I and the man decided   to move  ouT  
Trimmed: IandthemandecidedtomoveouT

在上面的例子中，我們去掉了空格並用空字符串替換了它們。

用 JavaScript 修剪任意字符

使用正則表達式時，string.replace() 方法 - 您不僅限於修剪空格。你真的可以修剪任何圖案 ，並且正則表達式模式非常靈活。

我們只需要根據您希望修剪的任意字符派生一個特定的 RegEx 表達式。假設我們想從字符串的開頭刪除一個特定的字符，並從結尾刪除一個不同的字符：

let example = "cccccccccccccccccccccI know the manaaaaaaaaaaaaaaaaaaaa";
let show = example.replace(/c+/, "").replace(/a+$/, "");
console.log(show); // "I know the man"

或者我們也可以使用任何任意模式，例如 0 之間的任何數字 和 9 ：

let example = "1234567890I know the man1234567890";
let show = example.replace(/^[0-9]+/, '').replace(/[0-9]+$/, '');
console.log(show); // "I know the man"

使用 JavaScript 從特定索引中修剪字符

最後，在給定特定索引的情況下，可以使用另一個內置的字符串方法來修剪字符串。 substr() 方法子字符串 一個字符串，並將子集作為新字符串返回。它用於提取給定起始索引和結束索引之間的字符串部分。

要從字符串中刪除第一個字符 - 我們 將其刪除 在索引 1 , 並將第二個參數設置為 length 字符串：

let username = 'John Doe';
console.log('Original Name: ', username);
  
let newName = username.substr(1, username.length);
console.log('After removing the first character: ', newName);

這導致：

Original Name: John Doe
After removing the first character: ohn Doe

結論

在本指南中，我們了解瞭如何在 JavaScript 中從字符串中修剪空格——無論是從字符串的開頭、結尾還是兩端。

我們已經探索了 trim() , trimStart() 和 trimEnd() 方法，自動修剪空格。然後，我們探索了使用正則表達式來用空字符串替換空格模式。此外，我們隨後探索了將字符串中的任意模式替換為任何其他模式。

最後，我們看看 substr() 方法，使用給定的 start 子串和修剪字符 和 end 索引。