js substr、substring和slice使用说明小记


Posted in Javascript onSeptember 15, 2011

关于substr、substring和slice方法区别的文章,网上搜到了许多,文章内容也基本一致。而后,我将其中一篇文章中的代码挪到本地进行了测试,发现测试结果和原文中的有些出入。

我更相信自己亲自验证过后的代码,随后小记下来,供以后查阅。

substr

document.write("|" + str.substr(0,5) + "|" + "<br />"); 
document.write("|" + str.substr(0) + "|" + "<br />"); 
document.write("|" + str.substr(5,1) + "|" + "<br />"); 
document.write("|" + str.substr(-5,2) + "|" + "<br />"); 
document.write("|" + str.substr(-2,-5) + "|" + "<br />");

打印效果

|12345|
|123456|
|6|
IE: |12| Chrome: |23|

substring

document.write("|" + str.substring(0,5) + "|" + "<br />"); 
document.write("|" + str.substring(0) + "|" + "<br />"); 
document.write("|" + str.substring(5,1) + "|" + "<br />"); 
document.write("|" + str.substring(-5,2) + "|" + "<br />"); 
document.write("|" + str.substring(-2,-5) + "|" + "<br />"); 
document.write("|" + str.substring(2,-5) + "|" + "<br />");

打印效果
|12345|
|123456|
|2345|
|12|

|12|
slice

document.write("|" + str.slice(0,5) + "|" + "<br />"); 
document.write("|" + str.slice(0) + "|" + "<br />"); 
document.write("|" + str.slice(5,1) + "|" + "<br />"); 
document.write("|" + str.slice(-5,2) + "|" + "<br />"); 
document.write("|" + str.slice(-2,-5) + "|" + "<br />"); 
document.write("|" + str.slice(2,-5) + "|" + "<br />");

打印效果
|12345|
|123456|

|2|

||
如果你预想的结果和打印效果完全一致,那你的基本功一定不赖。如果多少有点犹豫或者结果出乎你的意料,那我的文章多少也有点用处了。

总结

substr

该方法的arg2和其它两个方法的arg2压根就代表不同意义,所以单独揪出来。

当arg1<0时,不同浏览器的结果不同。IE 直接将arg1改成0, Chrome 下标读取方式由原来的从左往右读改成从右往左读

substring和slice

(1)arg2 > arg1,即参数2大于参数1时

substring:自动颠倒位置,数值大的在arg2位置上,数值小的在arg1位置上
slice:返回空字符串

(2)对负数的处理

substring:将数值为负数的参数转换为0
slice:将数值为负数的参数转换为(字符串长度-参数数值)

Javascript 相关文章推荐
推荐一些非常不错的javascript学习资源站点
Aug 29 Javascript
json原理分析及实例介绍
Nov 29 Javascript
JavaScript子窗口ModalDialog中操作父窗口对像
Dec 11 Javascript
js图片自动切换效果处理代码
May 07 Javascript
js实现幻灯片播放图片示例代码
Nov 07 Javascript
鼠标滑在标题上显示图片的JS代码
Nov 19 Javascript
JavaScript验证Email(3种方法)
Sep 21 Javascript
jQuery购物网页经典制作案例
Aug 19 Javascript
JS日期对象简单操作(获取当前年份、星期、时间)
Oct 26 Javascript
Bootstrap导航条学习使用(一)
Feb 08 Javascript
Angular.js实现多个checkbox只能选择一个的方法示例
Feb 24 Javascript
解决Vue调用springboot接口403跨域问题
Sep 02 Javascript
javascript 闭包
Sep 15 #Javascript
用JQuery模仿淘宝的图片放大镜显示效果
Sep 15 #Javascript
document.getElementById介绍
Sep 13 #Javascript
动态创建样式表在各浏览器中的差异测试代码
Sep 13 #Javascript
contains和compareDocumentPosition 方法来确定是否HTML节点间的关系
Sep 13 #Javascript
jQuery中使用了document和window哪些属性和方法小结
Sep 13 #Javascript
从jQuery.camelCase()学习string.replace() 函数学习
Sep 13 #Javascript
You might like
php缩放图片(根据宽高的等比例缩放)实例介绍
2013/06/09 PHP
Linux下PHP安装mcrypt扩展模块笔记
2014/09/10 PHP
推荐25款php中非常有用的类库
2014/09/29 PHP
apache php mysql开发环境安装教程
2016/07/28 PHP
Extjs 3.3切换tab隐藏相应工具栏出现空白解决
2013/04/02 Javascript
Javascript模块化编程详解
2014/12/01 Javascript
轻松使用jQuery双向select控件Bootstrap Dual Listbox
2015/12/13 Javascript
Nodejs获取网络数据并生成Excel表格
2020/03/31 NodeJs
BootStrap学习系列之Bootstrap Typeahead 组件实现百度下拉效果(续)
2016/07/07 Javascript
原生js实现jquery函数animate()动画效果的简单实例
2016/08/21 Javascript
老生常谈Javascript中的原型和this指针
2016/10/09 Javascript
JavaScript实现Fly Bird小游戏
2016/12/15 Javascript
详解angularjs的数组传参方式的简单实现
2017/07/28 Javascript
jQuery菜单实例(全选,反选,取消)
2017/08/28 jQuery
vue的style绑定background-image的方式和其他变量数据的区别详解
2018/09/03 Javascript
Vue中的作用域CSS和CSS模块的区别
2018/10/09 Javascript
vue 实现左右拖拽元素并且不超过他的父元素的宽度
2018/11/30 Javascript
微信公众号H5支付接口调用方法
2019/01/10 Javascript
解决layui页面按钮点击无反应,也不报错的问题
2019/09/29 Javascript
python引入导入自定义模块和外部文件的实例
2017/07/24 Python
Python使用MD5加密算法对字符串进行加密操作示例
2018/03/30 Python
django页面跳转问题及注意事项
2019/07/18 Python
使用 tf.nn.dynamic_rnn 展开时间维度方式
2020/01/21 Python
使用Keras实现Tensor的相乘和相加代码
2020/06/18 Python
基于CentOS搭建Python Django环境过程解析
2020/08/24 Python
Python系统公网私网流量监控实现流程
2020/11/23 Python
猫途鹰英国网站:TripAdvisor英国(旅游社区和旅游评论)
2016/08/30 全球购物
成都思必达公司C#程序员招聘面试题
2013/06/26 面试题
经典洗发水广告词
2014/03/13 职场文书
取保候审保证书
2014/04/30 职场文书
2014年英语工作总结
2014/12/20 职场文书
二年级学生期末评语
2014/12/26 职场文书
学生检讨书怎么写
2015/05/07 职场文书
欠条样本
2015/07/03 职场文书
十一月早安语录:把心放轻,人生就是一朵自在的云
2019/11/04 职场文书
解决spring.thymeleaf.cache=false不起作用的问题
2022/06/10 Java/Android