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 相关文章推荐
Exjs 入门篇
Apr 07 Javascript
JS简单实现元素复制示例附图
Nov 19 Javascript
关于js数组去重的问题小结
Jan 24 Javascript
javascript打开word文档的方法
Apr 16 Javascript
Node.js的Web模板引擎ejs的入门使用教程
Jun 06 Javascript
Node.js中路径处理模块path详解
Nov 14 Javascript
微信小程序 devtool隐藏的秘密
Jan 21 Javascript
详解vue-cli + webpack 多页面实例应用
Apr 25 Javascript
jquery图片放大镜效果
Jun 23 jQuery
webstrom Debug 调试vue项目的方法步骤
Jul 17 Javascript
webpack之引入图片的实现及问题
Oct 08 Javascript
layui radio单选限制下一个radio单选的实例
Sep 03 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
PHP5中虚函数的实现方法分享
2011/04/20 PHP
PHP禁止个别IP访问网站
2013/10/30 PHP
PHP 验证登陆类分享
2015/03/13 PHP
PHP多进程编程总结(推荐)
2016/07/18 PHP
PHP合并数组的2种方法小结
2016/11/24 PHP
laravel框架邮箱认证实现方法详解
2019/11/22 PHP
用jQuery实现的智能隐藏、滑动效果的返回顶部代码
2014/03/18 Javascript
javascript常用代码段搜集
2014/12/04 Javascript
JavaScript给url网址进行encode编码的方法
2015/03/18 Javascript
JavaScript中匿名函数用法实例
2015/03/23 Javascript
js实现网页图片延时加载 提升网页打开速度
2016/01/26 Javascript
JS函数的定义与调用方法推荐
2016/05/12 Javascript
Bootstrap中文本框的宽度变窄并且加入一副验证码图片的实现方法
2016/06/23 Javascript
浅谈JS运算符&amp;&amp;和|| 及其优先级
2016/08/10 Javascript
jquery操作select取值赋值与设置选中实例
2017/02/28 Javascript
使用yeoman构建angular应用的方法
2017/08/14 Javascript
Postman动态获取返回值过程详解
2020/06/30 Javascript
解决VUE 在IE下出现ReferenceError: Promise未定义的问题
2020/11/07 Javascript
[01:26]神话结束了,却也刚刚开始——DOTA2新英雄玛尔斯驾临战场
2019/03/10 DOTA
Python中使用PyHook监听鼠标和键盘事件实例
2014/07/18 Python
python脚本实现分析dns日志并对受访域名排行
2014/09/18 Python
python爬虫爬取快手视频多线程下载功能
2018/02/28 Python
python+POP3实现批量下载邮件附件
2018/06/19 Python
Python-接口开发入门解析
2019/08/01 Python
如何表示python中的相对路径
2020/07/08 Python
Python列表嵌套常见坑点及解决方案
2020/09/30 Python
埃弗顿足球俱乐部官方网上商店:Everton Direct
2018/01/13 全球购物
有机童装:Toby Tiger
2018/05/23 全球购物
YOOX台湾:意大利奢侈品电商
2018/10/13 全球购物
C++的几个面试题附答案
2016/08/03 面试题
机电工程学生自荐信范文
2013/12/07 职场文书
统计岗位职责
2014/02/21 职场文书
2015年学习部工作总结范文
2015/03/31 职场文书
二胎满月酒致辞
2015/07/29 职场文书
配置nginx 重定向到系统维护页面
2021/06/08 Servers
win11开机发生死循环重启怎么办?win11开机发生死循环重启解决方法
2022/08/05 数码科技