关于slice()、substr()、substring()方法

3,110 阅读4分钟

今天咱们来聊聊 String 类型提供的三个方便而又非常相似的截取方法:

  1. slice()
  2. substr()
  3. substring()

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

  1. 功能:都是截取字符串,并且都返回一个新的字符串

  2. 参数:都支持接受两个参数,第一个参数都是代表截取的开始位置。第二个参数除了 substr() ,其他两个 slice()substring() 都是代表截取的结束位置

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

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() 的话,不会对两个参数进行对比,如果第一个参数大于第二个参数,会直接返回空字符串

总结

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

  1. slice() 两个参数分别代表着截取的开头和结尾,而 substr() 的第二个参数则代表着截取的位数(即长度),substring() 先对两个参数进行大小对比,再确定截取区域

  2. 三个方法如果截取到末尾,便会停止截取,无论参数约定的结束位置、或约定的长度有多大。

  3. 当参数为负数的情况:slice() 会把负数与字符串的长度相加,得到的正数再执行代码。substr() 第一个参数也是把负数与字符串的长度相加得到正数,第二个参数则会把负数转为 0substring() 则会把所有负数参数转为 0