javascript高级系列之slice()与substring()

在实际开发中，难免会碰到截取字符串中某一段字符的情况，在javascript中提供了两个方法—-slice()和substring();

使用方法（概念）

slice() 与 substring() 都接受一个或两个参数。第一个参数是要获取的子串的起始位置，第二个参数（如果使用的话）是要获取子串终止前的位置（也就是说，获取终止位置处的字符不包括在返回的值内）。如果省略第二个参数，终止位就默认为字符串的长度。

使用实例

    // slice()的使用实例;
    var aSlice = 'i am string';
    var aSlice1 = aSlice.slice('3');
    var aSlice2 = aSlice.slice('3','8');

    console.log(aSlice1); //m string;
    console.log(aSlice2); //m str ;

    //substring()的使用实例;
    var aSub = 'i am string';
    var aSub1 = aSub.substring('3');
    var aSub2 = aSub.substring('3','8');

    console.log(aSub1); //m string;
    console.log(aSub2); //m str ;

---

通过以上两个列子我们发现，slice()与substring()概念和使用方式完全一模一样，并且输出的结果也是一模一样，那这时候我们不免有些奇怪，既然这两个方法一模一样，为什么还要创造两个这样的方法呢？

其实不用想，他们肯定有不一样的地方，看如下列子

---

    // slice()的使用实例;
    var aSlice = 'i am string';
    var aSlice1 = aSlice.slice('-3');
    var aSlice2 = aSlice.slice('3','-8');

    console.log(aSlice1); 
    console.log(aSlice2); 

    //substring()的使用实例;
    var aSub = 'i am string';
    var aSub1 = aSub.substring('-3');
    var aSub2 = aSub.substring('3','-8');

    console.log(aSub1);
    console.log(aSub2);

    // 这里我们先不写出打印结果，大家可以先去实践一下；

对于负数作为参数，slice()是这样处理的，她会用字符串的长度加上参数；比如上述列子就是字符串的长度 10+(-3) = 7;
所以上述slice()第一个例子等同于：

var aSlice1 = aSlice.slice('10+(-3)');
//即var aSlice1 = aSlice.slice(7');
console.log(aSlice1); //ing

slice()第二个例子需要说明一下,因为计算出来的是 var aSlice2 = aSlice.slice(‘3’,’2’);

这样子肯定是不存在，但是slice()方法默认把小的数字作为起点，大的数字作为终点；

如果大的数字超过了字符串的长度，则该终点默认为字符串长度

所有上面的方法应该是这样子 ：

    var aSlice2 = aSlice.slice('2','3');
    console.log(aSlice2) // ;
    // 因为第二位到第三位之间上面都没有，所以上面输出结果为空;如果想验证可以将数值调整调整一下再去输出;

---

再来看substring()是怎么处理负数的，其实substring会直接忽略负数，将它默认为0；

即上述列子会真实的呈现为如下样子

//substring()的使用实例;
var aSub = 'i am string';
var aSub1 = aSub.substring('0');
var aSub2 = aSub.substring('3','0');

console.log(aSub1); // i am string
console.log(aSub2); // i a

注：substring()方法处理其中的参数与slice()方法一样，会默认将小的数字作为起点，大的数字作为终点，如果大数字超过字符串长度，则默认字符串长度为终点；

最后再说一点，如果参数都超过了字符串的长度，则输出为空，今天内容就到这里结束了，感谢大家的阅读

微信搜索关注公众号 【大前端js】，回复vue教程，react教程，webpack实战等等，获得不同的视频教程，大量视频教程等你来拿；阅读公众号最新一篇文章获取更多视频

手打不易，转载时请注明文章出处，非常感谢！