常常会用到的截取字符串substr()、substring()、slice()方法详解


Posted in Javascript onDecember 16, 2015

slice()

定义:接受一个或者两个参数,第一个参数指定子字符串的开始位置。第二个参数表示子字符串的结束位置(不包括结束位置的那个字符),如果没有传递第二个参数,则将字符串的长度作为结束位置。

1、传递参数为正值情况:

var str ="helloWorld";

// 一个参数,则将字符串长度作为结束位置
alert(str.slice(3)); // "loWorld"

// 两个参数,7位置上的字符为"r",但不包括结束位置的字符
alert(str.slice(3,7)); // "loWo"

2、传递参数为负值的情况:

slice()方法会将传入的负值与字符串长度相加。

var str ="helloWorld";

// 一个参数,与字符串长度相加即为slice(7)
alert(str.slice(-3)); // "rld"

// 两个参数,与字符串长度相加即为slice(3,6)
alert(str.slice(3,-4)); // "loW"

3、第二个参数比第一个参数值小的情况:

slice()方法传入的第二个参数比第一个参数小的话,则返回空字符串。

var str ="helloWorld";
alert(str.slice(5,3)); // ""

4、IE兼容性

在IE8浏览器测试下,没啥问题,行为与现代浏览器一致。

substring()

定义:接受一个或者两个参数,第一个参数指定子字符串的开始位置。第二个参数表示子字符串的结束位置(不包括结束位置的那个字符),如果没有传递第二个参数,则将字符串的长度作为结束位置。

1、传递参数为正值情况:与slice()方法行为相同的

var str ="helloWorld";

// 一个参数,则将字符串长度作为结束位置
alert(str.substring(3)); // "loWorld"

// 两个参数,7位置上的字符为"r",但不包括结束位置的字符
alert(str.substring(3,7)); // "loWo"

2、传递参数为负值的情况:

substring()方法会把所有负值参数转换为0。来看下例子:

var str ="helloWorld";

// 两个参数,-4会转换为0,相当于substring(3,0) -->即为 substring(0,3)
alert(str.substring(3,-4)); // "hel"

substring()方法会将较小的数作为开始位置,将较大的数作为结束位置。如上面的例子substring(3,0) 与substring(0,3)是一样效果的。

4、IE兼容性

在IE8浏览器测试下,没啥问题,行为与现代浏览器一致。

substr()

定义:接受一个或者两个参数,第一个参数指定子字符串的开始位置。第二个参数跟之前的方法有些区别,表示返回的字符个数。如果没有传递第二个参数,则将字符串的长度作为结束位置。来看例子:

1、传递参数为正值情况:

var str ="helloWorld";

// 一个参数,则将字符串长度作为结束位置
alert(str.substr(3)); // "loWorld"

// 两个参数,从位置3开始截取后面7个字符
alert(str.substr(3,7)); // "loWorld"

2、传递参数为负值的情况:

substr()方法会将负的第一个参数加上字符串的长度,而将负的第二个参数转换为0。

var str ="helloWorld";

// 将第一个负的参数加上字符串的长度--->
//即为:substr(7,5) ,从位置7开始向后截取5个字符
alert(str.substr(-3,5)); // "rld"

// 将第二个参数转换为0
// 即为:substr(3,0),即从位置3截取0个字符串,则返回空
alert(str.substr(3,-2)); // ""

3、IE兼容性

substr()方法传递负值的情况下会存在问题,会返回原始的字符串。IE9修复了此问题。

总结

在传递正值参数情况下,slice() 和 substring () 行为是一致的,substr()方法在第二个参数上会容易混淆

在传递负值参数情况下,slice() 方法是通过字符串长度相加,符合一般思维,substring()第二个参数转换为0会容易出问题,起始位置会容易变更,

substr() 方法负值情况下会出现IE兼容性问题。

综上,小弟一般推荐使用slice()方法。

Javascript 相关文章推荐
javascritp实现input输入框相关限制用法
Jun 29 Javascript
JS无法捕获滚动条上的mouse up事件的原因猜想
Mar 21 Javascript
uploadify在Firefox下丢失session问题的解决方法
Aug 07 Javascript
jQuery内容折叠效果插件用法实例分析(附demo源码)
Apr 28 Javascript
Jquery给当前页或者跳转后页面的导航栏添加选中后样式的实例
Dec 08 Javascript
BootStrap Table 设置height表头与内容无法对齐的问题
Dec 28 Javascript
JS 仿支付宝input文本输入框放大组件的实例
Nov 14 Javascript
vue注册组件的几种方式总结
Mar 08 Javascript
vue读取本地的excel文件并显示在网页上方法示例
May 29 Javascript
解决vue-photo-preview 异步图片放大失效的问题
Jul 29 Javascript
微信小程序自定义yPicker组件实现省市区三级联动功能
Oct 29 Javascript
nuxt 自定义 auth 中间件实现令牌的持久化操作
Nov 05 Javascript
jQuery添加和删除指定标签的方法
Dec 16 #Javascript
详解JavaScript基于面向对象之继承实例
Dec 16 #Javascript
javascript实现拖放效果
Dec 16 #Javascript
js判断手机访问或者PC的几个例子(常用于手机跳转)
Dec 15 #Javascript
Jquery插件easyUi实现表单验证示例
Dec 15 #Javascript
解决WordPress使用CDN后博文无法评论的错误
Dec 15 #Javascript
JavaScript中Textarea滚动条不能拖动的解决方法
Dec 15 #Javascript
You might like
PHP中的类-什么叫类
2006/11/20 PHP
PHP UTF8中文字符截断函数代码
2012/09/11 PHP
phpmyadmin中禁止外网使用的方法
2014/11/04 PHP
PHP的几个常用加密函数
2016/02/03 PHP
thinkPHP实现将excel导入到数据库中的方法
2016/04/22 PHP
js中call与apply的用法小结
2013/12/28 Javascript
js实现页面跳转重定向的几种方式
2014/05/29 Javascript
理解javascript函数式编程中的闭包(closure)
2016/03/08 Javascript
sso跨域写cookie的一段js脚本(推荐)
2016/05/25 Javascript
underscore之Collections_动力节点Java学院整理
2017/07/10 Javascript
用vue的双向绑定简单实现一个todo-list的示例代码
2017/08/03 Javascript
Angular搜索场景中使用rxjs的操作符处理思路
2018/05/30 Javascript
vue微信分享到朋友圈 vue微信发送给好友
2018/11/28 Javascript
从0到1构建vueSSR项目之路由的构建
2019/03/07 Javascript
如何优雅地取消 JavaScript 异步任务
2020/03/22 Javascript
通过实例解析jQ Ajax操作相关原理
2020/09/23 Javascript
Webpack的Loader和Plugin的区别
2020/11/09 Javascript
原生JS实现京东查看商品点击放大
2020/12/21 Javascript
[01:32]TI奖金增速竟因它再创新高!DOTA2勇士令状不朽珍藏Ⅰ饰品欣赏
2018/05/18 DOTA
Python时间戳使用和相互转换详解
2017/12/11 Python
python  Django中的apps.py的目的是什么
2018/10/15 Python
Python 获取div标签中的文字实例
2018/12/20 Python
Django接收自定义http header过程详解
2019/08/23 Python
python GUI库图形界面开发之PyQt5中QWebEngineView内嵌网页与Python的数据交互传参详细方法实例
2020/02/26 Python
python 识别登录验证码图片功能的实现代码(完整代码)
2020/07/03 Python
Python Selenium模块安装使用教程详解
2020/07/09 Python
Python通过字典映射函数实现switch
2020/11/06 Python
介绍一下Ruby的多线程处理
2013/02/01 面试题
个人自我评价和职业目标
2014/01/24 职场文书
仓管岗位职责范本
2014/02/08 职场文书
政府绩效管理实施方案
2014/05/04 职场文书
终止或解除劳动合同及劳动关系的证明书
2014/10/06 职场文书
合伙购房协议样本
2014/10/06 职场文书
张丽莉观后感
2015/06/16 职场文书
Golang 如何实现函数的任意类型传参
2021/04/29 Golang
JS前端canvas交互实现拖拽旋转及缩放示例
2022/08/05 Javascript