深入浅析JavaScript字符串操作方法 slice、substr、substring及其IE兼容性


Posted in Javascript onDecember 16, 2015

在截取字符串时常常会用到substr()、substring()、slice()方法,有时混淆之间的用法,故总结下。

阅读目录
•slice()
•substring()
•substr()
•总结 

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()方法。

下面给大家介绍slice,substr和substring的区别

首先,他们都接收两个参数,slice和substring接收的是起始位置和结束位置(不包括结束位置),而substr接收的则是起始位置和所要返回的字符串长度。直接看下面例子:

var test = 'hello world';
  alert(test.slice(,));    //o w
  alert(test.substring(,));   //o w
  alert(test.substr(,));   //o world

这里有个需要注意的地方就是:substring是以两个参数中较小一个作为起始位置,较大的参数作为结束位置。

如:

alert(test.substring(7,4));   //o w

接着,当接收的参数是负数时,slice会将它字符串的长度与对应的负数相加,结果作为参数;substr则仅仅是将第一个参数与字符串长度相加后的结果作为第一个参数;substring则干脆将负参数都直接转换为0。测试代码如下:

var test = 'hello world';  
alert(test.slice(-));   //rld  
alert(test.substring(-));  //hello world  
alert(test.substr(-));  //rld  
alert(test.slice(,-));  //lo w  
alert(test.substring(,-)); //hel  
alert(test.substr(,-));  //空字符串

 注意:IE对substr接收负值的处理有错,它会返回原始字符串。

Javascript 相关文章推荐
Javascript实例教程(19) 使用HoTMetal(1)
Dec 23 Javascript
js判断游览器类型及版本号的代码
May 11 Javascript
jQuery入门介绍之基础知识
Jan 13 Javascript
jQuery实现的多屏图像图层切换效果实例
May 07 Javascript
JavaScript给每一个li节点绑定点击事件的实现方法
Dec 01 Javascript
easyui combotree加载静态数据问题(选不上)解决方法
Dec 26 Javascript
vue利用better-scroll实现轮播图与页面滚动详解
Oct 20 Javascript
vue+swiper实现组件化开发的实例代码
Oct 26 Javascript
swiper动态改变滑动内容的实现方法
Jan 17 Javascript
js中怎么判断两个字符串相等的实例
Jan 17 Javascript
JS实现电话号码的字母组合算法示例
Feb 26 Javascript
vue+echarts实现动态折线图的方法与注意
Sep 01 Javascript
js如何判断输入字符串长度
Dec 16 #Javascript
常常会用到的截取字符串substr()、substring()、slice()方法详解
Dec 16 #Javascript
jQuery添加和删除指定标签的方法
Dec 16 #Javascript
详解JavaScript基于面向对象之继承实例
Dec 16 #Javascript
javascript实现拖放效果
Dec 16 #Javascript
js判断手机访问或者PC的几个例子(常用于手机跳转)
Dec 15 #Javascript
Jquery插件easyUi实现表单验证示例
Dec 15 #Javascript
You might like
Php-Redis安装测试笔记
2015/03/05 PHP
WordPress主题制作之模板文件的引入方法
2015/12/28 PHP
在laravel5.2中实现点击用户头像更改头像的方法
2019/10/14 PHP
自定义Laravel (monolog)日志位置,并增加请求ID的实现
2019/10/17 PHP
为jQuery增加join方法的实现代码
2010/11/28 Javascript
基于jquery的loading 加载提示效果实现代码
2011/09/01 Javascript
关于jQuery的inArray 方法介绍
2011/10/08 Javascript
Bootstrap CSS组件之输入框组
2016/12/17 Javascript
Bootstrap模态窗口源码解析
2017/02/08 Javascript
微信小程序开发之自定义tabBar的实现
2018/09/06 Javascript
Vue+Typescript中在Vue上挂载axios使用时报错问题
2019/08/07 Javascript
详解vue中使用axios对同一个接口连续请求导致返回数据混乱的问题
2019/11/06 Javascript
基于JavaScript实现简单的轮播图
2021/03/03 Javascript
python的绘图工具matplotlib使用实例
2014/07/03 Python
Python下使用Psyco模块优化运行速度
2015/04/05 Python
Python与shell的3种交互方式介绍
2015/04/11 Python
在Python中使用成员运算符的示例
2015/05/13 Python
python+selenium识别验证码并登录的示例代码
2017/12/21 Python
详解python使用Nginx和uWSGI来运行Python应用
2018/01/09 Python
python format 格式化输出方法
2018/07/16 Python
python+selenium实现QQ邮箱自动发送功能
2019/01/23 Python
解决Python3用PIL的ImageFont输出中文乱码的问题
2019/08/22 Python
python使用pip安装模块出现ReadTimeoutError: HTTPSConnectionPool的解决方法
2019/10/04 Python
python matplotlib折线图样式实现过程
2019/11/04 Python
在jupyter notebook 添加 conda 环境的操作详解
2020/04/10 Python
英国最大最好的无人机商店:Drones Direct
2019/07/12 全球购物
泰国Robinson百货官网:购买知名品牌的商品
2020/02/08 全球购物
管理专员自荐信
2014/01/26 职场文书
运动会稿件300字
2014/02/14 职场文书
简洁的英文求职信范文
2014/05/03 职场文书
三分钟自我介绍演讲稿
2014/08/21 职场文书
公司感恩节活动策划书
2014/10/11 职场文书
2014年城管个人工作总结
2014/12/08 职场文书
副总经理岗位职责
2015/02/02 职场文书
vue使用v-model进行跨组件绑定的基本实现方法
2021/04/28 Vue.js
MySQL学习之基础命令实操总结
2022/03/19 MySQL