你不知道的slice,substr,substring异同

slice(),substr(),substring()是基于基于子字符串创建新字符串的方法,

相同点:

  • 都会返回被操作字符串的一个子字符串

  • 都会接收1·-2个参数

  • 如果没有指定第二个参数,则字符串的末尾作为结束位置

  • 都不会改变原始字符串

不同点:

  • slice(),substring()的第一个参数指定子字符串的开始位置,若指定第二个参数,则第二个参数表示结束位置
    -
  • substr()第一个参数同样指定的是开始位置,若指定第二个参数,第二个参数指定的是返回的字符个数

更多隐形扩展下面~~~

下面根据参数的数量,正负进行归纳,便于记忆:

1.当这三种方法只接受1个参数的情况下:

(1)若此参数为正:

var a = 'www.shaotianyu.com';

console.log(a.slice(3));    //.shaotianyu.com
console.log(a.substr(3));   //.shaotianyu.com
console.log(a.substring(3));    //.shaotianyu.com

(2)若此参数为负:

var a = 'www.shaotianyu.com';

console.log(a.slice(-3))    //com
console.log(a.substr(-3))   //com
console.log(a.substring(-3))    //www.shaotianyu.com

分析:
a.slice(-3)a.substr(-3)返回的结果相同,因为-3会被转化为a.length+(-3),也就是等同调用了a.slice(15)a.substr(15),所以结果返回com
但是substring()方法不同,当它接收参数为负,将会将参数转化为0,也就是说,a.substring(-3) => a.substring(0),所以返回的是整个原始字符串。

2.当这三种方法接受2个参数的情况下:

(1)若参数1为正,参数2为正:

var a = 'www.shaotianyu.com';

console.log(a.slice(4,13))      //shaotiany
console.log(a.substr(4,13))     //shaotianyu.co
console.log(a.substring(4,13))  //shaotiany

分析:
a.slice(4,13),a.substring(4,13)返回的是从位置4开始,位置13结束(不包括13)的子字符串;
a.substr(4,13)返回的是从位置4开始,返回字符个数为13的子字符串,所以返回shaotianyu.co

(2)若参数1为正,参数2为负:

此种情况下,三种方法的行为各不相同。

var a = 'www.shaotianyu.com';

console.log(a.slice(4,-3))      //shaotianyu.
console.log(a.substr(4,-3))     //""
console.log(a.substring(4,-3))      //www.

分析:

上面的demo中,a.slice(4,-3)相当于调用a.slice(4,15),所以返回shaotianyu.

a.substr(4,-3)在接收的第二个参数为负时,也会将第二个参数转化为0,也就是相当于调用a.substr(4,0),意味着返回包含0个字符串的子字符串,也就是空字符串

a.substring(4,-3)会把第二个参数为负时转化为0,转化为a.substring(4,0),不过,这个方法会将较小的数作为开始位置,较大的数转化为结束位置,所以最终相当于调用a.substring(0,4),所以结果返回www.

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值