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 相关文章推荐
javascript new 需不需要继续使用
Jul 02 Javascript
seajs1.3.0源码解析之module依赖有序加载
Nov 07 Javascript
解决jquery submit()提交表单提示:f[s] is not a function
Jan 23 Javascript
基于JavaScript制作霓虹灯文字 代码 特效
Sep 01 Javascript
JS实现网页标题栏显示当前时间和日期的完整代码
Nov 02 Javascript
js操作数组函数实例小结
Dec 10 Javascript
JS读取XML文件数据并以table形式显示数据的方法(兼容IE与火狐)
Jun 02 Javascript
Highcharts学习之数据列
Aug 03 Javascript
Vue开发过程中遇到的疑惑知识点总结
Jan 20 Javascript
完美实现js选项卡切换效果(二)
Mar 08 Javascript
Vue.js分页组件实现:diVuePagination的使用详解
Jan 10 Javascript
解决vue init webpack 下载依赖卡住不动的问题
Nov 09 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
用Socket发送电子邮件
2006/10/09 PHP
PHP 身份验证方面的函数
2009/10/11 PHP
PHP中Trait及其应用详解
2017/02/14 PHP
一段效率很高的for循环语句使用方法
2007/08/13 Javascript
Jquery Ajax学习实例 向页面发出请求,返回XML格式数据
2010/03/14 Javascript
基于pthread_create,readlink,getpid等函数的学习与总结
2013/07/17 Javascript
Javascript玩转继承(二)
2014/05/08 Javascript
js实现跟随鼠标移动且带关闭功能的图片广告实例
2015/02/26 Javascript
详解JavaScript中getFullYear()方法的使用
2015/06/10 Javascript
JavaScript正则表达式的分组匹配详解
2016/02/13 Javascript
JQuery 传送中文乱码问题的简单解决办法
2016/05/24 Javascript
ui组件之input多选下拉实现方法(带有搜索功能)
2016/07/14 Javascript
jQuery插件jqGrid动态获取列和列字段的方法
2017/03/03 Javascript
微信小程序手势操作之单触摸点与多触摸点
2017/03/10 Javascript
Node.js 进程平滑离场剖析小结
2019/01/24 Javascript
vue中使用echarts的示例
2021/01/03 Vue.js
[00:52]DOTA2国际邀请赛
2020/02/21 DOTA
Python数据结构与算法之图的广度优先与深度优先搜索算法示例
2017/12/14 Python
python 列表,数组和矩阵sum的用法及区别介绍
2018/06/28 Python
python基于itchat模块实现微信防撤回
2019/04/29 Python
pybind11和numpy进行交互的方法
2019/07/04 Python
如何利用Pyecharts可视化微信好友
2019/07/04 Python
python常用库之NumPy和sklearn入门
2019/07/11 Python
keras 指定程序在某块卡上训练实例
2020/06/22 Python
CSS3教程:新增加的结构伪类
2009/04/02 HTML / CSS
canvas粒子动画背景的实现示例
2018/09/03 HTML / CSS
详解HTML5之pushstate、popstate操作history,无刷新改变当前url
2017/03/15 HTML / CSS
内科护士实习自我鉴定
2013/10/17 职场文书
市场营销专业推荐信
2013/11/03 职场文书
初中作文评语
2014/12/25 职场文书
学校端午节活动总结
2015/02/11 职场文书
2015年企业员工工作总结范文
2015/05/21 职场文书
ES6 解构赋值的原理及运用
2021/05/25 Javascript
golang生成vcf通讯录格式文件详情
2022/03/25 Golang
SQL语句多表联合查询的方法示例
2022/04/18 MySQL
Three.js实现雪糕地球的使用示例详解
2022/07/07 Javascript