JS里 slice,subString,substr方法参数传入负值时如何变化

简介三种方法

最近在项目中使用了slice方法,不小心参数写出负数的,结果出来不一样的效果。
就干脆对JS里数组和字符串的slice方法,substring方法和substr方法传入负值时的不同规律整理一番出来,记录下来。

这三个方法都是在一些场景下用来取字符串或者数组的一部分的
首先对这个三个方法作简单的说明

  • slice方法: arrayObject/stringObject.slice(start,end)
    -参数传入:开始和结束的位置(即索引,从0开始)
    -返回:开始位置和结束位置之间的字符串/数组部分
    注意:
    1. 返回的部分包含start位置上元素,但是不包含end位置的元素
    2. 当第二个参数省略时,则默认是返回从指定的开始位置到末尾(包含最后一个)
    3. 该方法不改变原数组/字符串
  • substring方法:
    stringObject.substring(start,end)
    -- 和slice方法基本一样,都是返回指定两个下标位置之间的部分;都不包含end位置的字符
    -- 和slice方法不同点:
    slice方法均分别适用于字符串和数组
    substring方法只适用于字符串,不适应于数组
    比如:以下代码会报错,因为c1是数组,没有substring方法
    会报错,因为c1是数组,没有substring方法
  • substr方法:
    stringObject.substr(start,length)
    -参数传入:截取的开始位置和长度
    -返回:包含从 stringObject 的 start(包括 start 所指的字符) 处开始的 length 个字符。
    -注意:
    • substr方法也和 substring方法 一样只适用于字符串,不适应于数组;一样是不改变原字符串

三种方法传入参数为负数时

slice(start, end) 方法参数为负数

==当slice方法的参数为负数时,则其先加上字符串/数组的长度==

  1. 若第一个参数(表start位置)或者第二个参数(表end位置)为负数,则其对应的索引是这个参数加上字符串的长度
  2. 当负数参数都加上字符串长度变为正数后,==若第一个参数(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即返回空字符串;第一个参数为负数即从右到左取第一个开始位置

以上是个人小小总结,若有不对的敬请提出,一起交流

你可能感兴趣的:(JS里 slice,subString,substr方法参数传入负值时如何变化)