JavaScript中字符串截取substring/substr/slice方法总结

  最近整前台总多多少少遇到一些字符串截取的小问题，忍不住仔细看了下。接下来总结一下javascript中字符串截取方法的一些应用经验和区别。看了其他博主也有写到，各有风格况且只是个人随记，自己体会的才最深刻。 一些看似简单深究又大有文章的东西弄懂了你才知道自己所学甚浅，部分内容是w3cSchool原文，然后增加了自己的总结和见解。看完有兴趣的也可以去官网查看。

以下为总结： 

var str = "0123456789"; //此字符串为上下文举例用

一、stringObject.substring(start,stop) ： 提取字符串中两个指定的索引号之间的字符。 (w3school定义)  

　　1.截取索引start和stop之间的字符，字符长度为(stop-start)。  

　　2.索引从字符串左侧数0开始，字符串包括[start,stop)即包括start不包括stop。   

　　　　例： var ss = str.substring(1,5);

　　　　　　//ss为1234 包括索引为1位置的字符串，不包括索引为5位置的字符窜。字符串长度为5-1=4

　　3.如果参数 start 与 stop 相等，那么该方法返回的就是一个空串。  

　　4.如果 start 比 stop 大，那么该方法在提取字符串之前会先交换这两个参数。   

　　　　例： str.substring(5, 2) = str.substring(2, 5)  

　　5.如果start或stop出现负数，则先将负数转为0 再执行第4条，最后执行字符串截取。   

　　　　例：str.substring(3, -5) → str.substring(3, 0) → str.substring(0, 3) // 结果为 012  

　　6.参数stop可省略，省略的情况下从start开始截取到字符串最后。   

　　　　例：str.substring(5); //结果为 56789  

  如果亲自尝试的话会发现substring无非就是截取两个索引之间的字符串，遇到负数直接变为0。看起来顺序都可以直接忽略，即使start > stop 他也会自行排序，至于这么写会不会影响执行效率，我就没有深究啦，无聊的时候有兴趣的可以研究一下。  

二、stringObject.slice(start,end) ： 方法可提取字符串的某个部分，并以新的字符串返回被提取的部分。(w3school定义)  

  w3school的定义我只理解了前半部分，slice（）方法不止可以操作字符串对象，也可以操作arrayObject也就是数组对象，基于我们再次只说明字符串截取，数组就略过了（下面附了官网链接）。  

　　1.截取索引start和stop之间的字符，字符长度为(stop-start)。 [效果同substring]  

　　2.索引从0开始,字符串包括[start,stop)即包括start不包括stop。 [效果同substring]  

　　3.如果参数 start 与 stop 相等，那么该方法返回的就是一个空字符串。 [效果同substring]  

　　4.参数stop可省略，省略的情况下从start开始截取到字符串最后。 [效果同substring]  

　　5.如果 start 比 stop 大，此处不会进行排序，截取的结果为""空字符串。   

　　　　例： str.slice(5, 1);   //结果为 ""  

　　6.如果start为负数，则该参数规定的是从字符串的尾部开始算起的位置。也就是说，-1 指字符串的最后一个字符，-2 指倒数第二个字符，以此类推。   

　　　　例： str.substring(-2); //结果为 89 （9索引为-1 8索引为-2， stop省略时截取到最后则为，从8开始到最后为89）  

　　7.如果stop是负数，那么它规定的是从字符串的尾部开始算起的位置，同第6条。   

　　　　例： str.substring(-5,-4);  //结果为 5  

　　8.以下例子：   

　　　　str.substring(5, 8); //结果为 "567"   

　　　　str.substring(5, 3); //结果为 ""   

　　　　str.substring(-5,8); //结果为 "567"   

　　　　str.substring(-5,3); //结果为 ""   

　　　　str.substring(-5,-3); //结果为 "56"   

  因为涉及到负数的时候会从字符串末尾开始找索引的情况，这会使整体看起来有点复杂，所以我更愿意用索引的位置来解释。slice（）看起来就像是一个抓住索引位置认死理的方法，我就是只截取start位置和stop位置之间的部分，如果stop的位置在start之前则为空字符串，在start的位置之后才会截取。所以用数数就可以解决slice()方法所有的情况，正数就从前面数，负数就从末尾数，在满足start在前stop在后的情况下，取[start, stop)的部分就可以了。  

三、stringObject.substr(start,length) ： 在字符串中抽取从 start 下标开始的指定数目的字符。 (w3school定义)  

  跟前两个不一样的地方在于，他不是获取两字索引之间的字符串，如定义，是从某个索引开始截取length长度的字符串。  

　　1.start参数为截取开始的索引位置，正数从左侧数0开始，负数则从右侧数-1开始。往右侧截取长度为length的字符串。   

　　　　例： str.substr(2, 5); //结果为 23456 长度为5  

　　2.如果参数length省略，则从索引start开始，截取到字符串结尾。  

　　3.当参数length为负数时，则转化为0，所以当length为负数或0时，截取的结果均为""空字符串。    

官网提示：  

重要事项：ECMAscript 没有对该方法进行标准化，因此反对使用它。    

重要事项：在 IE 4 中，参数 start 的值无效。在这个 BUG 中，start 规定的是第 0 个字符的位置。在之后的版本中，此 BUG 已被修正。

最后还有几点个人的友情提示：  

　　1.substring情况下，如果stop超过字符串长度，运行中stop为字符串长度，则截取到字符串最后。   

　　　　例： str.substring(-3, 20);  //实际上效果等同于str.substring(0, 10)或str.substring(0)  

　　2.slice的索引超出字符串长度时。   

　　　　例：str.slice(-20, 20);  //等于 str.slice(-10,10)或str.slice(0,10)或str.slice(-10)或str.slice(0)     

　　　　    str.slice(-5, 20);  //等于 str.slice(-5,10)或str.slice(-5)  

　　3.substr情况下。   

　　　　例：str.substr(-15, 5); //等于str.substr(0,5);  

  其他情况都是基于以上的方法转换，小于最小的时候取最小，大于最大的时候取最大。搞清楚基本情况随机应变就可以了。

  我在网络上看到substr()方法后面总是写着（不建议使用），具体的原因我不大清楚，但还是因人而已，总之搞清楚了，选择自己喜欢的就好。我只觉得花了时间看以前只是模糊使用的方法，会让自己更清晰，也希望有人有兴趣能解答我上面的疑问。 以上均为个人整理的资料，有想清晰方法的点以下链接进官网。

w3cSchool官网地址： http://www.w3school.com.cn/index.html javaScript操作字符串对象网址： http://www.w3school.com.cn/jsref/jsref_obj_string.asp slice（）方法操作数组： http://www.w3school.com.cn/jsref/jsref_slice_array.asp