前言
在前端开发过程中，对JS相关的字符串处理可谓是家常便饭，对字符串对处理也是前端开发过程中使用频率非常高的知识点之一，对从后台获取到的字符串进行二次处理也是非常普遍的需求，那么本文就来分享一下在前端开发过程中对字符串截取处理相关的知识点。
知识点
关于在JS中截取字符串的方法有三种：substring()、substr()、slice()。这三种方法在平时开发过程中可能都用到过，但是对于这些方法的具体使用和区别会有点蒙圈，尤其是方法substring()和substr()，二者非常相似，那么接下来就来具体的看一下异同点。
相同点
substring()、substr()、slice()这三个方法都可以对JS中的字符串进行截取处理，并且返回一个新的字符串，也就是说它们不会对原字符串进行修改。
不同点
substring()、substr()、slice()这三个方法的不同之处在于参数的不同，那么接下来就来分享一下具体的不同点对比。
一、substring()方法
语法：string.substring(from, to)
定义和用法：
substring() 方法用于提取字符串中介于两个指定下标之间的字符。
substring() 方法返回的子串包括“开始”处的字符，但不包括“结束”处的字符。
释义：substring()方法从 from 位置截取到 to 位置，to 可选择，没有设置时默认到字符串的最末尾。
参数：
参数
描述
from
必需。一个非负的整数，规定要提取的子串的第一个字符在 string 中的位置。
to
可选。一个非负的整数，比要提取的子串的最后一个字符在 string 中的位置多 1。如果省略此参数，那么返回的子串会一直到字符串的结尾。
说明
1.substring() 方法返回的子串包括 start 处的字符，但不包括 stop 处的字符；
2.若 start 与 stop 相等，则该方法返回的就是一个空字符串（即长度为 0 的字符串）；
3若 start 比 stop 大，则该方法在提取子串之前会先交换这两个参数；
4.若 start 和 stop 有负数，则会把该参数自动转为0，然后继续进行上述的规则；
5.若 start 和 stop 有正小数，则会把该参数向下取整，然后继续进行上述的规则；
6.若 start 和 stop 有字符串，则会先进行parseInt()，如果转换结果为NaNa，那么就转换为0，其余情况继续进行上述的规则。
示例：
1、
string.substring(4) “<br>” //从第5个字符开始截取到字符串的最末尾
2、
string.substring(4,10); // 从第5个字符开始截取到第10个字符
3、
var a = ‘0123456789’; a.substring(1,5); // 从第2个字符开始截取到第5个字符 输出结果：”1234″
4、
var a = ‘0123456789’; a.substring(1,1); // start 与 stop 相等,输出结果：””
5、
var a = ‘0123456789’;a.substring(5,1);//start比stop大，但是最后的输出结果还是：”1234″
6、
var a = ‘0123456789’; a.substring(5,-1); //start 和 stop 有负数，但是最后的输出结果还是：”1234″
7、
var a = ‘0123456789’; a.substring(5,2.4) ; // start 和 stop 有正小数, 但是最后的输出结果是：”234″
8、
var a = ‘0123456789’;a.substring(5,’2.4’);//start和stop有字符串,但是最后的输出结果是：”234″a.substring(5,’hh’) ; // start 和 stop 有字符串, 但是最后的输出结果是：”234″
二、substr()方法
语法：string.substr(start,length)
定义和用法：
substr() 方法可在字符串中抽取从“开始”下标开始的指定数目的字符。
注意：substr() 方法不会改变源字符串。
释义：substr() 的参数指定的是子串的开始位置和长度，因此它可以替代 substring() 和 slice() 来使用。
参数
参数
描述
start
必需。要抽取的子串的起始下标。必须是数值。如果是负数，那么该参数声明从字符串的尾部开始算起的位置。也就是说，-1 指字符串中最后一个字符，-2 指倒数第二个字符，以此类推。
length
可选。子串中的字符数。必须是数值。如果省略了此参数，那么返回从 string 的开始位置到结尾的字串。
返回值
类型
描述
String
A new string containing the extracted part of the text
说明
该方法与substring()最大的区别在于第二个参数是需要截取字符串的长度，而不是位置。
1.substr() 方法返回的子串从 start 处的字符开始（包括）往后截取length长度，如果超过最末端就到最末端结束；
2.start可以取负值，表示从字符串尾部往头部开始数（从右到左，注意是从1开始，比如-1 指字符串中最后一个字符），但截取长度还是从左到右，若超过最末端，则就到最末端结束；
3.若length为负值，则会直接当成0处理，最终返回””；
4.若start或者length为小数，则会截取小数部分；
5.若 start 和 length 有字符串，则会先进行parseInt()，若转换结果为NaNa，则就转换为0，其余情况继续按照上述规则执行。
示例：
1、
str.substr(4,6); // 从第4个字符开始截取6个字符
2、
var str=”Hello world!”;var n=str.substr(3); //第3个字符开始截取到字符串的最末尾 输出结果：lo world!
3、
var a = ‘0123456789’; a.substr(1,5); // 从第1个字符开始截取6个字符， 输出结果：”12345″ a.substr(1,15); //从第1个字符开始截取，只会到最末端，长度写多了也没用， 输出结果：”123456789″
4、
var a = ‘0123456789’; a.substr(-4,2); //-4表示从右开始数第4个，就是’6’，然后取2个长度的字符串，就是’67’ ，输出结果：”67″
5、
var a = ‘0123456789’; a.substr(4,-2); // length为负值，则会直接当成0处理， 输出结果：””
6、
var a = ‘0123456789’; a.substr(1.2,5.2); // start或者length为小数 ， 输出结果：”12345″
7、
var a = ‘0123456789’; a.substr(‘aa’,’5′) ; // start 和 length 有字符串 ，输出结果：”01234″
三、slice()方法
语法：string.slice(start,end)
定义和用法：
slice()方法可提取字符串的某个部分，并以新的字符串返回被提取的部分。
注意：
使用 start（包含） 和 end（不包含） 参数来指定字符串提取的部分。
释义：
slice(start,end) 方法用于提取字符串的某个部分（从参数 start 到 end 位置），并以新的字符串返回被提取的部分。类似 substring()。
参数
参数
描述
start
必须。要抽取的片断的起始下标，第一个字符位置为 0。如果为负数，则从尾部开始截取。
end
可选。紧接着要截取的片段结尾的下标。若未指定此参数，则要提取的子串包括 start 到原字符串结尾的字符串。如果该参数是负数，那么它规定的是从字符串的尾部开始算起的位置。slice(-2) 表示提取原数组中的倒数第二个元素到最后一个元素（包含最后一个元素）。
返回值
类型
描述
String
提取的字符串
说明
该方法的两个参数均为位置坐标，与subtring()比较像，区别就是该方法支持负数，并且不会交换位置，始终是从start到end，如果该区间不存在，那么返回”。
1.slice() 方法返回的子串包括 start 位置的字符，但不包括 end 位置的字符；
2.当start或者end为负值时，定位方式和substr()相同，从右往左数，从1开始；
3.start到end的顺序始终是从左到右，如果最终start的位置在end的右边，那么返回“”；
4.其他情况和substring()处理方式相同，这里不再赘述。
示例：
1、
str.slice(4) “<br>” ; // 从第 5 个字符开始截取到末尾
2、
str.slice(4,10); // 从第 5 个字符开始截取到第10个字符
3、
var a = ‘0123456789’; a.slice(1,5); // 从第 2个字符开始截取到第5个字符，输出结果：”1234″
4、
var a = ‘0123456789’; a.slice(1,-1); //start或者end为负值时，起始点从第1（包括）开始，结束点为从右往左数第1个（不包括） ，输出结果：”12345678″
5、
var a = ‘0123456789’; a.slice(2,1); // start 比 stop 大，2所在的位置是’2’，1所在的位置是’1’，方向相反，返回为空，输出结果：”” a.slice(-2,1); //start或者end为负值时，-2所在的位置是’8’，1所在的位置是’1’，方向相反，返回为空，输出结果：”” a.slice(-2,-1); //start或者end为负值时，-2所在的位置是’8’，-1所在的位置是’9’，方向正常， 输出结果：”8″
6、
var a = ‘0123456789’; a.slice(‘xx’,’5.5’); // start 和 end 有字符串， 输出结果：”01234″
总结
通过上述对比分析得出结论，substring()不支持负值，但是substr()和slice()支持负数，而且是从右边第一位开始计数；substr()的第二个参数表示的是长度，这是它和其他两种方式最大不同；slice()有非常强的方向性，它是从start=>end对应左=>右。这就是上述在JS中截取字符串的三种方法的具体的异同点，具体使用操作还是要根据实际业务需求来操作。
