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方法
  
• 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从右到左找到第四个是5，然后按从左到右取3个字符
console.log(s3); // "567" 

总结

对于负值传参：

• 对slice方法：加上原来长度（字符串/数组长度）
• 对substring方法：先置为0，然后两个参数中较小数（即0）为取字符的开始位置，较大数为取字符的结束位置
• 对substr：第二个参数为负值，则置为0即返回空字符串；第一个参数为负数即从右到左取第一个开始位置

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