JavaScript 字符串修剪：内置方法与高级技巧详解

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

在编写 JavaScript 代码时，你是否曾遇到过需要比较或处理字符串，但首尾存在多余空格的情况？这并非个例，许多 JS 开发者都面临过如何去除字符串首尾多余空格的挑战。这一过程被称为字符串修剪（Trimming）。通过此类处理，可确保字符串内容连续且准确，避免因额外空格引发潜在问题。

本文将展示以下内容：

• JavaScript 中多种字符串修剪方法的使用
• 基于长度、字符或位置进行字符串修剪的技巧
• JavaScript 字符串修剪：长度、字符与位置方法解析
• JavaScript 中不同的字符串修剪策略
• JavaScript 字符串修剪并追加省略号 (...) 的方法

内容略显重复，核心观点大致相同。

让我们开始吧！

JavaScript 字符串修剪方法

JavaScript 提供了三个内置的字符串修剪方法：trim()、trimStart()和trimEnd()。这三个方法均不修改原始字符串，而是返回修剪后的新字符串。

换言之，这些操作并非原地修改。

• trim()方法会去除字符串开头和结尾的所有空白字符。这里的空白字符包括空格、制表符（tabs）、换行符以及其他被视为空格的 Unicode 统一码字符。
• trimStart()方法仅去除字符串开头的所有空白字符。
• trimEnd()方法仅去除字符串结尾的所有空白字符。

这三个方法均不接受任何参数，且使用非常简单。

以下是一个使用这些方法修剪字符串的代码示例：

// 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 字符串

有时，你可能希望按特定长度修剪字符串，而不仅仅是移除空格。

例如，你可能需要缩短长字符串以适应特定显示区域，或为长文本生成摘要。在这些情况下，你可以使用 JavaScript 的 slice() 方法按指定长度修剪字符串。

slice()方法提取字符串的一部分并返回新字符串。该方法接受两个参数：要提取的子字符串的起始索引和结束索引。

• 起始索引包含在截取部分内，而结束索引不包含在内。
• 如果省略结束索引，该方法将从起始索引一直截取到字符串末尾。

以下是几个使用 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() 按特定长度修剪字符串既有优点也有缺点，具体如下：

优点：

• 它非常灵活，允许你精确指定字符串截断的起始索引和结束索引。
• 可以处理从字符串末尾开始计数的负数索引。
• 对任何字符均有效，而不仅限于空格。

缺点：

• JavaScript slice() 方法可能会在字符串中间的单词或句子处截断，这可能会影响字符串的可读性或语义。
• 不会自动添加如省略号之类的指示器来表明字符串已被修剪。
• 需要额外的逻辑或计算来确定 JavaScript 子字符串的最佳长度或索引。

将 JavaScript 字符串修剪为十个字符

有时，你可能希望将字符串修剪至固定长度，例如10个字符，而不关心其原始长度。在 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() 方法可将字符串修剪至十个字符，无论其原始长度如何。但这同时也意味着它可能会从句子中间切断语句，从而影响子串的可读性或意义。因此，应谨慎使用此方法，仅在必要时调用。

在字符后修剪 JavaScript 字符串

有时，你可能希望在特定字符（如逗号、句点或空格）之后修剪字符串。为了在字符后修剪字符串，你可以使用 JavaScript 的 indexOf() 和 slice() 方法。

indexOf() 方法返回指定字符在字符串中第一次出现的索引。如果未找到该字符，则返回 -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() 方法会修剪指定字符后的字符串，删除其后的所有内容。但这同时也意味着可能会丢失字符串中一些重要或相关信息。因此，应谨慎使用此方法，仅在需要时调用。添加 JavaScript 注释有助于理解功能。

在字符处修剪字符串

有时，你可能希望修剪特定字符（如破折号、冒号或斜线）。这可能有助于根据特定分隔符将字符串分为两个或多个部分。为了在字符处修剪字符串，你可以使用 split() 和 join() 方法。

split() 方法使用特定字符将字符串分隔为子字符串数组。它接受一个参数：用作分割器的字符。join() 方法将包含子字符串的数组组合成新字符串。它接受一个参数：用作连接（结合）器的字符。

以下是几个使用 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() 方法从末尾修剪字符串，删除指定数量的字符。但这同时也意味着您需要知道要删除的确切字符数，而这种情况可能并非总是如此。

在字符之前修剪字符串

有时，您可能希望在指定字符（例如逗号、句点或空格）之前修剪字符串。这对于删除字符串中某个定界符或分隔符之前的不需要或不必要的部分非常有用。

要在 JavaScript 中修剪字符之前的字符串，可以同时使用 lastIndexOf() 和 slice() 方法。lastIndexOf() 方法返回字符串中最后一次出现的指定字符的索引。如果未找到该字符，则返回-1。

以下是使用 JavaScript 数组方法 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() 方法会修剪指定字符之前的字符串，删除其前面的所有内容。

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

有时，您可能希望截断字符串并在末尾添加省略号 (…)，例如当您想要创建摘要、指示截断或增强美观时。省略号是由三个点 (...) 组成的标点符号，通常用于表示某些内容被省略或遗漏。

要修剪字符串并在末尾添加省略号，可以同时使用 slice() 和 JavaScript 字符串连接 concat() 方法。concat() 方法连接两个或多个字符串并返回新字符串。它接受一个或多个参数。

以下是使用 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() 方法修剪字符串并在末尾添加省略号，创建一个新字符串。但这同时也意味着您需要指定要提取的子字符串的长度，而这种情况可能并非总是如此。

修剪字符串并在末尾添加省略号可能有一些应用，例如：

• 创建摘要：修剪字符串并添加省略号可以帮助您创建较长文本（例如博客文章、新闻文章或书籍）的简短摘要。
• 指示截断：修剪字符串并添加省略号可以帮助您指示字符串已被截断或切断，例如当您想要将字符串适合有限的显示区域或格式时。
• 增强美观性：修剪字符串并添加省略号可以帮助您增强字符串的美观性或外观，例如当您想要创建吸引人的标题、口号或引言时。

总结

在这篇博文中，我向您展示了如何使用不同的方法和技术在 JavaScript 中修剪字符串。我已经解释了如何使用 trim() 方法从字符串中修剪空格，以及如何使用 slice() 和 concat() 方法修剪字符串并在末尾添加省略号。

我们还讨论了 JavaScript 中修剪字符串的一些含义和应用，例如提高可读性、减少内存使用、匹配模式、创建摘要、指示截断或增强美观。

根据您的目的和情况使用适当的方法。例如，使用 trim() 修剪字符串两边的空格，使用 slice() 和 concat() 修剪字符串并在末尾添加省略号，或者使用其他方法如 trimStart()、trimEnd() 、indexOf()、lastIndexOf()、split() 或 join() 以其他方式修剪字符串。

修剪字符串时请小心，不要丢失或更改字符串的含义或信息。在修剪字符串时添加一些指示符或解释，尤其是在不明显的情况下。

我希望这篇博文能够帮助您学习如何在 JavaScript 中修剪字符串。交给你了，你将如何使用 JavaScript 修剪方法？

以上就是JavaScript修剪字符串的方法和技巧的详细内容，更多关于JavaScript修剪字符串的资料请关注本站其它相关文章！