js中截取字符串的三个方法 substring()、substr()、slice()

简介: js中截取字符串的三个方法 substring()、substr()、slice()

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.如果参数 startstop 相等,那么该方法返回的就是一个空串(即长度为 0 的字符串)。

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


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

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


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

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


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

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


6.如果 startstop 有字符串,那么会先进行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,2) =>a.substring(5,0) => a.substring(2,5)
< "234"


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


substr

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


语法

string.substr(start,length)

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


参数

参数 描述
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.如果 startlength 有字符串,那么会先进行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比较像,区别就是该方法支持负数,并且不会交换位置,始终是从startend,如果该区间不存在,那么返回''


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"


2.startend的顺序始终是从左到右,如果最终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"


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

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


小节


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


substr的第二个参数是长度,这是和其他两种方式最大的不同之处,slice的方向性比较强,永远是从start=>end对应左=>右


以上结论均在最新谷歌浏览器上测试,IE和火狐未测试。

相关文章
|
1月前
|
前端开发 JavaScript
有没有方法可以保证在JavaScript中多个异步操作的执行顺序?
有没有方法可以保证在JavaScript中多个异步操作的执行顺序?
88 58
|
13天前
|
JavaScript 前端开发 Java
深入理解 JavaScript 中的 Array.find() 方法:原理、性能优势与实用案例详解
Array.find() 是 JavaScript 数组方法中一个非常实用和强大的工具。它不仅提供了简洁的查找操作,还具有性能上的独特优势:返回的引用能够直接影响原数组的数据内容,使得数据更新更加高效。通过各种场景的展示,我们可以看到 Array.find() 在更新、条件查找和嵌套结构查找等场景中的广泛应用。 在实际开发中,掌握 Array.find() 的特性和使用技巧,可以让代码更加简洁高效,特别是在需要直接修改原数据内容的情形。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一
|
13天前
|
移动开发 运维 供应链
通过array.some()实现权限检查、表单验证、库存管理、内容审查和数据处理;js数组元素检查的方法,some()的使用详解,array.some与array.every的区别(附实际应用代码)
array.some()可以用来权限检查、表单验证、库存管理、内容审查和数据处理等数据校验工作,核心在于利用其短路机制,速度更快,节约性能。 博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
13天前
|
供应链 JavaScript 前端开发
通过array.every()实现数据验证、权限检查和一致性检查;js数组元素检查的方法,every()的使用详解,array.some与array.every的区别(附实际应用代码)
array.every()可以用来数据验证、权限检查、一致性检查等数据校验工作,核心在于利用其短路机制,速度更快,节约性能。 博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
4月前
|
监控 JavaScript Java
Node.js中内存泄漏的检测方法
检测内存泄漏需要综合运用多种方法,并结合实际的应用场景和代码特点进行分析。及时发现和解决内存泄漏问题,可以提高应用的稳定性和性能,避免潜在的风险和故障。同时,不断学习和掌握内存管理的知识,也是有效预防内存泄漏的重要途径。
372 62
|
2月前
|
JavaScript 前端开发 开发者
JavaScript字符串的常用方法
在JavaScript中,字符串处理是一个非常常见的任务。JavaScript提供了丰富的字符串操作方法,使开发者能够高效地处理和操作字符串。本文将详细介绍JavaScript字符串的常用方法,并提供示例代码以便更好地理解和应用这些方法。
73 13
|
4月前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
120 5
|
4月前
|
JavaScript 前端开发
JavaScript中的原型 保姆级文章一文搞懂
本文详细解析了JavaScript中的原型概念,从构造函数、原型对象、`__proto__`属性、`constructor`属性到原型链,层层递进地解释了JavaScript如何通过原型实现继承机制。适合初学者深入理解JS面向对象编程的核心原理。
60 1
JavaScript中的原型 保姆级文章一文搞懂
|
8月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
152 2
|
4月前
JS+CSS3文章内容背景黑白切换源码
JS+CSS3文章内容背景黑白切换源码是一款基于JS+CSS3制作的简单网页文章文字内容背景颜色黑白切换效果。
40 0

热门文章

最新文章