深入浅析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里访问SharePoint列表数据的实现方法
May 22 Javascript
javascript实现瀑布流自适应遇到的问题及解决方案
Jan 28 Javascript
JavaScript判断对象是否为数组
Dec 22 Javascript
javascript如何实现360度全景照片问题汇总
Apr 04 Javascript
基于Bootstrap的Metronic框架实现条码和二维码的生成及打印处理操作
Aug 29 Javascript
Angularjs手动解析表达式($parse)
Oct 12 Javascript
jQuery ajax动态生成table功能示例
Jun 14 jQuery
详解webpack 打包文件体积过大解决方案(code splitting)
Apr 10 Javascript
微信小程序在地图选择地址并返回经纬度简单示例
Dec 03 Javascript
Vue项目部署的实现(阿里云+Nginx代理+PM2)
Mar 26 Javascript
JS实现指定区域的全屏显示功能示例
Apr 25 Javascript
Javascript 模拟mvc实现点餐程序案例详解
Dec 24 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 Mssql操作简单封装支持存储过程
2009/12/11 PHP
php下将图片以二进制存入mysql数据库中并显示的实现代码
2010/05/27 PHP
关于php mvc开发模式的感想
2011/06/28 PHP
PHP实现图片的等比缩放和Logo水印功能示例
2017/05/04 PHP
PHP实现的字符串匹配算法示例【sunday算法】
2017/12/19 PHP
浅谈Laravel POST,PUT,PATCH 路由的区别
2019/10/15 PHP
js 与或运算符 || && 妙用
2009/12/09 Javascript
js操作二级联动实现代码
2010/07/27 Javascript
jQuery方法简洁实现隔行换色及toggleClass的使用
2013/03/15 Javascript
利用JS来控制键盘的上下左右键(示例代码)
2013/12/14 Javascript
js键盘上下左右键怎么触发function(实例讲解)
2013/12/14 Javascript
基于JS实现的笛卡尔乘积之商品发布
2016/05/13 Javascript
js HTML5 Canvas绘制转盘抽奖
2020/09/13 Javascript
jQuery实现花式轮播之圣诞节礼物传送效果
2016/12/25 Javascript
Jqprint实现页面打印
2017/01/06 Javascript
100行代码理解和分析vue2.0响应式架构
2017/03/09 Javascript
Angualrjs和bootstrap相结合实现数据表格table
2017/03/30 Javascript
jQuery插件开发发送短信倒计时功能代码
2017/05/09 jQuery
全面解析Node.js 8 重要功能和修复
2017/06/02 Javascript
JavaScript中严格判断NaN的方法
2018/02/16 Javascript
layui实现table加载的示例代码
2018/08/14 Javascript
详解JavaScript事件循环机制
2018/09/07 Javascript
JS实现动态星空背景效果
2019/11/01 Javascript
JS实现手风琴特效
2020/11/08 Javascript
WebPack工具运行原理及入门教程
2020/12/02 Javascript
[04:50]2019DOTA2高校联赛秋季赛四强集锦
2019/12/27 DOTA
Python下的twisted框架入门指引
2015/04/15 Python
Python实现导出数据生成excel报表的方法示例
2017/07/12 Python
python函数与方法的区别总结
2019/06/23 Python
python读取.mat文件的数据及实例代码
2019/07/12 Python
python 如何用urllib与服务端交互(发送和接收数据)
2021/03/04 Python
门卫岗位职责
2013/11/15 职场文书
公司保密承诺书
2014/03/27 职场文书
纪律教育月活动总结
2014/08/26 职场文书
复兴之路观后感
2015/06/02 职场文书
《灰雀》教学反思
2016/02/19 职场文书