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 相关文章推荐
实现超用户体验 table排序javascript实现代码
Jun 22 Javascript
jquery lazyload延迟加载技术的实现原理分析
Jan 24 Javascript
IE中鼠标经过option触发mouseout的解决方法
Jan 29 Javascript
深入理解JavaScript系列(17):面向对象编程之概论详细介绍
Mar 04 Javascript
JavaScript实现节点的删除与序号重建实例
Aug 05 Javascript
JavaScript中数组Array方法详解
Feb 27 Javascript
ES6中的箭头函数实例详解
Apr 06 Javascript
微信小程序实战之上拉(分页加载)效果(2)
Apr 17 Javascript
详解Vue.js分发之作用域槽
Jun 13 Javascript
Layui多选只有最后一个值的解决方法
Sep 02 Javascript
JavaScript动画实例之粒子文本的实现方法详解
Jul 28 Javascript
vue实现图片按比例缩放问题操作
Aug 11 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
杏林同学录(八)
2006/10/09 PHP
使用php判断浏览器的类型和语言的函数代码
2013/02/28 PHP
php获取textarea的值并处理回车换行的方法
2014/10/20 PHP
php内嵌函数用法实例
2015/03/20 PHP
javascript 写类方式之八
2009/07/05 Javascript
获取URL地址中的文件名和参数的javascript代码
2009/09/02 Javascript
基于jQuery的树控件实现代码(asp.net+json)
2010/07/11 Javascript
extjs3 combobox取value和text案例详解
2013/02/06 Javascript
js获取某元素的class里面的css属性值代码
2014/01/16 Javascript
js+html5实现canvas绘制圆形图案的方法
2015/06/05 Javascript
常用的Javascript数据验证插件
2015/08/04 Javascript
通过隐藏iframe实现无刷新上传文件操作
2016/03/16 Javascript
微信小程序 setData使用方法及常用错误解决办法
2017/05/11 Javascript
JS实现简单表格排序操作示例
2017/10/07 Javascript
浅谈React组件之性能优化
2018/03/02 Javascript
JS实现图片上传多次上传同一张不生效的处理方法
2018/08/06 Javascript
JavaScript, select标签元素左右移动功能实现
2020/05/14 Javascript
JS实现点击掉落特效
2021/01/29 Javascript
python 中文乱码问题深入分析
2011/03/13 Python
Mac下Anaconda的安装和使用教程
2018/11/29 Python
神经网络相关之基础概念的讲解
2018/12/29 Python
2019 Python最新面试题及答案16道题
2019/04/11 Python
解决python中使用PYQT时中文乱码问题
2019/06/17 Python
Python列表list常用内建函数实例小结
2019/10/22 Python
详解python metaclass(元类)
2020/08/13 Python
雷朋巴西官方商店:Ray-Ban Brasil
2020/07/21 全球购物
Set里的元素是不能重复的,那么用什么方法来区分重复与否呢?
2016/08/18 面试题
企业安全生产目标责任书
2014/07/23 职场文书
无私奉献演讲稿
2014/09/04 职场文书
2014年文明创建工作总结
2014/11/25 职场文书
学风建设主题班会
2015/08/17 职场文书
《一面五星红旗》教学反思
2016/02/23 职场文书
如何设计高效合理的MySQL查询语句
2021/05/26 MySQL
JPA 通过Specification如何实现复杂查询
2021/11/23 Java/Android
十大最强水系宝可梦,最美宝可梦排第三,榜首大家最熟悉
2022/03/18 日漫
Golang 链表的学习和使用
2022/04/19 Golang