原文鏈接：https://www.rajamsr.com/javascript-trim-string/

你在 JavaScript 代碼編寫中有遇到過一個你需要比較或操作處理字符串，但是在開始或者結(jié)尾有額外空格的情況嗎？如果有，你并不孤單，很多 JS 開發(fā)者所面對的最常見的問題之一就是如何從開頭或結(jié)尾移除額外的空格。這個過程叫做JS修剪字符串。這樣處理之后，你就可以確保你的字符串是連續(xù)并且準確的，并且可以避免任何額外空格導致的潛在問題。

在這篇博客中，我將給你展示：

• 如何使用不同的方法在 JavaScript 中修剪字符串
• 按長度、字符或位置修剪字符串的 JavaScript 方法
• JavaScript 中的修剪字符串：長度、字符和位置方法
• 使用 JavaScript 修剪字符串的不同方法
• JavaScript 修剪字符串并添加省略號 (...)

有點懵逼，感覺講的意思大同小異

讓我們開始吧！

JavaScript 修剪字符的方法

JavaScript 提供了三個內(nèi)置的修剪字符串的方法：trim()、trimStart()和trimEnd()。這三個方法并不修改原來的字符串，而是返回修剪好的字符串。

換句話說，這里是原地操作。

• trim()方法對開頭和結(jié)尾去除所有的空白字符。空白字符包括空格、tabs，換行符，還有其他被視為空格的 Unicode 統(tǒng)一碼字符
• trimStart()方法對字符串開頭去除所有的空白字符。
• trimEnd()方法對字符串結(jié)尾去除所有的空白字符。

這三個方法并不接受任何的參數(shù)，并且它們是很容易使用的。

這里有一個使用這些方法修剪字符串的代碼例子：

// Using trim() to remove whitespace from both sides of a string
let name = "  John Doe  ";
console.log(name.trim()); 
// Output: "John Doe"

// Using trimStart() to remove whitespace from the beginning of a string
console.log(name.trimStart()); 
// Output: "John Doe  "

// Using trimEnd() to remove whitespace from the end of a string
console.log(name.trimEnd()); 
// Output: "  John Doe"

通過長度來修剪 JavaScript 字符串

有時，你可能想要以具體的長度來修剪字符串，而非僅僅移除空格。

比如說，你可能想要截短一個長字符串以滿足展示特定的區(qū)域，或者創(chuàng)造一個更長文本的總結(jié)。在這些情況里，你可以使用 JavaScript slice() 方法以具體的長度來修剪字符串。

slice()方法提取了字符串的一部分并且返回了新的字符串。這個方法接受兩個參數(shù)，要提取的子字符串的索引起點和索引重點。

• 索引起點被包含在截取部分里，索引終點不被包含。
• 如果省略結(jié)束索引，該方法將從開始索引一直到這個字符串的結(jié)束。

這里說幾個使用 slice() 的代碼實例

// Using slice() to trim a string to 10 characters
let message = "JavaScript runs everywhere on everything!";
console.log(message.slice(0, 10)); 
// Output: "JavaScript"

// Using slice() to trim a string from the 4th character to the end
console.log(message.slice(4)); 
// Output: "Script runs everywhere on everything!"

// Using slice() to trim a string from the 10th to the 20th character
console.log(message.slice(10, 20)); 
// Output: " runs ever"

使用 slice() 以具體長度來修剪字符串有些優(yōu)點也有缺點，優(yōu)缺點如下:

優(yōu)點：

• 它很靈活，并且允許你具體到字符串分隔的起點索引和終點索引。
• 可以處理從字符串末尾開始計數(shù)的負數(shù)索引。
• 對任何字符都生效，而非只對空格生效

缺點：

• JavaScript slice() 方法在字符串中間切除單詞或者句子，這可能會影響字符串的可讀性或意義。
• 不會自動添加任何像省略號意義的指引器去展示這個字符串已經(jīng)被修剪了。
• 需要額外的邏輯或者計算去決定 JavaScript 子字符串的最佳長度或索引。

將 JavaScript 修剪為十個字符

有時，你可能想要修剪一個字符到固定的長度，比如10個字符，并且你并不關(guān)心它的原始長度如何。在 JS 中為了修剪到十個長度，你可以使用 slice() 方法去使用固定的 0-10 的索引，這個 slice() 方法提取了字符串的一部分并且返回了一個新的字符串。

這里有幾個使用 JavaScript slice 去裁剪字符串到十個字符的代碼示例。

// Using slice() to trim a string to 10 characters
let message = "JavaScript runs everywhere on everything!";
console.log(message.slice(0, 10)); 
// Output: "JavaScript"

// Using slice() to trim a string to 10 characters
let name = "Java";
console.log(name.slice(0, 10)); 
// Output: "Java"

// Using slice() to trim a string to 10 characters
let title = "Eloquent JavaScript";
console.log(title.slice(0, 10)); 
// Output: "Eloquent J"

如你所見，slice() 方法修剪字符串到十個字符，不管它的原始長度說多少。但是，這也意味著它可以從字符串中間切斷語句，這可能會影響子串的可讀性或意義。所以，你應(yīng)該小心的使用這個方法，并且最好是必要的時候才使用。

JavaScript在字符后修剪字符串。

有時，你可能想要在特定的字節(jié)后去修剪字符串，比如在逗號、點、或者空格。為了在字符后修剪字符串，你可以使用 JavaScript indexOf() 和 slice() 方法。

indexOf() 方法返回指定字符在字符串中第一個出現(xiàn)的索引。如果這個字符沒找到，那就返回 -1，這個 slice() 方法，就喝我們之前見到的一樣，從字符串中提取一個字符串并且返回新的字符串。

這里有一些使用 indexOf() 和 slice() 去在字符后面修剪字符串的示例。

// Using indexOf() and slice() to trim a string after a comma
let address = "123 Main Street, New York, NY 10001";
console.log(address.slice(0, address.indexOf(","))); 
// Output: "123 Main Street"

// Using indexOf() and slice() to trim a string after a dot
let email = "john.doe@example.com";
console.log(email.slice(0, email.indexOf("."))); 
// Output: "john"

// Using indexOf() and slice() to trim a string after a space
let greeting = "Hello, world!";
console.log(greeting.slice(0, greeting.indexOf(" "))); 
// Output: "Hello,"

正如你所看到的，indexOf() 和 slice() 方法會修剪指定字符后的字符串，刪除其后面的所有內(nèi)容。但是，這也意味著它可能會丟失字符串中的一些重要或相關(guān)信息。因此，您應(yīng)該謹慎使用此方法，并且僅在需要時使用。 添加 JavaScript 注釋是為了理解功能。

修剪字符處的字符串

有時，你可能想要修剪特定的字符串，比如破折號、冒號或斜線。這可能對給予特定的分隔符號分開一個字符串為兩個或更多的部分有作用。為了修剪字符處的字符串，你可以使用 split() 和 join() 方法。

split() 方法給予一個特定的字符分隔字符串為一個子串的數(shù)組。它接受一個參數(shù)：這個用作分割器的字符，join() 方法將一個有著子字符串的數(shù)組合成一個新字符串。它接受一個參數(shù)：這個用作分割（結(jié)合）器的字符

這里有幾個使用 split() 和 join() 去修剪字符串為字符的例子

// Using split() and join() to trim a string at a dash
let title = "JavaScript-Trim-String";
console.log(title.split("-").join(" ")); 
// Output: "JavaScript Trim String"

// Using split() and join() to trim a string at a colon
let time = "06:56:08";
console.log(time.split(":").join(".")); 
// Output: "06.56.08"

// Using split() and join() to trim a string at a slash
let url = "https://www.bing.com\search?q=javascript+trim+string";
console.log(url.split("\").join("/")); 
// Output: "https://www.bing.com/search?q=javascript+trim+string"

正如您所看到的，length 和 slice() 方法從末尾修剪字符串，刪除指定數(shù)量的字符。但是，這也意味著您需要知道要刪除的確切字符數(shù)，但情況可能并非總是如此。

修剪字符之前的字符串

有時，您可能希望在指定字符（例如逗號、點或空格）之前修剪字符串。這對于刪除字符串中某個定界符或分隔符之前不需要的或不必要的部分非常有用。

要在 JavaScript 中修剪字符之前的字符串，可以同時使用 lastIndexOf() 和 slice() 方法。 lastIndexOf() 方法返回字符串中最后一次出現(xiàn)的指定字符的索引。如果沒有找到該字符，則返回-1。

以下是使用 JavaScript 數(shù)組方法 lastIndexOf() 和 slice() 修剪字符之前的字符串的一些代碼示例：

// Using lastIndexOf() and slice() to trim a string before a comma
let address = "123 Main Street, New York, NY 10001";
console.log(address.slice(address.lastIndexOf(",") + 1)); 
// Output: " NY 10001"

// Using lastIndexOf() and slice() to trim a string before a dot
let url = "https://www.bing.com/search?q=javascript+trim+string";
console.log(url.slice(url.lastIndexOf(".") + 1)); 
// Output: "com/search?q=javascript+trim+string"

// Using lastIndexOf() and slice() to trim a string before a space
let message = "Hello, JavaScript!";
console.log(message.slice(message.lastIndexOf(" ") + 1)); 
// Output: "JavaScript!"

正如你所看到的，lastIndexOf() 和 slice() 方法會修剪指定字符之前的字符串，刪除其前面的所有內(nèi)容。

修剪字符串添加省略號 (...)

有時，您可能想要截斷字符串并在末尾添加省略號 (…)，例如當您想要創(chuàng)建摘要、指示截斷或增強美觀時。省略號是由三個點 (...) 組成的標點符號，通常用于表示某些內(nèi)容被省略或遺漏。

要修剪字符串并在末尾添加省略號，可以同時使用 slice() 和 JavaScript 字符串連接 concat() 方法。 concat() 方法連接兩個或多個字符串并返回一個新字符串。它接受一個或多個參數(shù)。

以下是使用 slice() 和 concat() 修剪字符串并在末尾添加省略號的一些代碼示例：

// Using slice() and concat() to trim a string and add an ellipsis at the end
let message = "JavaScript runs everywhere on everything!";
console.log(message.slice(0, 20).concat("...")); 
// Output: "JavaScript runs ever..."

console.log(message.slice(0, 30).concat("...")); 
// Output: "JavaScript runs everywhere on ..."

正如您所看到的，slice() 和 concat() 方法修剪字符串并在末尾添加省略號，創(chuàng)建一個新字符串。但是，這也意味著您需要指定要提取的子字符串的長度，但情況可能并非總是如此。

修剪字符串并在末尾添加省略號可能有一些應(yīng)用，例如：

• 創(chuàng)建摘要：修剪字符串并添加省略號可以幫助您創(chuàng)建較長文本（例如博客文章、新聞文章或書籍）的簡短摘要。
• 指示截斷：修剪字符串并添加省略號可以幫助您指示字符串已被截斷或切斷，例如當您想要將字符串適合有限的顯示區(qū)域或格式時。
• 增強美觀性：修剪字符串并添加省略號可以幫助您增強字符串的美觀性或外觀，例如當您想要創(chuàng)建吸引人的標題、口號或引言時。

總結(jié)

在這篇博文中，我向您展示了如何使用不同的方法和技術(shù)在 JavaScript 中修剪字符串。我已經(jīng)解釋了如何使用trim()方法從字符串中修剪空格，以及如何使用slice()和concat()方法修剪字符串并在末尾添加省略號。

我們還討論了 JavaScript 中修剪字符串的一些含義和應(yīng)用，例如提高可讀性、減少內(nèi)存使用、匹配模式、創(chuàng)建摘要、指示截斷或增強美觀。

根據(jù)您的目的和情況使用適當?shù)姆椒ā＠?，使用trim()修剪字符串兩邊的空格，使用slice()和concat()修剪字符串并在末尾添加省略號，或者使用其他方法如trimStart()、trimEnd() 、indexOf()、lastIndexOf()、split() 或 join() 以其他方式修剪字符串。

修剪字符串時請小心，不要丟失或更改字符串的含義或信息。在修剪字符串時添加一些指示符或解釋，尤其是在不明顯的情況下。

我希望這篇博文能夠幫助您學習如何在 JavaScript 中修剪字符串。交給你了，你將如何使用 JavaScript 修剪方法？

以上就是JavaScript修剪字符串的方法和技巧的詳細內(nèi)容，更多關(guān)于JavaScript修剪字符串的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論