大家好，我是李俊辉！如果您觉得文章有用，请帮忙点个赞或关注，也为我鼓励一下，坚持写下去！
javascript有很多方法名称相似、功能相似，搞的很多新同学云里雾里，一直处于似懂非懂，不懂又懂的状态（至少我刚学前端前2年是这样的^^||）。主要原因就是懒得花时间整理这些东西，感觉知道是干嘛的就行了。但是当开发碰到问题的时候（特别是字符串或者数组算法问题），往往想不起来到底应该用哪个方法才是更好的选择。始终在心里是个技术结。当你真正踏实下来打算提高自己的时候，这些方法的区别都是你不得不吃透的一块内容。
为此，我准备了八个系列（暂定8个，将来想起来再补充）专门讲解这些让人郁闷的类似功能。
今天先来说说字符串String的三个相似方法：slice，substr，substring的区别。如果你闭上眼睛能很清楚的想明白这三个方法的区别，那本篇文章就不用看了。
我们进入正题，这三个方法都是用来截取字符串，都是基于原字符串创建新字符串的方法。
1.slice()
slice方法是字符串String和数组Array共同都有的一个同名方法。今天我们主要说String，后面的文章会讲解到Array的slice。
slice(start, end)字符串中第一个字符位置索引为 0，最后一位索引为string.length。
截取位置为start到end的前一位字母，比如end是7，那实际截取字母是6。
end可以省略，省略则为字符串最后位置string.length。
start和end参数都可以是负数，如果是负数，从字符串的尾部往前算位置，-1 指字符串的最后一个字符，-2 指倒数第二个字符，以此类推。
看到下面的代码输出，应该就对slice一目了然了。
var str = 'hello world';
console.log(str.slice(3)); //相当于console.log(str.slice(3, str.length));
//输出： 'lo world'
console.log(str.slice(3, 9));
//输出： 'lo wor'
console.log(str.slice(9,3)) //当end索引小于start索引时，无法截取，输出空字符串。
//输出：''
console.log(str.slice(3,-9)) //再一次证明当end索引小于start索引时，无法截取，输出空字符串。
//输出：''
console.log(str.slice(-3,9)) //end比start索引正好大1为
//输出：'r'
console.log(str.slice(3, -1)); //相当于console.log(str.slice(3,10))
//输出：'lo worl'，少最后一个d，因为索引位在d前面。
console.log(str.slice(-3, -9)); //end索引小于start，返回空。
//输出：''
2.substring()
substring与slice方法的参数一样，都是start和end索引。唯一的区别是start和end为负数时，默认会把负数转变为0。 所以substring与slice的区别就是两个参数为负数的时截取结果不同。
看到下面的代码输出，应该就对substring一目了然了。
var str = 'hello world';
console.log(str.substring(3)); //相当于console.log(str.substring(3, str.length));
//输出： 'lo world'
console.log(str.substring(3, 9));
//输出： 'lo wor'
console.log(str.substring(9, 3)); //相当于console.log(str.substring(3, 9));
//输出：'lo wor' //如果end大于start，则end与start互换位置后返回。
console.log(str.substring(-3, 9)); //如果start为负数，end为正数，则返回从0到end位字符串。
//输出：'hello wor'
console.log(str.substring(3, -1)); //如果end为负数，则互换位置，返回从0到start位字符串。
//输出：'hel'
console.log(str.substring(-3, -9)); //如果start为负数，end也为负数，同为0则返回空。
//输出：''
2.substr()
substr也是接受2个参数start和end索引。不过end代表的是要截取的字符长度。
start参数和slice的start功能一样，但end不能为负数，因为长度不可以为负数，end负值会转化为零。
看到下面的代码输出，应该就对substr一目了然了。
var str = 'hello world';
console.log(str.substr(3));
//输出： 'lo world'
console.log(str.substr(3, 5)); //从3开始截取5个字符
//输出： 'lo wo'
console.log(str.substr(5, 3)); //从5开始截取3个字符
//输出：'wo'
console.log(str.substr(-3, 5)); //如果start为负数，则索引为倒数负数值开始截取。
//输出：'rld'
console.log(str.substr(3, -1)); //不接受end为负数，返回空
//输出：''
console.log(str.substr(-3, -5)); //不接受end为负数，返回空
//输出：''
总结：
最后，我们整体看一下他们的共同点和区别，有一个更清楚的分辨。
1.共同点
只传1个参数时，start时，三个方法一样，用哪个都可以。
var str = 'hello world';
console.log(str.slice(3), str.substr(3), str.substring(3));
//输出：'lo world', 'lo world', 'lo world'
2.不同点
- 传入第2个参数，
end时,正数时：
console.log(str.slice(3,5), str.substr(3,5), str.substring(3,5));
//输出：'lo', 'lo wo', 'lo'
- 当传入的
start,end是负数时：
slice()start和end均可以是负数，会把当前的负值加上字符串的长度。如slice(-3),相当于slice(8)。
substring()会把所有的负值转化为零。
substr()start负值会把当前的负值加上字符串的长度，end负值会转化为零（因为end代表长度，截取的字符长度不能为负）。
今天就到这吧，下一节我们讲解js里相似的方法比较系列（二）slice，splice，split方法区别，已发布～！
如果您觉得文章有用，请帮忙点个赞或关注，也为我鼓励一下，坚持写下去，在此感谢！
转载一定注明出处！
原文地址：https://www.jianshu.com/p/7d25d99a83da
2020年2月11日 新冠状病毒期间憋在家