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 相关文章推荐
document.all与WEB标准
May 13 Javascript
jQuery仿Flash上下翻动的中英文导航菜单实例
Mar 10 Javascript
JavaScript按值删除数组元素的方法
Apr 24 Javascript
jquery插件hiAlert实现网页对话框美化
May 03 Javascript
jQuery热气球动画半透明背景的后台登录界面代码分享
Aug 28 Javascript
网页前端登录js按Enter回车键实现登陆的两种方法
May 10 Javascript
JavaScript九九乘法口诀表的简单实现
Oct 04 Javascript
浅谈jquery采用attr修改form表单enctype不起作用的问题
Nov 25 Javascript
webpack踩坑之路图片的路径与打包
Sep 05 Javascript
基于casperjs和resemble.js实现一个像素对比服务详解
Jan 10 Javascript
小程序最新获取用户昵称和头像的方法总结
Sep 23 Javascript
微信小程序 冒泡事件原理解析
Sep 27 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中计算未知长度的字符串哪个字符出现的次数最多的代码
2012/08/14 PHP
深入mysql_fetch_row()与mysql_fetch_array()的区别详解
2013/06/05 PHP
php根据指定位置和长度获得子字符串的方法
2015/03/17 PHP
PHP中的函数声明与使用详解
2017/05/27 PHP
Thinkphp 框架基础之入口文件功能、定义与用法分析
2020/04/27 PHP
JavaScript中两种链式调用实现代码
2011/01/12 Javascript
Javascript中的关键字和保留字整理
2014/10/16 Javascript
JavaScript中的console.assert()函数介绍
2014/12/29 Javascript
javascript中的Function.prototye.bind
2015/06/25 Javascript
一起学写js Calender日历控件
2016/04/14 Javascript
jQuery悬停文字提示框插件jquery.tooltipster.js用法示例【附demo源码下载】
2016/07/19 Javascript
jQuery实现单击按钮遮罩弹出对话框效果(2)
2017/02/20 Javascript
SeaJS中use函数用法实例分析
2017/10/10 Javascript
JS删除数组里的某个元素方法
2018/02/03 Javascript
深入剖析JavaScript instanceof 运算符
2019/06/14 Javascript
layui 中select下拉change事件失效的解决方法
2019/09/20 Javascript
小程序实现日历左右滑动效果
2019/10/21 Javascript
jQuery高级编程之js对象、json与ajax用法实例分析
2019/11/01 jQuery
JavaScript日期库date-fn.js使用方法解析
2020/09/09 Javascript
原生js实现分页效果
2020/09/23 Javascript
python实现异步回调机制代码分享
2014/01/10 Python
零基础写python爬虫之爬虫框架Scrapy安装配置
2014/11/06 Python
Python3处理HTTP请求的实例
2018/05/10 Python
利用PyCharm Profile分析异步爬虫效率详解
2019/05/08 Python
使用Python做垃圾分类的原理及实例代码附源码
2019/07/02 Python
python:动态路由的Flask程序代码
2019/11/22 Python
Python函数__new__及__init__作用及区别解析
2020/08/31 Python
Python 的 __str__ 和 __repr__ 方法对比
2020/09/02 Python
Python+OpenCV图像处理——打印图片属性、设置存储路径、调用摄像头
2020/10/22 Python
css3实现简单的白云飘动背景特效
2020/10/28 HTML / CSS
如何打造一封优秀的留学推荐信
2014/01/25 职场文书
将相和教学反思
2014/02/04 职场文书
幼师小班个人总结
2015/02/12 职场文书
复活读书笔记
2015/06/29 职场文书
python opencv人脸识别考勤系统的完整源码
2021/04/26 Python
Django与数据库交互的实现
2021/06/03 Python