常常会用到的截取字符串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 相关文章推荐
URI、URL和URN之间的区别与联系
Dec 20 Javascript
博客侧边栏模块跟随滚动条滑动固定效果的实现方法(js+jquery等)
Mar 24 Javascript
jQuery实现动画效果的简单实例
Jan 27 Javascript
js实现选中复选框文字变色的方法
Aug 14 Javascript
jQuery toggle 代替方法
Mar 22 Javascript
BootStrap的table表头固定tbody滚动的实例代码
Aug 24 Javascript
vue.js入门教程之计算属性
Sep 01 Javascript
es7学习教程之fetch解决异步嵌套问题的方法示例
Jul 21 Javascript
react-native 圆弧拖动进度条实现的示例代码
Apr 12 Javascript
Vue resource三种请求格式和万能测试地址
Sep 26 Javascript
浅谈让你的代码更简短,更整洁,更易读的ES6小技巧
Oct 25 Javascript
vue递归实现树形组件
Jul 15 Vue.js
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错误和异长常处理总结
2014/03/06 PHP
yii实现创建验证码实例解析
2014/07/31 PHP
php中文字符串截取多种方法汇总
2016/10/06 PHP
php+redis实现多台服务器内网存储session并读取示例
2017/01/12 PHP
PHP实现批量清空删除指定文件夹所有内容的方法
2017/05/30 PHP
ThinkPHP3.2.3框架邮件发送功能图文实例详解
2019/04/23 PHP
php常用字符串长度函数strlen()与mb_strlen()用法实例分析
2019/06/25 PHP
Firefox和IE浏览器兼容JS脚本写法小结
2008/07/07 Javascript
IE 当eval遇上function的处理
2011/08/09 Javascript
jQuery使用empty()方法删除元素及其所有子元素的方法
2015/03/26 Javascript
jquery插件splitScren实现页面分屏切换模板特效
2015/06/16 Javascript
jquery实现select选择框内容左右移动代码分享
2015/11/21 Javascript
JavaScript电子时钟倒计时第二款
2016/01/10 Javascript
canvas红包照片实例分享
2017/02/28 Javascript
浅谈JS对象添加getter与setter的5种方法
2018/06/09 Javascript
JavaScript eval()函数定义及使用方法详解
2020/07/07 Javascript
three.js 实现露珠滴落动画效果的示例代码
2021/03/01 Javascript
浅谈Python中数据解析
2015/05/05 Python
Python语言的面相对象编程方式初步学习
2016/03/12 Python
JPype实现在python中调用JAVA的实例
2017/07/19 Python
Python打印输出数组中全部元素
2018/03/13 Python
使用python生成目录树
2018/03/29 Python
Anaconda入门使用总结
2018/04/05 Python
python中的变量如何开辟内存
2018/06/26 Python
Python wxpython模块响应鼠标拖动事件操作示例
2018/08/23 Python
python使用ctypes库调用DLL动态链接库
2020/10/22 Python
双语教学实施方案
2014/03/23 职场文书
入党思想汇报怎么写
2014/04/03 职场文书
党日活动总结
2014/05/07 职场文书
党的群众路线教育实践活动总结材料
2014/10/30 职场文书
党员群众路线教育实践活动学习笔记
2014/11/05 职场文书
考试作弊检讨书范文
2015/01/27 职场文书
Oracle 区块链表创建过程详解
2021/05/15 Oracle
Mysql数据库表中为什么有索引却没有提高查询速度
2022/02/24 MySQL
Spring Boot接口定义和全局异常统一处理
2022/04/20 Java/Android
python区块链实现简版工作量证明
2022/05/25 Python