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中Form相关知识汇总
Jan 06 Javascript
jQuery中extend函数的实现原理详解
Feb 03 Javascript
js实现简单鼠标跟随效果的方法
Apr 10 Javascript
jQuery中fadein与fadeout方法用法示例
Sep 16 Javascript
JavaScript该如何学习 怎样轻松学习JavaScript
Jun 12 Javascript
Angular限制input框输入金额(是小数的话只保留两位小数点)
Jul 13 Javascript
js使用原型对象(prototype)需要注意的地方
Aug 28 Javascript
基于jQuery解决ios10以上版本缩放问题
Nov 03 jQuery
js动态添加表格逐行添加、删除、遍历取值的实例代码
Jan 25 Javascript
浅谈React 服务器端渲染的使用
May 08 Javascript
深入理解Vue 组件之间传值
Aug 16 Javascript
基于elementUI竖向表格、和并列的案例
Oct 26 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并转跳到相应城市分站的方法
2015/03/25 PHP
showModelessDialog()使用详解
2006/09/07 Javascript
基于Jquery的将DropDownlist的选中值赋给label的实现代码
2011/05/06 Javascript
JavaScript在多浏览器下for循环的使用方法
2012/11/07 Javascript
jquery animate实现鼠标放上去显示离开隐藏效果
2013/07/21 Javascript
方便实用的jQuery checkbox复选框全选功能简单实例
2013/10/09 Javascript
table insertRow、deleteRow定义和用法总结
2014/05/14 Javascript
Node.js事件循环(Event Loop)和线程池详解
2015/01/28 Javascript
Javascript核心读书有感之表达式和运算符
2015/02/11 Javascript
JavaScript判断表单中多选框checkbox选中个数的方法
2015/08/17 Javascript
JS、jQuery中select的用法详解
2016/04/21 Javascript
vue.js移动端app实战1:初始配置详解
2017/07/24 Javascript
Node.js实现mysql连接池使用事务自动回收连接的方法示例
2018/02/03 Javascript
jQuery中$原理实例分析
2018/08/13 jQuery
解决layui laydate 时间控件一闪而过的问题
2019/09/28 Javascript
用pywin32实现windows模拟鼠标及键盘动作
2014/04/22 Python
python+matplotlib实现礼盒柱状图实例代码
2018/01/16 Python
python2.7安装图文教程
2018/03/13 Python
Python实现聊天机器人的示例代码
2018/07/09 Python
Python3实现对列表按元组指定列进行排序的方法分析
2018/12/22 Python
Python可视化mhd格式和raw格式的医学图像并保存的方法
2019/01/24 Python
Django rest framework jwt的使用方法详解
2019/08/08 Python
详解如何在cmd命令窗口中搭建简单的python开发环境
2019/08/29 Python
SELENIUM自动化模拟键盘快捷键操作实现解析
2019/10/28 Python
将python文件打包exe独立运行程序方法详解
2020/02/12 Python
matplotlib.pyplot.plot()参数使用详解
2020/07/28 Python
python UDF 实现对csv批量md5加密操作
2021/01/01 Python
HTML5之SVG 2D入门12—SVG DOM及DOM操作介绍
2013/01/30 HTML / CSS
港湾网络笔试题
2014/04/19 面试题
建筑工程自我鉴定
2013/10/18 职场文书
统计岗位职责
2014/02/21 职场文书
小学生竞选班干部演讲稿
2014/04/24 职场文书
优秀会计求职信
2014/07/04 职场文书
资产运营委托书范本
2014/10/16 职场文书
教师正风肃纪剖析材料
2014/10/20 职场文书
学子宴致辞大全
2015/07/27 职场文书