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 相关文章推荐
深入聊聊Array的sort方法的使用技巧.详细点评protype.js中的sortBy方法
Apr 12 Javascript
js 新浪的一个图片播放图片轮换效果代码
Jul 15 Javascript
setTimeout函数兼容各主流浏览器运行执行效果实例
Jun 13 Javascript
引用 js在IE与FF之间的区别详细解析
Nov 20 Javascript
javascript中CheckBox全选终极方案
May 20 Javascript
js判断请求的url是否可访问,支持跨域判断的实现方法
Sep 17 Javascript
如何利用模板将HTML从JavaScript中抽离
Oct 08 Javascript
JS动态计算移动端rem的解决方案
Oct 14 Javascript
使用jQuery,Angular实现登录界面验证码详解
Apr 27 jQuery
vue实现文章内容过长点击阅读全文功能的实例
Dec 28 Javascript
详解koa2学习中使用 async 、await、promise解决异步的问题
Nov 13 Javascript
Vue如何实现组件间通信
May 15 Vue.js
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中的一个中文字符串截取函数
2007/02/14 PHP
PHP 批量更新网页内容实现代码
2010/01/05 PHP
php is_file()和is_dir()用于遍历目录时用法注意事项
2010/03/02 PHP
php格式化日期和时间格式化示例分享
2014/02/24 PHP
php获取文件名后缀常用方法小结
2015/02/24 PHP
yii2.0实现pathinfo的形式访问的配置方法
2016/04/06 PHP
php支付宝APP支付功能
2020/07/29 PHP
Javascript 更新 JavaScript 数组的 uniq 方法
2008/01/23 Javascript
url 特殊字符 传递参数解决方法
2010/01/01 Javascript
jQuery回车实现登录简单实现
2013/08/20 Javascript
js delete 用法(删除对象属性及变量)
2014/08/24 Javascript
js实现楼层效果的简单实例
2016/07/15 Javascript
深入浅析JS是按值传递还是按引用传递(推荐)
2016/09/18 Javascript
BootStrap网页中代码显示用法详解
2016/10/21 Javascript
easyui取消表单实时验证,提交时统一验证的简单实例
2016/11/07 Javascript
JavaScript中transform实现数字翻页效果
2017/03/08 Javascript
js实现抽奖效果
2017/03/27 Javascript
在vue中使用echarts图表实例代码详解
2018/10/22 Javascript
Angular单元测试之事件触发的实现
2020/01/20 Javascript
vue 页面跳转的实现方式
2021/01/12 Vue.js
[01:31:02]TNC vs VG 2019国际邀请赛淘汰赛 胜者组赛BO3 第一场
2019/08/22 DOTA
Python中使用select模块实现非阻塞的IO
2015/02/03 Python
详细介绍Ruby中的正则表达式
2015/04/10 Python
Python中用于计算对数的log()方法
2015/05/15 Python
Django框架视图层URL映射与反向解析实例分析
2019/07/29 Python
Python缓存技术实现过程详解
2019/09/25 Python
python实现PCA降维的示例详解
2020/02/24 Python
canvas绘制圆角头像的实现方法
2019/01/17 HTML / CSS
澳大利亚墨尔本的在线时装店:LORETA
2018/09/14 全球购物
Lime Crime官网:美国一家主打梦幻精灵系的彩妆品牌
2019/03/22 全球购物
Myprotein中国网站:欧洲畅销运动营养品牌
2021/02/11 全球购物
信息员培训方案
2014/06/12 职场文书
2014年幼儿园学期工作总结
2014/12/05 职场文书
2016中秋节晚会开场白
2015/11/26 职场文书
2019年最新版见习人员管理制度!
2019/07/08 职场文书
Python爬虫基础之简单说一下scrapy的框架结构
2021/06/26 Python