浅析 String 类型的 slice()、substr()、substring()方法，slicesubstr

浅析 String 类型的 slice()、substr()、substring()方法，slicesubstr

今天咱们来聊聊 String 类型提供的三个方便而又非常相似的截取方法：
1. slice()
2. substr()
3. substring()

它们的相似体现在两个方面：

let str = 'abcdefg';
let sli = str.slice(2);
let sub = str.substr(2);
let subs = str.substring(2);

上面这段代码体现的就是上面提到的第三个共同点：

都只接收一个参数的情况下，都是从起始位置一致截取到末尾。

即他们的输出结果都是：cdefg

哎哟，这么一看，还真挺像的！那他们的不同之处呢？

上代码 ——-

// 还是上面的例子，咋们加上第二个参数

let str = 'abcdefg';
let sli = str.slice(2, 5);  // 'cde'
let sub = str.substr(2, 5);  // 'cdefg'
let subs = str.substring(2, 5);  // 'cde'

通过上面这段代码，我们可以很容易发现 substr 的叛逆个性：第二个参数代表的并不是截取的结束位置。而是截取字段的长度。

那如果截取的结束位置超过字符串末位的索引，会发生什么情况呢，会报错吗？

好奇心驱使我修改了一下代码：

let str = 'abcdefg';
let sli = str.slice(2, 10);  // 'cdefg'
let sub = str.substr(2, 10);  // 'cdefg'
let subs = str.substring(2, 10);  // 'cdefg'

这三个方法很强大，并没有因为我们的无理要求而报出错误，为了验证截取的长度是否溢出，逐个 console.log 了一下他们的 length 长度，都是 5 ，没问题

如果起始位置大于字符串长度的情况：

let str = '12345';
let sli = str.slice(6, 8);  // ''
let sub = str.substr(6, 2);  // ''
let subs = str.substring(6, 8);  // ''

很显然，当初始位置大于字符串长度时，截取的为空字符串 ''

所以这三个方法，当截取到末尾时，便会停止截取，不会往后面加上空格

以上是其中两种特殊的情况，还有一种情况就是，参数为负数的情况：

这种情况下三个方法的表现各不相同，我们分开讨论下

1. 先看看 slice() 的情况

let str = '12345';
let sli1 = str.slice(-3, 4);  // '34'
let sli1 = str.slice(3, -1);  // '4'
let sli1 = str.slice(-3, -1);  // '34'

可以看出 slice() 方法会将传入的负数与字符串的长度相加，将其转为正数的情况，如 str.slice(-3, 4) 就相当于 str.slice(2, 4)

2. 之后是 substr() 的情况

let str = '12345';
let sli1 = str.substr(-3, 2);  // '34'
let sli1 = str.substr(3, -1);  // ''
let sli1 = str.substr(-3, -1);  // ''

substr() 第一个参数也是将传入的负数与字符串长度相加，转为正数。重点是第二个参数，如果是负数则会默认截取的长度为 0。所以最后两条语句都返回了空字符串 ''

3. 最后是 substring() 的表现

let str = '12345';
let sli1 = str.substring(-3, 3);  // '123'
let sli1 = str.substring(3, -1);  // '123'
let sli1 = str.substring(-3, -1);  // ''

这段代码中，我们发现了两点：

（1）substring() 会把接收到的负数，全部转为 0 再进行截取。

（2）接收两个参数时，该方法会先对比两个参数的大小（如有负数会先处理再比较），把较小的一方当做截取的开始位置，较大一方当做截取的结束位置

尤其是第二点特征，slice() 的话，不会对两个参数进行对比，如果第一个参数大于第二个参数，会直接返回空字符串

总结

通过分析了他们在不同参数情况下的表现，最后把他们进行一个小小的总结：
相同点在文章开头已经总结，接下来是区别：