摘要

JS 中 String 的字符串截取 substr 和 substring 两个函数困扰我的从来都不是他们的区别，而是如何记住他们谁是谁，这两家伙很容易混淆。

混淆场景

• substr(startIndex, length): 这个方法返回从 startIndex 开始的长度为 length 的子字符串。如果省略 length，则从 startIndex 开始一直到字符串末尾。如果 startIndex 为负数，它被视为从字符串末尾开始的位置。
• substring(startIndex, endIndex): 这个方法返回从 startIndex 开始到 endIndex（不包括 endIndex）之间的子字符串。如果省略 endIndex，则默认为字符串的末尾。如果 startIndex 大于 endIndex，则 substring() 方法会将参数交换并返回相同的结果。

如果只是截取某个位置到结束，这两个函数是没有区别的，也不用特别记忆，用谁都一样。但是如果截取的是中间的某段，第二个参数就不一样了，两个函数容易记混，每次都得再查一遍文档，确认第二个参数才能确保程序不会有问题。

所以我们容易混淆的就是第二个参数 length endIndex 和 函数 substr substring 的对应关系！

记忆方法

经过我的多次琢磨，终于找到记住他们的方法，就是：比较字符长短 ！。

• substr 和 substring 函数最直观的区别就是一个长一个短
• length 和 endIndex 其实他们表观区别也是一长一短。

那么很容易就得出他们的匹配关系是：短对短，长对长。我们很容易就会把 substr 和 length ，substring 和 endIndex 对应上。

• substr(startIndex, length):
• substring(startIndex, endIndex):

这样就不用每次遇到都去查一遍文档，从而节省时间了。

详细区别

虽然本文重点不是讨论他们的区别，但是既然提到了，还是去爬取一下其他文章的内容。

1. JS 中 string 的 substring 和 substr 的区别

在 JavaScript 中，处理字符串是常见的操作。substring 和 substr 是两个经常被用来截取字符串的方法，但它们之间有一些重要的区别。在 ES6 中，推荐使用 slice 方法，因为 substr 方法在某些浏览器中可能不被支持。但了解 substring 和 substr 的区别仍然对于理解 JavaScript 的历史发展和兼容性问题是有帮助的。

2. substring 方法

substring 方法返回字符串中两个指定的索引号之间的字符。该方法提取从 startIndex（包含）到 endIndex（不包含）之间的所有字符。

语法：

str.substring(indexStart[, indexEnd])

• indexStart：必需。一个非负的整数，规定要提取的子串的第一个字符在 str 中的位置。
• indexEnd：可选。一个非负的整数，比要提取的子串的最后一个字符在 str 中的位置大 1。如果省略该参数，那么返回的子串会一直到字符串的末尾。

示例：

let str = 'Hello, World!';
console.log(str.substring(0, 5)); // 输出 "Hello"
console.log(str.substring(7));    // 输出 "World!"

3. substr 方法

substr 方法返回一个字符串从指定位置开始的指定长度的字符。

语法：

str.substr(start[, length])

• start：必需。所需的子字符串的起始位置。如果是负数，那么它规定的是从字符串尾部开始算起的字符位置。
• length：可选。要返回的字符数。如果省略了该参数，则返回从 start 到字符串结束的所有字符。

示例：

let str = 'Hello, World!';
console.log(str.substr(0, 5)); // 输出 "Hello"
console.log(str.substr(7));    // 输出 "World!"
console.log(str.substr(-1));   // 输出 "!"

4. 区别总结

• 参数含义不同：

  • substring 的两个参数都是索引位置，且都表示子串的边界（第二个参数位置的字符不包括在内）。
  • substr 的第一个参数是起始位置，第二个参数是返回字符串的长度。

• 处理负数参数的方式不同：

  • substring 方法把负数参数当作 0 来处理，因为它只接受非负索引。
  • substr 方法如果第一个参数是负数，则从字符串的尾部开始计算位置。

• 浏览器兼容性：

  • 虽然大部分现代浏览器都支持 substring 和 substr，但 substr 方法在一些老的或非主流的浏览器中可能不被支持。因此，对于需要确保广泛兼容性的代码，使用 substring 或 slice 方法可能更稳妥。

• 推荐使用：

  • 由于 substr 的兼容性问题以及 ES6 中引入了更强大和灵活的 slice 方法，现代 JavaScript 开发中更推荐使用 slice 方法来处理字符串的截取操作。