在实际应用中，我们有时候会遇到“JS截取字符串常用方法有几种，存在什么区别呢?”这样的问题，我们该怎样来处理呢？下文给大家介绍了解决方法，希望这篇“JS截取字符串常用方法有几种，存在什么区别呢?”文章能帮助大家解决问题。

js中有三个截取字符的方法，分别是substring()、substr()、slice()，平时我们可能都用到过，但总是会对这些方法有点混淆，特别是substring()和substr()，连方法名都差不多，下面就具体来看一下区别。

相同点

这三个方法都可以对字符串进行截取，并且返回一个新的字符串，也就是不会对原字符串进行修改 。

这里 > 表示控制台输入，< 表示控制台输出，下同：

//chrome控制台
> var a = '0123456789'
< undefined
> a.substr(1,5)
< "12345"
> a
< "0123456789"  //没有发生改变

不同点

这三个方法的不同之处在于参数不同。

substring

substring() 方法用于提取字符串中介于两个指定下标之间的字符。

语法

string.substring(start,stop)

参数

参数	描述
​ ​start​​	必需。一个 非负的整数 ，规定要提取的子串的第一个字符在string​​中的位置。
​ ​stop​​	可选。一个 非负的整数 ，比要提取的子串的最后一个字符在​string​​中的位置多 1。 如果省略该参数，那么返回的子串会一直到字符串的结尾。

说明

1.substring() 方法返回的子串包括 start 处的字符，但不包括 stop 处的字符。

//chrome控制台
> var a = '0123456789'
< undefined
> a.substring(1,5)
< "1234"

2.如果参数 start 与 stop 相等，那么该方法返回的就是一个空串(即长度为 0 的字符串)。

//chrome控制台
> var a = '0123456789'
< undefined
> a.substring(1,1)
< ""

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

//chrome控制台
> var a = '0123456789'
< undefined
> a.substring(5,1) 
//=>a.substring(1,5)
< "1234"

4.如果 start 和 stop 有负数，那么会把该参数自动转为0，然后继续上述规则。

//chrome控制台
> var a = '0123456789'
< undefined
> a.substring(5,-1) 
//=> a.substring(5,0) 
//=> a.substring(0,5)
< "1234"

5.如果 start 和 stop 有正小数(负数直接进行第4条)，那么会把该参数向下取整，然后继续上述规则。

//chrome控制台
> var a = '0123456789'
< undefined
> a.substring(5,2.5) 
//=> a.substring(5,2) 
//=> a.substring(2,5)
< "234"

6.如果 start 和 stop 有字符串，那么会先进行parseInt()，如果转换结果为NaN，那么就转换为0，其余情况继续上述规则。

//chrome控制台
> var a = '0123456789'
< undefined
> a.substring(5,'2.5') 
//=> a.substring(5,2) 
//=> a.substring(2,5)
< "234"
> a.substring(5,'ss') 
//=> a.substring(5,NaN) 
//=> a.substring(5,0) 
//=> a.substring(0,5)
< "01234"

其他情况就没有一一测试了，当然正常情况下尽量不要这么干，毕竟语法上已经规定了是整数。

substr

substr() 方法可在字符串中抽取从 start 下标开始的指定数目的字符。

语法

string.substr(start,length)

参数

参数	描述
start	必需。要抽取的子串的起始下标。必须是数值。如果是负数，那么该参数声明从字符串的尾部开始算起的位置。也就是说，-1 指字符串中最后一个字符，-2 指倒数第二个字符，以此类推。
length	可选。子串中的字符数。必须是数值。如果省略了该参数，那么返回从string的开始位置到结尾的字串。

说明

该方法与substring()最大的区别在于第二个参数是你需要截取字符串的长度，而不是位置。

1.substr() 方法返回的子串从 start 处的字符开始(包括)往后截取length长度，如果超过最末端就到最末端结束。

//chrome控制台
> var a = '0123456789'
< undefined
> a.substr(1,5)
< "12345"
> a.substr(1,15) 
// 只会到最末端，多了没用
< "123456789"

2.start可以取负值，表示从字符串尾部往头部开始数(从右到左，注意是从1开始，比如-1 指字符串中最后一个字符)，但是截取长度还是从左到右，如果超过最末端就到最末端结束。

//chrome控制台
> var a = '0123456789'
< undefined
> a.substr(-4,2) 
// -4表示从右开始数第4个，就是'6'，然后取2个长度的字符串，就是'67'
< "67"

3.如果length为负值，那么会直接当成0处理，最终返回""。

//chrome控制台
> var a = '0123456789'
< undefined
> a.substr(4,-2) 
//=> a.substr(4,0)
< ""

4.如果start或者length为小数，那么会截取小数部分。

//chrome控制台
> var a = '0123456789'
< undefined
> a.substr(1.2,5.2) 
//=> a.substr(1,5)
< "12345"

5.如果 start 和 length 有字符串，那么会先进行parseInt()，如果转换结果为NaN，那么就转换为0，其余情况继续上述规则。

//chrome控制台
> var a = '0123456789'
< undefined
> a.substr('aa','5') 
//=> a.substr(0,5)
< "01234"

slice

slice() 方法可提取字符串的某个部分，并以新的字符串返回被提取的部分。

语法

string.slice(start,end)

参数

参数	描述
start	必须。要抽取的片断的起始下标。如果是负数，则该参数规定的是从字符串的尾部开始算起的位置。也就是说，-1 指字符串的最后一个字符，-2 指倒数第二个字符，以此类推。
end	可选。紧接着要抽取的片段的结尾的下标。若未指定此参数，则要提取的子串包括start到原字符串结尾的字符串。如果该参数是负数，那么它规定的是从字符串的尾部开始算起的位置。

说明

该方法的两个参数均为位置坐标，和subtring比较像，区别就是该方法支持负数，并且不会交换位置，始终是从start到end，如果该区间不存在，那么返回''。

1.slice() 方法返回的子串包括 start 处的字符，但不包括end 处的字符。

//chrome控制台
> var a = '0123456789'
< undefined
> a.slice(1,5)
< "1234"

2.当start或者end为负值时，定位方式和substr一，从右往左数，从1开始。

//chrome控制台
> var a = '0123456789'
< undefined
> a.slice(1,-1)
//起始点从第1（包括）开始，结束点为从右往左数第1个（不包括）
< "12345678"

3.start到end的顺序始终是从左到右，如果最终start的位置在end的右边，那么返回''。

//chrome控制台
> var a = '0123456789'
< undefined
> a.slice(2,1)
//2所在的位置是'2'，1所在的位置是'1'，从2=>1，方向相反，返回为空
< ""
> a.slice(-2,1)
//-2所在的位置是'8'，1所在的位置是'1'，从8=>1，方向相反，返回为空
< ""
> a.slice(-2,-1)
//-2所在的位置是'8'，-1所在的位置是'9'，从8=>9，方向正常，返回为'8'
< "8"

4.其他情况和substring处理方式一致 。

//chrome控制台
> var a = '0123456789'
< undefined
> a.slice('xx','5.5')
// => a.slice(0,5)
< "01234"

总结一下

从上面测试得出结论，substring不支持负值，其他两种方式均支持负数表示，并且是从右边第一位开始计数。

substr的第二个参数是长度，这是和其他两种方式最大的不同之处。

slice的方向性比较强，永远是从start=>end对应左=>右。

到此这篇关于“JS截取字符串常用方法有几种，存在什么区别呢?”的文章就介绍到这了,更多相关JS截取字符串常用方法有几种，存在什么区别呢?内容，欢迎关注群英网络，小编将为大家输出更多高质量的实用文章！

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• JavaScript正则表达式的用法是什么？

  JavaScript正则表达式的用法是什么？在实际的项目中，常常会使用到JavaScript正则表达式，对此这篇文章就给大家来分享一下JavaScript正则表达式的使用，对新手学习JavaScript正则表达式有一定的帮助，需要的朋友可以参考。

• JS的特点及与Java的区别是什么

  本篇文章给大家带来了关于javascript的相关知识，其中主要整理了引入的相关问题，Javascript是一种由Netscape(网景)的LiveScript发展而来的原型化继承的面向对象的动态类型的区分大小写的客户端脚本语言，下面一起来看一下，希望对大家有帮助。

• JS中所有字符串转换大写的方法是什么？

  这篇文章给大家分享的是JS中所有字符串转换大写的方法，小编觉得挺实用的，因此分享给大家做个参考，本文使用了toUpperCase()和toLocaleUpperCase()这两个方法，有需要的朋友可以参考，接下来就跟随小编一起了解看看吧。

• JS数字精度丢失有什么影响，该如何解决呢？

  一文教会你解决js数字精度丢失问题 目录 一.关于为什么要解决精度丢失 二.怎么解决js的计算精度丢失问题? 三.toPrecision 特定方法返回四舍五入长度字符串 结语 一.关于为什么要解决精度丢失 可以看下例子,因为js失去精度问题也是常见的问题,正常我们可以四舍五入或者 toFixed保留小数这种去解决 现在遇到问题是我们明知道计算结果是等于0.01的但是最后的结果确实true,如果我们遇到运算问题,小数数值比对问题,那么我们就必须要去解决他,否则也就会出现上者情况,出现逻辑判断出错问题 二.怎么解决js的计算精度丢失问

• js怎样实现分解数字？教你三个办法

  对于新手来说，非负整数n的阶乘是比较难理解的一个算法，对此，这篇文章给大家分享的是有关js如何实现分解数字的内容、下面会介绍使用递归分解一个数字、使用WHILE循环分解一个数字和使用FOR循环分解数字。