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

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

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

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

有點(diǎn)懵逼，感覺(jué)講的意思大同小異

讓我們開(kāi)始吧！

JavaScript 修剪字符的方法

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

換句話說(shuō)，這里是原地操作。

• trim()方法對(duì)開(kāi)頭和結(jié)尾去除所有的空白字符?？瞻鬃址崭?、tabs，換行符，還有其他被視為空格的 Unicode 統(tǒng)一碼字符
• trimStart()方法對(duì)字符串開(kāi)頭去除所有的空白字符。
• trimEnd()方法對(duì)字符串結(jié)尾去除所有的空白字符。

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

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

// 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"

通過(guò)長(zhǎng)度來(lái)修剪 JavaScript 字符串

有時(shí)，你可能想要以具體的長(zhǎng)度來(lái)修剪字符串，而非僅僅移除空格。

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

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

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

這里說(shuō)幾個(gè)使用 slice() 的代碼實(shí)例

// 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() 以具體長(zhǎng)度來(lái)修剪字符串有些優(yōu)點(diǎn)也有缺點(diǎn)，優(yōu)缺點(diǎn)如下:

優(yōu)點(diǎn)：

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

缺點(diǎn)：

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

將 JavaScript 修剪為十個(gè)字符

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

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

// 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"

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

JavaScript在字符后修剪字符串。

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

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

這里有一些使用 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() 方法會(huì)修剪指定字符后的字符串，刪除其后面的所有內(nèi)容。但是，這也意味著它可能會(huì)丟失字符串中的一些重要或相關(guān)信息。因此，您應(yīng)該謹(jǐn)慎使用此方法，并且僅在需要時(shí)使用。 添加 JavaScript 注釋是為了理解功能。

修剪字符處的字符串

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

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

這里有幾個(gè)使用 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ù)量的字符。但是，這也意味著您需要知道要?jiǎng)h除的確切字符數(shù)，但情況可能并非總是如此。

修剪字符之前的字符串

有時(shí)，您可能希望在指定字符（例如逗號(hào)、點(diǎn)或空格）之前修剪字符串。這對(duì)于刪除字符串中某個(gè)定界符或分隔符之前不需要的或不必要的部分非常有用。

要在 JavaScript 中修剪字符之前的字符串，可以同時(shí)使用 lastIndexOf() 和 slice() 方法。 lastIndexOf() 方法返回字符串中最后一次出現(xiàn)的指定字符的索引。如果沒(méi)有找到該字符，則返回-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() 方法會(huì)修剪指定字符之前的字符串，刪除其前面的所有內(nèi)容。

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

有時(shí)，您可能想要截?cái)嘧址⒃谀┪蔡砑邮÷蕴?hào) (…)，例如當(dāng)您想要?jiǎng)?chuàng)建摘要、指示截?cái)嗷蛟鰪?qiáng)美觀時(shí)。省略號(hào)是由三個(gè)點(diǎn) (...) 組成的標(biāo)點(diǎn)符號(hào)，通常用于表示某些內(nèi)容被省略或遺漏。

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

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

// 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() 方法修剪字符串并在末尾添加省略號(hào)，創(chuàng)建一個(gè)新字符串。但是，這也意味著您需要指定要提取的子字符串的長(zhǎng)度，但情況可能并非總是如此。

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

• 創(chuàng)建摘要：修剪字符串并添加省略號(hào)可以幫助您創(chuàng)建較長(zhǎng)文本（例如博客文章、新聞文章或書(shū)籍）的簡(jiǎn)短摘要。
• 指示截?cái)啵盒藜糇址⑻砑邮÷蕴?hào)可以幫助您指示字符串已被截?cái)嗷蚯袛?，例如?dāng)您想要將字符串適合有限的顯示區(qū)域或格式時(shí)。
• 增強(qiáng)美觀性：修剪字符串并添加省略號(hào)可以幫助您增強(qiáng)字符串的美觀性或外觀，例如當(dāng)您想要?jiǎng)?chuàng)建吸引人的標(biāo)題、口號(hào)或引言時(shí)。

總結(jié)

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

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

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

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

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

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