常常会用到的截取字符串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 相关文章推荐
JavaScript加密解密7种方法总结分析
Oct 07 Javascript
jquery 读取页面load get post ajax 四种方式代码写法
Apr 02 Javascript
JS 有趣的eval优化输入验证实例代码
Sep 22 Javascript
javascript如何动态加载表格与动态添加表格行
Nov 27 Javascript
谷歌浏览器不支持showModalDialog模态对话框的解决方法
Sep 22 Javascript
JSON字符串和JSON对象相互转化实例详解
Jan 05 Javascript
angularjs+bootstrap实现自定义分页的实例代码
Jun 19 Javascript
浅谈ECMAScript6新特性之let、const
Aug 02 Javascript
详细分析JS函数去抖和节流
Dec 05 Javascript
小程序新版订阅消息模板消息
Dec 31 Javascript
微信小程序单选框自定义赋值
May 26 Javascript
Vue单文件组件开发实现过程详解
Jul 30 Javascript
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/11/28 PHP
PHP时间类完整实例(非常实用)
2015/12/25 PHP
谈谈从phpinfo中能获取哪些值得注意的信息
2017/03/28 PHP
PHP基于mcript扩展实现对称加密功能示例
2019/02/21 PHP
PHP哈希表实现算法原理解析
2020/12/11 PHP
点图片上一页下一页翻页效果
2008/07/09 Javascript
Javascript Select操作大集合
2009/05/26 Javascript
JavaScript 数组循环引起的思考
2010/01/01 Javascript
JSON 学习之JSON in JavaScript详细使用说明
2010/02/23 Javascript
jquery mobile 实现自定义confirm确认框效果的简单实例
2016/06/17 Javascript
JS实现淡入淡出图片效果的方法分析
2016/12/20 Javascript
jQuery加密密码到cookie的实现代码
2017/04/18 jQuery
nginx配置React静态页面的方法教程
2017/11/03 Javascript
详解webpack-dev-server的简单使用
2018/04/02 Javascript
BootStrap table实现表格行拖拽效果
2018/12/01 Javascript
JS数组索引检测中的数据类型问题详解
2021/01/11 Javascript
用python写asp详细讲解
2013/12/16 Python
vc6编写python扩展的方法分享
2014/01/17 Python
在Python的Flask框架中使用模版的入门教程
2015/04/20 Python
python实现一次创建多级目录的方法
2015/05/15 Python
Python读取properties配置文件操作示例
2018/03/29 Python
Python中几种属性访问的区别与用法详解
2018/10/10 Python
python在TXT文件中按照某一字符串取出该字符串所在的行方法
2018/12/10 Python
flask框架url与重定向操作实例详解
2020/01/25 Python
Python开发之pip安装及使用方法详解
2020/02/21 Python
在ipython notebook中使用argparse方式
2020/04/20 Python
Python函数参数分类原理详解
2020/05/28 Python
Canvas制作的下雨动画的示例
2018/03/06 HTML / CSS
Asics日本官网:鬼冢八喜郎创立的跑鞋运动品牌
2017/10/18 全球购物
泰国办公用品购物网站:OfficeMate
2018/02/04 全球购物
Theory美国官网:后现代都市风时装品牌
2018/05/09 全球购物
Under Armour安德玛荷兰官网:美国高端运动科技品牌
2019/07/10 全球购物
C/C++ 笔试、面试题目大汇总
2015/11/21 面试题
施工安全协议书
2016/03/22 职场文书
使用Redis实现点赞取消点赞的详细代码
2022/03/20 Redis
科学家研发出新型速效酶,可在 24 小时内降解塑料制品
2022/04/29 数码科技