JavaScript截取字符串的Slice、Substring、Substr函数详解和比较


Posted in Javascript onMarch 20, 2014

在JavaScript中,提取子字符串主要是通过 Slice、Substring、Substr 三个方法之一。

// slice 
// 语法: string.slice(start [, stop])
"Good news, everyone!".slice(5,9); 
// 'news'
// substring 
// 语法: string.substring(indexA [, indexB])
"Good news, everyone!".substring(5,9); 
// 'news'
// substr
// 语法: string.substr(start [, length])
"Good news, everyone!".substr(5,4); 
// 'news'

在三个方法之中输入一个  start 的索引参数,和一个可选的 end 索引( 或 length )参数。

但他们在一些重要的方面有所不同:
1.substr()方法从指定位置,提取指定数量的字符。
param: start 开始提取字符的位置索引,length 提取字符的数量长度。
return: 一个新的字符串。 从 start 处开始的 length 个字符。
在不同浏览器有不一致的表现,现代浏览器允许 start 索引参数为负数,来表示从字符串结尾处开始,提取字符的数量。但是在ie8及以下版本浏览器 start索引参数 最小从0开始计算。【 substr 为Web浏览器附加的ECMAScript特性,不建议使用时 start 索引为负值】

var str = "abcdefghij";
console.log("(1): "      + str.substr(1));     // (1): bcdefghij
console.log("(1,2): "    + str.substr(1,2));   // (1,2): bc
console.log("(-3): "     + str.substr(-3));    // (-3): hij
console.log("(-3,2): "   + str.substr(-3,2));  // (-3,2): hi
console.log("(20, 2): "  + str.substr(20,2));  // (20, 2):
console.log("(-20, 2): " + str.substr(-20,2)); // (-20, 2): ab
 
// ie8及以下
console.log("(-3): " + str.substr(-2)); // (-20, 2): hij
console.log("(-3, 2): " + str.substr(-2)); // (-20, 2): ab

2.substring() 方法用于提取字符串 一个index索引至另一个之间的子集, 或是直到字符串的结束。
param: indexA, indexB 两个参数取值范围为一个0 至 字符串长度之间的整数。
return: 返回一个新的字符串, 从小的索引开始 到 大的索引之间,包括小的索引位置字符,不包括大的索引位置字符。
substring 的参数是可反转的,它总是使用小的的参数值作为开始,大的参数值作为结束。 如果参数是小于0或NaN,它被看作是0,如果参数大于字符串的长度,被视为字符串的长度值.
// assumes a print function is defined
var anyString = "Mozilla";
// Displays "Moz"
console.log(anyString.substring(0,3));
console.log(anyString.substring(3,0));
// Displays "lla"
console.log(anyString.substring(4,7));
console.log(anyString.substring(7,4));
// Displays "Mozill"
console.log(anyString.substring(0,6));
// Displays "Mozilla"
console.log(anyString.substring(0,7));
console.log(anyString.substring(0,10));

3.slice 提取字符串的一部分。
param: beginSlice开始提取字符的位置索引,可以为负,如果为负值被视为(sourceLength-beginSlice),sourceLength是字符串的长度,即:从字符串的尾部开始算起的位置endSlice 结束提取的字符的位置索引。如果省略,提取到结束。如果为负值被视为(sourceLength-endSlice)。
return: 返回一个新的字符串,从 start 开始(包括 start)到 end 结束(不包括 end)为止的所有字符。
参数都可以为负,如果索引是负的,则从字符串的尾部开始算起。

var str1 = "The morning is upon us.";
console.log(str1.slice(4, -2));   //  morning is upon u
var str = "The morning is upon us.";
str.slice(-3);     // "us."
str.slice(-3, -1); // "us"
str.slice(0, -1);  // "The morning is upon us"
Javascript 相关文章推荐
javascript之水平横向滚动歌词同步的应用
May 07 Javascript
jQuery在vs2008及js文件中的无智能提示的解决方法
Dec 30 Javascript
如何将JS的变量值传递给ASP变量
Dec 10 Javascript
Jquery图片滚动与幻灯片的实例代码
Apr 08 Javascript
JavaScript中的索引数组、关联数组和静态数组、动态数组讲解
Nov 08 Javascript
jQuery插件ajaxfileupload.js实现上传文件
Oct 23 Javascript
BootStrap 智能表单实战系列(二)BootStrap支持的类型简介
Jun 13 Javascript
Bootstrap面板学习使用
Feb 09 Javascript
js下载文件并修改文件名
May 08 Javascript
微信分享调用jssdk实例
Jun 08 Javascript
荐书|您有一份JavaScript书单待签收
Jul 21 Javascript
vue-cli的eslint相关用法
Sep 29 Javascript
js拖拽一些常见的思路方法整理
Mar 19 #Javascript
使用jquery实现以post打开新窗口
Mar 19 #Javascript
jquery判断小数点两位和自动删除小数两位后的数字
Mar 19 #Javascript
改变隐藏的input中value值的方法
Mar 19 #Javascript
js获取url中的参数且参数为中文时通过js解码
Mar 19 #Javascript
JS 打印界面的CSS居中代码适用所有浏览器
Mar 19 #Javascript
兼容所有浏览器的js复制插件Zero使用介绍
Mar 19 #Javascript
You might like
php数字转汉字代码(算法)
2011/10/08 PHP
php使用PDO操作MySQL数据库实例
2014/12/30 PHP
PHP的邮件群发系统phplist配置方法详细总结
2016/03/30 PHP
Yii2如何批量添加数据
2016/05/17 PHP
七种PHP开发环境搭建工具
2020/06/28 PHP
asp.net和asp下ACCESS的参数化查询
2008/06/11 Javascript
一个选择最快的服务器转向代码
2009/04/27 Javascript
jQuery 使用手册(六)
2009/09/23 Javascript
理解Javascript_12_执行模型浅析
2010/10/18 Javascript
javascript框架设计之类工厂
2015/06/23 Javascript
jquery+php实现滚动的数字特效
2015/11/29 Javascript
详解AngularJs HTTP响应拦截器实现登陆、权限校验
2017/04/11 Javascript
详解angularJS+Ionic移动端图片上传的解决办法
2017/09/13 Javascript
微信小程序自定义组件封装及父子间组件传值的方法
2018/08/28 Javascript
解决 viewer.js 动态更新图片导致无法预览的问题
2019/05/14 Javascript
详解Vue.js和layui日期控件冲突问题解决办法
2019/07/25 Javascript
vue实现鼠标经过动画
2019/10/16 Javascript
解决vue自定义全局消息框组件问题
2019/11/22 Javascript
vue实现评价星星功能
2020/06/30 Javascript
Ant design vue中的联动选择取消操作
2020/10/31 Javascript
前端vue如何使用高德地图
2020/11/05 Javascript
python爬取51job中hr的邮箱
2016/05/14 Python
用Python解决计数原理问题的方法
2016/08/04 Python
Python理解递归的方法总结
2019/01/28 Python
3种python调用其他脚本的方法
2020/01/06 Python
使用Python打造一款间谍程序的流程分析
2020/02/21 Python
python GUI库图形界面开发之PyQt5单选按钮控件QRadioButton详细使用方法与实例
2020/02/28 Python
python中Array和DataFrame相互转换的实例讲解
2021/02/03 Python
pandas按条件筛选数据的实现
2021/02/20 Python
如何利用cmp命令比较文件
2016/04/11 面试题
思想汇报格式
2014/01/05 职场文书
中国梦团日活动总结
2014/07/07 职场文书
整顿机关作风心得体会
2014/09/10 职场文书
2014年教学管理工作总结
2014/12/02 职场文书
忠诚教育学习心得体会
2016/01/23 职场文书
2016大学优秀学生干部事迹材料
2016/03/01 职场文书