js字符串截取函数slice、substring和substr的比较


Posted in Javascript onMay 17, 2016

在js中字符截取函数有常用的三个slice()、substring()、substr()了,下面我来给大家介绍slice()、substring()、substr()函数在字符截取时的一些用法与区别吧。

取字符串的三个函数:slice(start,[end]),substring(start,[end])和substr(start,[length])
相关属性:
slice()
第一个参数代表开始位置,第二个参数代表结束位置的下一个位置,截取出来的字符串的长度为第二个参数与第一个参数之间的差;若参数值为负数,则将该值加上字符串长度后转为正值;若第一个参数等于大于第二个参数,则返回空字符串.
substring()
第一个参数代表开始位置,第二个参数代表结束位置的下一个位置;若参数值为负数,则将该值转为0;两个参数中,取较小值作为开始位置,截取出来的字符串的长度为较大值与较小值之间的差.
substr()
第一个参数代表开始位置,第二个参数代表截取的长度
PS:字符串都从0开始计起
例子:

<script type="text/javascript">
   var stmp = "rcinn.cn";
   //使用一个参数
   alert(stmp.slice(3));//从第4个字符开始,截取到最后个字符;返回"nn.cn"
   alert(stmp.substring(3));//从第4个字符开始,截取到最后个字符;返回"nn.cn"
   //使用两个参数
   alert(stmp.slice(1,5))//从第2个字符开始,到第5个字符;返回"cinn"
   alert(stmp.substring(1,5));//从第2个字符开始,到第5个字符;返回"cinn"
   //如果只用一个参数并且为0的话,那么返回整个参数
   alert(stmp.slice(0));//返回整个字符串
   alert(stmp.substring(0));//返回整个字符串
   //返回第一个字符
   alert(stmp.slice(0,1));//返回"r"
   alert(stmp.substring(0,1));//返回"r"
   //在上面的例子中我们可以看出slice()和substring()的用法是相同的
   //返回的值也是一样的,但当参数为负数时,他们的返回值却不一样,看下面的例子
   alert(stmp.slice(2,-5));//返回"i"
   alert(stmp.substring(2,-5));//返回"rc"
   //从上面两个例子可以看出slice(2,-5)实际上是slice(2,3)
   //负5加上字符串长度8转换成正3(若第一位数字等于或大于第二位数字,则返回空字符串);
   //而substring(2,-5)实际上是substring(2,0),负数转换为0,substring总是把较小的数作为起始位置。
   alert(stmp.substring(1,5))//从第2个字符开始,到第5个字符;返回"cinn"
   alert(stmp.substr(1,5));//从第2个字符开始,截取5个字符;返回"cinn."
</script>

substr 和 substring方法的区别

<script type="text/javascript"> 
var str = "0123456789";// 
alert(str.substring(0));//------------"0123456789" 
alert(str.substring(5));//------------"56789" 
alert(str.substring(10));//-----------"" 
alert(str.substring(12));//-----------"" 
alert(str.substring(-5));//-----------"0123456789" 
alert(str.substring(-10));//----------"0123456789" 
alert(str.substring(-12));//----------"0123456789" 
alert(str.substring(0,5));//----------"01234" 
alert(str.substring(0,10));//---------"0123456789" 
alert(str.substring(0,12));//---------"0123456789" 
alert(str.substring(2,0));//----------"01" 
alert(str.substring(2,2));//----------"" 
alert(str.substring(2,5));//----------"234" 
alert(str.substring(2,12));//---------"23456789" 
alert(str.substring(2,-2));//---------"01" 
alert(str.substring(-1,5));//---------"01234" 
alert(str.substring(-1,-5));//--------"" 
alert(str.substr(0));//---------------"0123456789" 
alert(str.substr(5));//---------------"56789" 
alert(str.substr(10));//--------------"" 
alert(str.substr(12));//--------------"" 
alert(str.substr(-5));//--------------"0123456789" 
alert(str.substr(-10));//-------------"0123456789" 
alert(str.substr(-12));//-------------"0123456789" 
alert(str.substr(0,5));//-------------"01234" 
alert(str.substr(0,10));//------------"0123456789" 
alert(str.substr(0,12));//------------"0123456789" 
alert(str.substr(2,0));//-------------"" 
alert(str.substr(2,2));//-------------"23" 
alert(str.substr(2,5));//-------------"23456" 
alert(str.substr(2,12));//------------"23456789" 
alert(str.substr(2,-2));//------------"" 
alert(str.substr(-1,5));//------------"01234" 
alert(str.substr(-1,-5));//-----------"" 
</script>

函数:split()
功能:使用一个指定的分隔符把一个字符串分割存储到数组
例子:

str=”jpg|bmp|gif|ico|png”;
arr=theString.split(”|”);
//arr是一个包含字符值”jpg”、”bmp”、”gif”、”ico”和”png”的数组

函数:John()
功能:使用您选择的分隔符将一个数组合并为一个字符串
例子:

var delimitedString=myArray.join(delimiter);
var myList=new Array(”jpg”,”bmp”,”gif”,”ico”,”png”);
var portableList=myList.join(”|”);
//结果是jpg|bmp|gif|ico|png

 函数:indexOf()
功能:返回字符串中匹配子串的第一个字符的下标

var myString=”JavaScript”;
var w=myString.indexOf(”v”);w will be 2
var x=myString.indexOf(”S”);x will be 4
var y=myString.indexOf(”Script”);y will also be 4
var z=myString.indexOf(”key”);z will be -1

在网上看到另一种非常简单的方法,代码如下:

function func(s, n) {


return s.replace(/([^x00-xff])/g, “$1a”).slice(0, n).replace(/([^x00-xff])a/g, “$1″);

}

这个方法非常巧妙,而且基本上是正确的。说“基本上”是因为它在取“123汉字测试”左边长度为 6 的子串时,它返回的是“123汉字”,而不是“123汉”。当然,这也并不一定就是问题,某些情况下需求可能就是这样。这个方法还可以再改进一下,如下:

 function func(s, n) {

return s.slice(0, n).replace(/([^x00-xff])/g, “$1a”).slice(0, n).replace(/([^x00-xff])a/g, “$1″);

}

以上就是本文的全部内容,希望对大家学习javascript程序设计有所帮助。

Javascript 相关文章推荐
jQuery 使用手册(二)
Sep 23 Javascript
js 调用本地exe的例子(支持IE内核的浏览器)
Dec 26 Javascript
jquery焦点图片切换(数字标注/手动/自动播放/横向滚动)
Jan 24 Javascript
深入理解JavaScript系列(43):设计模式之状态模式详解
Mar 04 Javascript
jquery控制表单输入框显示默认值的方法
May 22 Javascript
基于BootStrap Metronic开发框架经验小结【六】对话框及提示框的处理和优化
May 12 Javascript
如何解决手机浏览器页面点击不跳转浏览器双击放大网页
Jul 01 Javascript
在线引用最新jquery文件的实现方法
Aug 26 Javascript
详解刷新页面vuex数据不消失和不跳转页面的解决
Jan 30 Javascript
webpack css加载和图片加载的方法示例
Sep 11 Javascript
Vue自定义render统一项目组弹框功能
Jun 07 Javascript
Jquery 获取相同NAME 或者id删除行操作
Aug 24 jQuery
javascript Promise简单学习使用方法小结
May 17 #Javascript
关于安卓手机微信浏览器中使用XMLHttpRequest 2上传图片显示字节数为0的解决办法
May 17 #Javascript
Web前端新人笔记之jquery入门心得(新手必看)
May 17 #Javascript
Angularjs中的事件广播 —全面解析$broadcast,$emit,$on
May 17 #Javascript
iScroll.js 使用方法参考
May 16 #Javascript
BootStrap的JS插件之轮播效果案例详解
May 16 #Javascript
老司机带你解读jQuery插件开发流程
May 16 #Javascript
You might like
使用字符串函数输出整数化的PHP版本号
2006/10/09 PHP
php连接odbc数据源并保存与查询数据的方法
2014/12/24 PHP
JavaScript与HTML结合的基本使用方法整理
2015/10/12 PHP
Ajax实现对静态页面的文章访问统计功能示例
2016/10/10 PHP
thinkPHP中配置的读取与C方法详解
2016/12/05 PHP
javascript新手语法小结
2008/06/15 Javascript
jQuery 源代码显示控件 (Ajax加载方式).
2009/05/18 Javascript
JQuery插件开发示例代码
2013/11/06 Javascript
javascript获取xml节点的最大值(实现代码)
2013/12/11 Javascript
js获取url参数代码实例分享(JS操作URL)
2013/12/13 Javascript
页面实时更新时间的JS实例代码
2013/12/18 Javascript
Javascript验证上传图片大小[前台处理]
2014/07/18 Javascript
JS实现alert中显示换行的方法
2015/12/17 Javascript
JavaScript实现瀑布流以及加载效果
2017/02/11 Javascript
Angular多选、全选、批量选择操作实例代码
2017/03/10 Javascript
JavaScript实现移动端轮播效果
2017/06/06 Javascript
JavaScript设计模式之代理模式详解
2017/06/09 Javascript
利用JS对iframe父子(内外)页面进行操作的方法教程
2017/06/15 Javascript
node.js + socket.io 实现点对点随机匹配聊天
2017/06/30 Javascript
微信小程序获取微信运动步数的实例代码
2017/07/20 Javascript
妙用缓存调用链实现JS方法的重载
2018/04/30 Javascript
详解element-ui级联菜单(城市三级联动菜单)和回显问题
2019/10/02 Javascript
微信小程序在text文本实现多种字体样式
2019/11/08 Javascript
JavaScript实现弹出窗口效果
2020/12/09 Javascript
微信小程序自定义胶囊样式
2020/12/27 Javascript
[59:36]2018DOTA2亚洲邀请赛 4.3 突围赛 Secret vs VG 第二场
2018/04/04 DOTA
详解python持久化文件读写
2019/04/06 Python
HTML5+CSS3实现拖放(Drag and Drop)示例
2014/07/07 HTML / CSS
html5 初试 indexedDB(推荐)
2016/07/21 HTML / CSS
德国汽车零件和汽车配件网上商店:kfzteile24
2018/11/14 全球购物
《一本男孩子必读的书》教学反思
2014/02/19 职场文书
员工三分钟演讲稿
2014/08/19 职场文书
普通党员四风问题对照检查材料
2014/09/27 职场文书
酒店采购员岗位职责
2015/04/03 职场文书
我的生日感言
2015/08/03 职场文书
创业计划书之牛肉汤快餐店
2019/10/08 职场文书