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实现自定义标签
May 08 Javascript
jquery实现隐藏与显示动画效果/输入框字符动态递减/导航按钮切换
Jul 01 Javascript
JavaScript按位运算符的应用简析
Feb 04 Javascript
JavaScript实现点击单选按钮改变输入框中文本域内容的方法
Aug 12 Javascript
jQuery实现非常实用漂亮的select下拉菜单选择效果
Nov 06 Javascript
ES6字符串模板,剩余参数,默认参数功能与用法示例
Apr 06 Javascript
JS模拟超市简易收银台小程序代码解析
Aug 18 Javascript
javaScript实现复选框全选反选事件详解
Nov 20 Javascript
vue点击input弹出带搜索键盘并监听该元素的方法
Aug 25 Javascript
jQuery操作事件完整实例分析
Jan 10 jQuery
Vue(定时器)解决mounted不能获取到data中的数据问题
Jul 30 Javascript
vue+elementui通用弹窗的实现(新增+编辑)
Jan 07 Vue.js
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
最贵的咖啡是怎么产生的,它的风味怎么样?
2021/03/04 新手入门
php面向对象全攻略 (九)访问类型
2009/09/30 PHP
2017年最新PHP经典面试题目汇总(上篇)
2017/03/17 PHP
PHPStorm 2020.1 调试 Nodejs的多种方法详解
2020/09/17 NodeJs
Javascript+XMLHttpRequest+asp.net无刷新读取数据库数据
2009/08/09 Javascript
textarea中的手动换行处理的jquery代码
2011/02/26 Javascript
从面试题学习Javascript 面向对象(创建对象)
2012/03/30 Javascript
一个检测表单数据的JavaScript实例
2014/10/31 Javascript
整理Javascript数组学习笔记
2015/11/29 Javascript
使用javaScript实现鼠标拖拽事件
2020/04/03 Javascript
Vue使用vue-area-linkage实现地址三级联动效果的示例
2018/06/27 Javascript
Vant的安装和配合引入Vue.js项目里的方法步骤
2018/12/05 Javascript
浅谈发布订阅模式与观察者模式
2019/04/09 Javascript
解决 viewer.js 动态更新图片导致无法预览的问题
2019/05/14 Javascript
webpack中如何加载静态文件的方法步骤
2019/05/18 Javascript
Vue 中 a标签上href无法跳转的解决方式
2019/11/12 Javascript
easyUI 实现的后台分页与前台显示功能示例
2020/06/01 Javascript
Vue axios获取token临时令牌封装案例
2020/09/11 Javascript
用Python计算三角函数之atan()方法的使用
2015/05/15 Python
python中如何使用正则表达式的集合字符示例
2017/10/09 Python
python如何实现int函数的方法示例
2018/02/19 Python
python批量修改图片后缀的方法(png到jpg)
2018/10/25 Python
python实现简易数码时钟
2021/02/19 Python
Python使用APScheduler实现定时任务过程解析
2019/09/11 Python
Python 函数用法简单示例【定义、参数、返回值、函数嵌套】
2019/09/20 Python
python 实现dict转json并保存文件
2019/12/05 Python
django的模型类管理器——数据库操作的封装详解
2020/04/01 Python
详解Python 中的 defaultdict 数据类型
2021/02/22 Python
css3 border-radius属性详解
2017/07/05 HTML / CSS
深入浅出CSS3 background-clip,background-origin和border-image教程
2011/01/27 HTML / CSS
大学生党课思想汇报
2013/12/29 职场文书
奶茶店创业计划书范文
2014/01/17 职场文书
信用卡工作证明模板
2014/09/14 职场文书
学习党的群众路线教育实践活动剖析材料
2014/10/13 职场文书
研究生就业推荐表导师评语
2014/12/31 职场文书
css3实现背景图片颜色修改的多种方式
2021/04/13 HTML / CSS