深入浅析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 相关文章推荐
使用基于jquery的gamequery插件做JS乒乓球游戏
Jul 31 Javascript
JS实现图片翻书效果示例代码
Sep 09 Javascript
浅析JavaScript中的typeof运算符
Nov 30 Javascript
jquery的父子兄弟节点查找示例代码
Mar 03 Javascript
手机号码,密码正则验证
Sep 04 Javascript
jQuery中attr()方法用法实例
Jan 05 Javascript
JavaScript简单获取页面图片原始尺寸的方法
Jun 21 Javascript
AngularJS 实现JavaScript 动画效果详解
Sep 08 Javascript
JS实现颜色梯度与渐变效果完整实例
Dec 30 Javascript
JavaScript+Html5实现按钮复制文字到剪切板功能(手机网页兼容)
Mar 30 Javascript
解决js ajax同步请求造成浏览器假死的问题
Jan 18 Javascript
通过vue刷新左侧菜单栏操作
Aug 06 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.MVC的模板标签系统(四)
2006/09/05 PHP
PHP正确解析UTF-8字符串技巧应用
2012/11/07 PHP
使用PHP Socket写的POP3类
2013/10/30 PHP
php获取从百度搜索进入网站的关键词的详细代码
2014/01/08 PHP
PHP的error_reporting错误级别变量对照表
2014/07/08 PHP
jQuery实现的鼠标滑过弹出放大图片特效
2016/01/08 Javascript
javaScript数组迭代方法详解
2016/04/14 Javascript
基于ajax与msmq技术的消息推送功能实现代码
2016/12/26 Javascript
老生常谈combobox和combotree模糊查询
2017/04/17 Javascript
快速解决vue-cli不能初始化webpack模板的问题
2018/03/20 Javascript
Java设计中的Builder模式的介绍
2018/03/22 Javascript
vue 中动态绑定class 和 style的方法代码详解
2018/06/01 Javascript
vue实现一个炫酷的日历组件
2018/10/08 Javascript
Node.js从字符串生成文件流的实现方法
2019/08/18 Javascript
Vue js with语句原理及用法解析
2020/09/03 Javascript
python学习笔记--将python源文件打包成exe文件(pyinstaller)
2018/05/26 Python
Python实现的个人所得税计算器示例
2018/06/01 Python
Python3匿名函数用法示例
2018/07/25 Python
python实现自动网页截图并裁剪图片
2018/07/30 Python
python实现决策树分类
2018/08/30 Python
Python运行不显示DOS窗口的解决方法
2018/10/22 Python
Django 权限认证(根据不同的用户,设置不同的显示和访问权限)
2019/07/24 Python
python判断变量是否为int、字符串、列表、元组、字典的方法详解
2020/02/13 Python
你应该知道的30个css选择器
2014/03/19 HTML / CSS
英国最大的邮寄种子和植物公司:Thompson & Morgan
2017/09/21 全球购物
法国设计制造的扫帚和刷子:Andrée Jardin
2018/12/06 全球购物
Ariat英国官网:为世界顶级马术运动员制造最优质的鞋类和服装
2020/02/14 全球购物
金融专业个人的自我评价
2013/10/18 职场文书
出国留学介绍信
2014/01/13 职场文书
预备党员政审材料
2014/02/04 职场文书
百货商场楼层班组长竞聘书
2014/03/31 职场文书
党员创先争优心得体会
2014/09/11 职场文书
2014年重阳节敬老活动方案
2014/09/16 职场文书
学校纪律作风整改措施思想汇报
2014/10/11 职场文书
JUnit5常用注解的使用
2021/07/02 Java/Android
青岛市的收音机研制与生产
2022/04/07 无线电