JS 中 String 的字符串截取 substr 和 substring 区别的快速记忆方法

摘要

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):

详细区别

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

substring 方法

substring 方法用于从原始字符串中提取子字符串，并返回提取的子字符串。它接受两个参数：起始索引和结束索引。

const str = 'Hello, world!';

console.log(str.substring(1, 4)); // 输出: 'ell'
console.log(str.substring(4, 1)); // 输出: 'ell'（参数会被自动调整为从小到大的顺序）
console.log(str.substring(7));    // 输出: 'world!'（如果省略第二个参数，则提取到字符串的末尾）

substring 方法返回从起始索引到结束索引之间的子字符串。如果省略第二个参数，则提取从起始索引到字符串末尾的所有字符。如果任一参数为负数或不是数字，则会被视为0。

substr 方法

substr 方法也用于从原始字符串中提取子字符串，但它的参数略有不同。substr 方法接受两个参数：起始索引和要提取的字符数。

const str = 'Hello, world!';

console.log(str.substr(1, 4)); // 输出: 'ello'
console.log(str.substr(7));    // 输出: 'world!'（如果省略第二个参数，则提取从起始索引到字符串末尾的所有字符）

与 substring 不同，substr 方法的第二个参数是要提取的字符数，而不是结束索引。如果省略第二个参数，则提取从起始索引到字符串末尾的所有字符。如果起始索引为负数，则会从字符串的末尾开始计数。