深入浅析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 相关文章推荐
js中文逗号转英文实现
Feb 11 Javascript
无刷新预览所选择的图片示例代码
Apr 02 Javascript
js实现图片漂浮效果的方法
Mar 02 Javascript
基于jQuery实现收缩展开功能
Mar 18 Javascript
JS出现失效的情况总结
Jan 20 Javascript
详解vue项目首页加载速度优化
Oct 18 Javascript
手写简单的jQuery雪花飘落效果实例
Apr 22 jQuery
使用proxy实现一个更优雅的vue【推荐】
Jun 19 Javascript
详解mpvue中使用vant时需要注意的onChange事件的坑
May 16 Javascript
jquery+php后台实现省市区联动功能示例
May 23 jQuery
vue-router的两种模式的区别
May 30 Javascript
解决包含在label标签下的checkbox在ie8及以下版本点击事件无效果兼容的问题
Oct 27 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
收音机的保养
2021/03/01 无线电
来自phpguru得Php Cache类源码
2010/04/15 PHP
新浪SAE搭建PHP项目教程
2015/01/28 PHP
php利用fsockopen GET/POST提交表单及上传文件
2017/05/22 PHP
身份证号码前六位所代表的省,市,区, 以及地区编码下载
2007/04/12 Javascript
基于jQuery试卷自动排版系统
2010/07/18 Javascript
javascript动画之圆形运动,环绕鼠标运动作小球
2010/07/20 Javascript
基于JS实现的倒计时程序实例
2015/07/24 Javascript
基于cssSlidy.js插件实现响应式手机图片轮播效果
2016/08/30 Javascript
解决Angular.Js与Django标签冲突的方案
2016/12/20 Javascript
jQuery实现圣诞节礼物传送(花式轮播)
2016/12/25 Javascript
bootstrap输入框组使用方法
2017/02/07 Javascript
关于定制FileField中的上传文件名称问题
2017/08/22 Javascript
Vue中v-show添加表达式的问题(判断是否显示)
2018/03/26 Javascript
一个基于react的图片裁剪组件示例
2018/04/18 Javascript
详解vue添加删除元素的方法
2018/06/30 Javascript
解决layui动态添加的元素click等事件触发不了的问题
2019/09/20 Javascript
从零开始在vue-cli4配置自适应vw布局的实现
2020/06/08 Javascript
[13:21]DOTA2国际邀请赛采访专栏:RSnake战队国士无双,Fnatic.Fly
2013/08/06 DOTA
python笔记(2)
2012/10/24 Python
Python实现将SQLite中的数据直接输出为CVS的方法示例
2017/07/13 Python
mvc框架打造笔记之wsgi协议的优缺点以及接口实现
2018/08/01 Python
Python单元和文档测试实例详解
2019/04/11 Python
在python中将list分段并保存为array类型的方法
2019/07/15 Python
利用 CSS3 实现的无缝轮播功能代码
2017/09/25 HTML / CSS
HTML5单页面手势滑屏切换原理分析
2017/07/10 HTML / CSS
Pandora德国官网:购买潘多拉手链、戒指、项链和耳环
2020/02/20 全球购物
高校毕业生自我鉴定
2013/10/27 职场文书
超级搞笑检讨书
2014/01/15 职场文书
优秀教师事迹简介
2014/02/02 职场文书
法律进企业活动方案
2014/03/04 职场文书
自我管理的活动方案
2014/08/25 职场文书
党的群众路线教育实践活动整改落实情况报告
2014/10/28 职场文书
先进事迹材料范文
2014/12/29 职场文书
办公室主任个人总结
2015/02/28 职场文书
nginx配置虚拟主机的详细步骤
2021/07/21 Servers