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 相关文章推荐
图片自动更新(说明)
Oct 02 Javascript
silverlight线程与基于事件驱动javascript引擎(实现轨迹回放功能)
Aug 09 Javascript
Jquery判断$(&quot;#id&quot;)获取的对象是否存在的方法
Sep 25 Javascript
javascript实现跨域的方法汇总
Jun 25 Javascript
Javascript之Date对象详解
Jun 07 Javascript
Vue.js系列之项目搭建(1)
Jan 03 Javascript
Vue组件开发初探
Feb 14 Javascript
基于Bootstrap 3 JQuery及RegExp的表单验证功能
Feb 16 Javascript
浅谈Vue2.0父子组件间事件派发机制
Jan 08 Javascript
Vue2.0中集成UEditor富文本编辑器的方法
Mar 03 Javascript
JavaScript分步实现一个出生日期的正则表达式
Mar 22 Javascript
vue fetch中的.then()的正确使用方法
Apr 17 Javascript
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中curl_setopt函数用法实例分析
2015/04/16 PHP
制作个性化的WordPress登陆界面的实例教程
2016/05/21 PHP
PHP封装curl的调用接口及常用函数详解
2018/05/31 PHP
PHP7实现和CryptoJS的AES加密方式互通示例【AES-128-ECB加密】
2019/06/08 PHP
laravel返回统一格式错误码问题
2019/11/04 PHP
2020最新版 PhpStudy V8.1版本下载安装使用详解
2020/10/30 PHP
JavaScript 动态将数字金额转化为中文大写金额
2009/05/14 Javascript
IE Firefox 使用自定义标签的区别
2009/10/15 Javascript
js函数获取html中className所在的内容并去除标签
2013/09/08 Javascript
什么是cookie?js手动创建和存储cookie
2014/05/27 Javascript
Javascript封装DOMContentLoaded事件实例
2014/06/12 Javascript
AngularJS中的模块详解
2015/01/29 Javascript
jQuery+CSS实现一个侧滑导航菜单代码
2016/05/09 Javascript
Javascript类型系统之undefined和null浅析
2016/07/13 Javascript
javascript 四十条常用技巧大全
2016/09/09 Javascript
bootstrap实现图片自动轮播
2016/12/21 Javascript
ionic实现下拉刷新载入数据功能
2017/05/11 Javascript
基于JavaScript实现报警器提示音效果
2017/10/27 Javascript
nodejs操作mongodb的增删改查功能实例
2017/11/09 NodeJs
剖析Angular Component的源码示例
2018/03/23 Javascript
原生JS实现的跳一跳小游戏完整实例
2019/01/27 Javascript
通过js实现压缩图片上传功能
2020/02/25 Javascript
[02:16]深扒TI7聊天轮盘语音出处2
2017/05/11 DOTA
Python中请不要再用re.compile了
2019/06/30 Python
pandas实现DataFrame显示最大行列,不省略显示实例
2019/12/26 Python
使用python 的matplotlib 画轨道实例
2020/01/19 Python
python下载卫星云图合成gif的方法示例
2020/02/18 Python
HTML5是否真的可以取代Flash
2010/02/10 HTML / CSS
竞聘书怎么写,如何写?
2014/03/31 职场文书
推荐信怎么写
2014/05/09 职场文书
快递员岗位职责
2014/09/12 职场文书
医生党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
四风问题班子对照检查材料
2014/09/27 职场文书
2014年节能减排工作总结
2014/12/06 职场文书
岗位聘任报告
2015/03/02 职场文书
《比尾巴》教学反思
2016/02/24 职场文书