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+ajax验证不通过也提交表单问题处理
Dec 12 Javascript
javascript创建对象、对象继承的实用方式详解
Mar 08 Javascript
js如何准确获取当前页面url网址信息
Sep 13 Javascript
jQuery防止重复绑定事件的解决方法
May 14 Javascript
详解Angular2中Input和Output用法及示例
May 21 Javascript
vue-cli开发环境实现跨域请求的方法
Apr 07 Javascript
JavaScript去掉数组重复项的方法分析【测试可用】
Jul 19 Javascript
vue中v-text / v-html使用实例代码详解
Apr 02 Javascript
Vue+Express实现登录注销功能的实例代码
May 05 Javascript
Vue+tracking.js 实现前端人脸检测功能
Apr 16 Javascript
javascript实现倒计时提示框
Mar 02 Javascript
Nest.js参数校验和自定义返回数据格式详解
Mar 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判断IP地址是否在多个IP段内
2020/08/18 PHP
JQUERY CHECKBOX全选,取消全选,反选方法三
2008/08/30 Javascript
使用JQuery和s3captche实现一个水果名字的验证
2009/08/14 Javascript
IE6、IE7中setAttribute不支持class/for/rowspan/colspan等属性
2011/08/28 Javascript
运用jQuery定时器的原理实现banner图片切换
2014/10/22 Javascript
jquery ui bootstrap 实现自定义风格
2014/11/14 Javascript
JavaScript组件焦点与页内锚点间传值的方法
2015/02/02 Javascript
js实现Select列表各项上移和下移的方法
2015/08/14 Javascript
基于Jquery实现焦点图淡出淡入效果
2015/11/30 Javascript
浅析bootstrap原理及优缺点
2017/03/19 Javascript
详解使用fetch发送post请求时的参数处理
2017/04/05 Javascript
最常用的jQuery表单验证(简单)
2017/05/23 jQuery
解决vue 项目引入字体图标报错、不显示等问题
2018/09/01 Javascript
js canvas实现画图、滤镜效果
2018/11/27 Javascript
[01:45]绝对公平!DOTA2队长征召模式详解
2014/04/25 DOTA
python3使用smtplib实现发送邮件功能
2018/05/22 Python
python3实现点餐系统
2019/01/24 Python
Python函数和模块的使用总结
2019/05/20 Python
如何利用python给图片添加半透明水印
2019/09/06 Python
python tkinter图形界面代码统计工具(更新)
2019/09/18 Python
python如何从文件读取数据及解析
2019/09/19 Python
OpenCV python sklearn随机超参数搜索的实现
2020/01/17 Python
Java Unsafe类实现原理及测试代码
2020/09/15 Python
Manjaro、pip、conda更换国内源的方法
2020/11/17 Python
移动端HTML5开发神器之vconsole详解
2020/12/15 HTML / CSS
荷兰网上买鞋:MooieSchoenen.nl
2017/09/12 全球购物
日本酒店、民宿、温泉旅馆、当地旅行团中文预订:e路东瀛
2019/12/09 全球购物
string = null 和string = ''的区别
2013/04/28 面试题
电子商务应届生自我鉴定
2014/01/13 职场文书
消防战士优秀事迹材料
2014/02/13 职场文书
名企HR怎样看待求职信
2014/02/23 职场文书
幼儿园区域活动总结
2014/05/08 职场文书
幼儿园家长安全责任书
2014/07/22 职场文书
处级领导干部四风问题自我剖析材料
2014/09/29 职场文书
股权转让协议范本
2014/12/07 职场文书
手术室消毒隔离制度
2015/08/05 职场文书