JS字符串截取方法大全

从现在开始，我们要努力学习啦！今天我给大家带来《JS截取字符串的几种方法》，感兴趣的朋友请继续看下去吧！下文中的内容我们主要会涉及到等等知识点，如果在阅读本文过程中有遇到不清楚的地方，欢迎留言呀！我们一起讨论，一起学习！

substring() 方法通过指定起始和结束索引（可选）截取子字符串，若起始索引大于结束索引会自动交换参数，例如 str.substring(0, 5) 返回 "Hello"；2. slice() 方法支持负数索引，便于从字符串末尾开始截取，如 str.slice(-6) 返回 "world!"，且当起始索引大于结束索引时返回空字符串；3. substr() 方法因被标记为遗留特性且存在跨浏览器兼容性问题，不推荐在新代码中使用；4. 处理 Unicode 字符时需注意索引应指向有效的 UTF-16 代码单元边界，避免截取不完整字符；5. 避免常见错误的方法包括牢记索引从 0 开始、区分各方法对负数索引的处理差异，并通过单元测试验证结果正确性。

在 JavaScript 中，截取字符串主要有三种方法：substring()、slice() 和 substr()。它们各有特点，选择哪个取决于你的具体需求。

substring()、slice() 和 substr()

如何使用 substring() 方法？

substring() 方法接受两个参数：起始索引和结束索引（可选）。它会返回从起始索引到结束索引（不包括结束索引）之间的子字符串。如果省略结束索引，则会截取到字符串末尾。一个需要注意的点是，如果起始索引大于结束索引，substring() 会自动交换这两个参数。这在某些情况下会很有用，但有时也可能导致意想不到的结果。

例如：

let str = "Hello, world!";
let subStr = str.substring(0, 5); // "Hello"
let subStr2 = str.substring(7); // "world!"
let subStr3 = str.substring(5, 0); // "Hello" (自动交换参数)

slice() 方法的优势是什么？

slice() 方法与 substring() 类似，也接受起始索引和结束索引作为参数。但它有一个重要的区别：slice() 可以接受负数索引。负数索引表示从字符串末尾开始计数。例如，-1 表示最后一个字符，-2 表示倒数第二个字符，依此类推。这使得从字符串末尾截取子字符串变得非常方便。

let str = "Hello, world!";
let subStr = str.slice(0, 5); // "Hello"
let subStr2 = str.slice(-6); // "world!"
let subStr3 = str.slice(7, -1); // "world"

如果起始索引大于结束索引，slice() 会返回一个空字符串。

substr() 方法是否已经过时？

substr() 方法接受两个参数：起始索引和要截取的字符数（长度）。虽然 substr() 在某些情况下也很有用，但它已经被标记为“遗留特性”，不建议在新的代码中使用。因为 substr() 的行为在不同的 JavaScript 引擎中可能存在差异，这可能导致跨浏览器兼容性问题。

let str = "Hello, world!";
let subStr = str.substr(0, 5); // "Hello"
let subStr2 = str.substr(7, 5); // "world"

如何处理 Unicode 字符？

对于包含 Unicode 字符的字符串，substring()、slice() 和 substr() 方法都能正常工作，因为它们都是基于 UTF-16 编码的。然而，需要注意的是，JavaScript 中的字符串是 UTF-16 编码的，这意味着每个字符可能占用 1 个或 2 个代码单元。因此，在使用这些方法时，需要确保索引指向的是有效的代码单元边界，否则可能会导致截取到不完整的字符。

如何避免常见的字符串截取错误？

一个常见的错误是忘记字符串的索引是从 0 开始的。另一个错误是混淆 substring() 和 slice() 的行为，特别是当使用负数索引时。为了避免这些错误，建议在编写代码时仔细检查索引的范围，并充分理解每个方法的特性。此外，可以使用单元测试来验证字符串截取的正确性。

理论要掌握，实操不能落！以上关于《JS字符串截取方法大全》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！