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 相关文章推荐
JQuery中判断一个元素下面是否有内容或者有某个标签的判断代码
Feb 02 Javascript
jQuery之字体大小的设置方法
Feb 27 Javascript
jquery转盘抽奖功能实现
Nov 13 Javascript
JavaScript组成、引入、输出、运算符基础知识讲解
Dec 08 Javascript
Node.js复制文件的方法示例
Dec 29 Javascript
微信小程序 小程序制作及动画(animation样式)详解
Jan 06 Javascript
快速将Vue项目升级到webpack3的方法步骤
Sep 14 Javascript
vue中实现移动端的scroll滚动方法
Mar 03 Javascript
Vue.js实现可排序的表格组件功能示例
Feb 19 Javascript
微信小程序之onLaunch与onload异步问题详解
Mar 28 Javascript
Vue对象赋值视图不更新问题及解决方法
Jun 03 Javascript
Vue过渡效果之CSS过渡详解(结合transition,animation,animate.css)
Feb 05 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编程实现获取excel文档内容的代码实例
2011/06/28 PHP
PHP利用MySQL保存session的实现思路及示例代码
2014/09/09 PHP
PHP使用GETDATE获取当前日期时间作为一个关联数组的方法
2015/03/19 PHP
PHP数组游标实现对数组的各种操作详解
2016/01/26 PHP
PHP上传Excel文件导入数据到MySQL数据库示例
2016/10/25 PHP
javascript 操作文件 实现方法小结
2009/07/02 Javascript
js里怎么取select标签里的值并修改
2012/12/10 Javascript
JavaScript中的Math.E属性使用详解
2015/06/12 Javascript
Vuejs第九篇之组件作用域及props数据传递实例详解
2016/09/05 Javascript
AngularJS指令中的绑定策略实例分析
2016/12/14 Javascript
js实现动态显示时间效果
2017/03/06 Javascript
JavaScript插件Tab选项卡效果
2017/11/14 Javascript
vue-cli webpack2项目打包优化分享
2018/02/07 Javascript
Vue 父子组件的数据传递、修改和更新方法
2018/03/01 Javascript
解决vue js IOS H5focus无法自动弹出键盘的问题
2018/08/30 Javascript
使用koa2创建web项目的方法步骤
2019/03/12 Javascript
vue中在vuex的actions中请求数据实例
2019/11/08 Javascript
Vue实现兄弟组件间的联动效果
2020/01/21 Javascript
使用 Jest 和 Supertest 进行接口端点测试实例详解
2020/04/25 Javascript
彻底搞懂并解决vue-cli4中图片显示的问题实现
2020/08/31 Javascript
Python爬虫基础之XPath语法与lxml库的用法详解
2018/09/13 Python
Django安装配置mysql的方法步骤
2018/10/15 Python
Python3中的bytes和str类型详解
2019/05/02 Python
Python面向对象进阶学习
2019/05/21 Python
python3 打印输出字典中特定的某个key的方法示例
2019/07/06 Python
Python模块的制作方法实例分析
2019/12/21 Python
pytorch 修改预训练model实例
2020/01/18 Python
python分别打包出32位和64位应用程序
2020/02/18 Python
Python爬虫实现vip电影下载的示例代码
2020/04/20 Python
Python接口测试结果集实现封装比较
2020/05/01 Python
初中教师业务学习材料
2014/05/12 职场文书
工地标语大全
2014/06/18 职场文书
2014年党员自我评议(5篇)
2014/09/12 职场文书
华清池导游词
2015/02/02 职场文书
2015年度团总支工作总结
2015/04/23 职场文书
javascript进阶篇深拷贝实现的四种方式
2022/07/07 Javascript