简介三种方法
最近在项目中使用了slice方法,不小心参数写出负数的,结果出来不一样的效果。
就干脆对JS里数组和字符串的slice方法,substring方法和substr方法传入负值时的不同规律整理一番出来,记录下来。
这三个方法都是在一些场景下用来取字符串或者数组的一部分的
首先对这个三个方法作简单的说明
- slice方法:
arrayObject/stringObject.slice(start,end)
-参数传入:开始和结束的位置(即索引,从0开始)
-返回:开始位置和结束位置之间的字符串/数组部分
注意:- 返回的部分包含start位置上元素,但是不包含end位置的元素
- 当第二个参数省略时,则默认是返回从指定的开始位置到末尾(包含最后一个)
- 该方法不改变原数组/字符串
- substring方法:
stringObject.substring(start,end)
-- 和slice方法基本一样,都是返回指定两个下标位置之间的部分;都不包含end位置的字符
-- 和slice方法不同点:
slice方法均分别适用于字符串和数组。
substring方法只适用于字符串,不适应于数组
比如:以下代码会报错,因为c1是数组,没有substring方法
- substr方法:
stringObject.substr(start,length)
-参数传入:截取的开始位置和长度
-返回:包含从 stringObject 的 start(包括 start 所指的字符) 处开始的 length 个字符。
-注意:- substr方法也和 substring方法 一样只适用于字符串,不适应于数组;一样是不改变原字符串
三种方法传入参数为负数时
slice(start, end) 方法参数为负数
==当slice方法的参数为负数时,则其先加上字符串/数组的长度==
- 若第一个参数(表start位置)或者第二个参数(表end位置)为负数,则其对应的索引是这个参数加上字符串的长度
- 当负数参数都加上字符串长度变为正数后,==若第一个参数(start)大于等于第二个参数(end)==,则取不到任何字符或数组,返回空字符串 "" / 空数组 []
var c1 = [1,2,3,4,5,6,7,8];
var c2 = c1.slice(1,-5);
console.log(c2); //[2,3]
// [1,2,3,4,5,6,7,8].slice(1,-5) 第二个参数-5为负数,则先加上长度8,即相当于[1,2,3,4,5,6,7,8].slice(1,3) 等于[2,3]
var c3 = c1.slice(-3)
console.log(c3) //[6,7,8]
// c1.slice(-3)相当于c1.slice(5)
var s1 = "abcdef";
var s2 = s1.slice(-4,7)
console.log(s2); // "cdef"
// 同理 字符串长度为6,"abcdef".slice(-4,7)相当于"abcdef".slice(2,7)
//注意:这里有个小点:7已经大过字符串的最大索引5了(从0开始),但是不会报错的,也不会显示undefined的。即第二个参数(end位置)大于字符串最大位置时,则默认是取到字符串末尾。
var c3 = ["a","b","c","d","e","f"]
var c4 = c3.slice(-2,-4)
console.log(c4) // ""
//两个参数均小于0,先加上字符串长度6 c3.slice(-2,-4)相当于c3.slice(4,2),则开始的坐标还大结束的坐标,所以只能取到空字符串,返回""
substring(start, end)方法传入参数为负数时
==当substring方法的参数为负数时,对应索引为0==
(无论是第一个参数还是第二个参数)
然后再从较小数开始取,较大数结束
【此时则不一定第一个参数为开始参数,第二个参数为结束参数】
var s1 = "12345678";
var s2 = s1.substring(3,-5)
console.log(s2); // "123"
// s1.substring(3,-5),则第二个参数-5置为0,则相当于s1.substring(0,3)
var s3 = s1.substring(-2,-4)
console.log(s3); // ""
//相当于s1.substring(0,0)
substr(start, length)方法传入参数为负数时
==1. substr()第二个参数为负数,返回空字符串""==
当substring方法的第二个参数为负数时,会将其转换为0,由于第二个参数是代表选取的个数,0则不会取任何字符,因此无论第一个参数是正还是负,均返回空字符 ""
var s1 = "12345678";
var s2 = s1.substr(3,-5)
console.log(s2); // ""
var s3 = s1.substr(-3,-5)
console.log(s3); // ""
==2. substr()第一个参数为负数:从右到左==
第一个参数为负,则开始位置start从原字符的右到左取
比如-1表示从右到左方向的第一个(原字符串最后一个字符),-2表示从右到左方向第二个(原字符串最后倒数第二个字符)......
注意:只是取字符串的开始位置是从右到左确定,但是取字符串时还是从左到右(不懂的话看下面例2)
(若第一个参数为正,则是一般情况下的从左到右,0表示从左到右第一个字符,1表示从左到右第二个字符)
//例1
var s1 = "12345678";
var s2 = s1.substr(4,3) //从索引4的位置开始取3个字符
console.log(s2); // "567"
//例2
var s3 = s1.substr(-4,3) // -4从右到左找到第四个是4,然后按从左到右取3个字符
console.log(s3); // "456"
总结
对于负值传参:
- 对slice方法:加上原来长度(字符串/数组长度)
- 对substring方法:先置为0,然后两个参数中较小数(即0)为取字符的开始位置,较大数为取字符的结束位置
- 对substr:第二个参数为负值,则置为0即返回空字符串;第一个参数为负数即从右到左取第一个开始位置
以上是个人小小总结,若有不对的敬请提出,一起交流