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 相关文章推荐
不一样的文字闪烁 轮番闪烁
Nov 11 Javascript
dtree 网页树状菜单及传递对象集合到js内,动态生成节点
Apr 14 Javascript
Javascript核心读书有感之语句
Feb 11 Javascript
jquery实现邮箱自动填充提示功能
Nov 17 Javascript
vue实现ajax滚动下拉加载,同时具有loading效果(推荐)
Jan 11 Javascript
基于vue2.0+vuex+localStorage开发的本地记事本示例
Feb 28 Javascript
jQuery插件echarts实现的多折线图效果示例【附demo源码下载】
Mar 04 Javascript
javascript 数据存储的常用函数总结
Jun 01 Javascript
mint-ui在vue中的使用示例
Apr 05 Javascript
详解django模板与vue.js冲突问题
Jul 07 Javascript
vue 实现强制类型转换 数字类型转为字符串
Nov 07 Javascript
vue项目实现多语言切换的思路
Sep 17 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 Http_Template_IT类库进行模板替换
2009/03/19 PHP
PHP基于简单递归函数求一个数阶乘的方法示例
2017/04/26 PHP
详细解读php的命名空间(一)
2018/02/21 PHP
php使用环形链表解决约瑟夫问题完整示例
2018/08/07 PHP
PHP远程连接oracle数据库操作实现方法图文详解
2019/04/11 PHP
jQuery下扩展插件和拓展函数的写法(匿名函数使用的典型例子)
2010/10/20 Javascript
只需一行代码,轻松实现一个在线编辑器
2013/11/12 Javascript
jquery背景跟随鼠标滑动导航
2015/11/20 Javascript
原生javascript实现的一个简单动画效果
2016/03/30 Javascript
Bootstrap下拉菜单效果实例代码分享
2016/06/30 Javascript
将 vue 生成的 js 上传到七牛的实例
2017/07/28 Javascript
编写React组件项目实践分析
2018/03/04 Javascript
jQuery实现动态添加和删除input框代码实例
2019/03/29 jQuery
vue router 通过路由来实现切换头部标题功能
2019/04/24 Javascript
在微信小程序中使用图表的方法示例
2019/04/25 Javascript
Vue + Elementui实现多标签页共存的方法
2019/06/12 Javascript
vue前后分离调起微信支付
2019/07/29 Javascript
JS实现长图上下滚动效果
2020/03/19 Javascript
通过vue.extend实现消息提示弹框的方法记录
2021/01/07 Vue.js
Vue多选列表组件深入详解
2021/03/02 Vue.js
[01:15]PWL S2开团时刻第二期——他们杀 我就白给
2020/11/25 DOTA
Python中input与raw_input 之间的比较
2017/08/20 Python
PyCharm设置护眼背景色的方法
2018/10/29 Python
Python字典的核心底层原理讲解
2019/01/24 Python
Python中变量的输入输出实例代码详解
2019/07/28 Python
利用pandas合并多个excel的方法示例
2019/10/10 Python
Python3 字典dictionary入门基础附实例
2020/02/10 Python
Python如何对齐字符串
2020/07/30 Python
CSS3正方体旋转示例代码
2013/08/08 HTML / CSS
css3和jquery实现的可折叠导航菜单适合放在手机网页的导航菜单
2014/09/02 HTML / CSS
Sam’s Club山姆会员商店:沃尔玛旗下高端会员制商店
2017/01/16 全球购物
大学生个人求职信例文
2014/07/07 职场文书
早读课迟到检讨书
2014/09/25 职场文书
悬疑名作《朋友游戏》动画无字ED宣传片 新角色公开
2022/04/13 日漫
分析SQL窗口函数之取值窗口函数
2022/04/21 Oracle
深入理解MySQL中MVCC与BufferPool缓存机制
2022/05/25 MySQL