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 相关文章推荐
Javascript 垃圾收集机制介绍理解
May 14 Javascript
鼠标滚轴控制文本框值的JS代码
Nov 19 Javascript
屏蔽相应键盘按钮操作
Mar 10 Javascript
jquery跟js初始化加载的多种方法及区别介绍
Apr 02 Javascript
JavaScript实现点击自动选择TextArea文本的方法
Jul 02 Javascript
JS中生成随机数的用法及相关函数
Jan 09 Javascript
jQuery表单验证之密码确认
May 22 jQuery
canvas+gif.js打造自己的数字雨头像的示例代码
Oct 26 Javascript
AnglarJs中的上拉加载实现代码
Feb 08 Javascript
史上最为详细的javascript继承(推荐)
May 18 Javascript
jquery实现轮播图特效
Apr 12 jQuery
jQuery实现简单三级联动效果
Sep 05 jQuery
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
《雄兵连》系列首部大电影《烈阳天道》:可能是因为期望值太高了
2020/08/18 国漫
聊天室php&mysql(六)
2006/10/09 PHP
php实现的遍历文件夹下所有文件,编辑删除
2010/01/05 PHP
discuz的php防止sql注入函数
2011/01/17 PHP
smarty获得当前url的方法分享
2014/02/14 PHP
php使用array_rand()函数从数组中随机选择一个或多个元素
2014/04/28 PHP
PHP取余函数介绍MOD(x,y)与x%y
2014/05/15 PHP
PHP临时文件的安全性分析
2014/07/04 PHP
PHP+jquery+ajax实现即时聊天功能实例
2014/12/23 PHP
PHP框架Laravel插件Pagination实现自定义分页
2020/04/22 PHP
多广告投放代码 推荐
2006/11/13 Javascript
基于jsTree的无限级树JSON数据的转换代码
2010/07/27 Javascript
javascript数组输出的两种方式
2015/01/13 Javascript
Vue.js实现模拟微信朋友圈开发demo
2017/04/20 Javascript
Vue2 使用 Echarts 创建图表实例代码
2017/05/18 Javascript
JavaScript模拟实现自由落体效果
2018/08/28 Javascript
vue 实现搜索的结果页面支持全选与取消全选功能
2019/05/10 Javascript
vue 中 elment-ui table合并上下两行相同数据单元格
2019/12/26 Javascript
python sys模块sys.path使用方法示例
2013/12/04 Python
Python中给List添加元素的4种方法分享
2014/11/28 Python
pymssql数据库操作MSSQL2005实例分析
2015/05/25 Python
Python利用flask sqlalchemy实现分页效果
2020/08/02 Python
python3爬取淘宝信息代码分析
2018/02/10 Python
pygame游戏之旅 按钮上添加文字的方法
2018/11/21 Python
pandas数据处理进阶详解
2019/10/11 Python
Python批量将图片灰度化的实现代码
2020/04/11 Python
使用phonegap进行提示操作的具体方法
2017/03/30 HTML / CSS
Pedro官网:新加坡时尚品牌
2019/08/27 全球购物
护理不良事件检讨书
2014/02/06 职场文书
党员对照检查材料思想汇报(党的群众路线)
2014/09/24 职场文书
先进党员事迹材料
2014/12/24 职场文书
综合素质评价个性发展自我评价
2015/03/06 职场文书
2015年社区综治工作总结
2015/04/21 职场文书
青春雷锋观后感
2015/06/10 职场文书
服务器间如何实现文件共享
2022/05/20 Servers
Java中的Kafka为什么性能这么快及4大核心详析
2022/09/23 Java/Android