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 相关文章推荐
JS 参数传递的实际应用代码分析
Sep 13 Javascript
读jQuery之十二 删除事件核心方法
Jul 31 Javascript
jQuery的slideToggle方法实例
May 07 Javascript
js获取光标位置和设置文本框光标位置示例代码
Jan 09 Javascript
超简单JS二级、多级联动的简单实例
Feb 18 Javascript
js监听鼠标点击和键盘点击事件并自动跳转页面
Sep 24 Javascript
JavaScript字符串对象charAt方法入门实例(用于取得指定位置的字符)
Oct 17 Javascript
JS使用JSON作为参数实例分析
Jun 23 Javascript
jquery应用实例分享_实现手风琴特效
Feb 01 jQuery
基于jQuery ztree实现表格风格的树状结构
Aug 31 jQuery
JS滚轮控制图片缩放大小和拖动的实例代码
Nov 20 Javascript
vue中移动端调取本地的复制的文本方式
Jul 18 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
从零开始 教你如何搭建Discuz!4.1论坛
2006/07/07 PHP
4.与数据库的连接
2006/10/09 PHP
elgg 获取文件图标地址的方法
2010/03/20 PHP
php下用cookie统计用户访问网页次数的代码
2010/05/09 PHP
PHP编码转换
2012/11/05 PHP
php读取csv文件并输出的方法
2015/03/14 PHP
PHP实现抽奖功能实例代码
2020/06/30 PHP
让你的PHP,APACHE,NGINX支持大文件上传
2021/03/09 PHP
javascript Keycode对照表
2009/10/24 Javascript
关于COOKIE个数与大小的问题
2011/01/17 Javascript
JQuery操作三大控件(下拉,单选,复选)的方法
2013/08/06 Javascript
JSP跨iframe如何传递参数实现代码
2013/09/21 Javascript
Javascript基础教程之if条件语句
2015/01/18 Javascript
js实现将选中值累加到文本框的方法
2015/08/12 Javascript
使用Function.apply()的参数数组化来提高 JavaScript程序性能的技巧
2015/12/23 Javascript
javascript与jquery中的this关键字用法实例分析
2015/12/24 Javascript
JS表单验证的代码(常用)
2016/04/08 Javascript
JS实现禁止鼠标右键的功能
2016/10/15 Javascript
bootstrap datetimepicker2.3.11时间插件使用
2016/11/19 Javascript
js获取浏览器和屏幕的各种宽度高度
2017/02/22 Javascript
React Native中Navigator的使用方法示例
2017/10/13 Javascript
jQuery中可见性过滤器简单用法示例
2018/03/31 jQuery
vue-cli 打包使用history模式的后端配置实例
2018/09/20 Javascript
webpack4 SplitChunks实现代码分隔详解
2019/05/23 Javascript
使用VueCli3+TypeScript+Vuex一步步构建todoList的方法
2019/07/25 Javascript
JavaScript实现拖拽和缩放效果
2020/08/24 Javascript
ES11新增的这9个新特性,你都掌握了吗
2020/10/15 Javascript
跟老齐学Python之集合(set)
2014/09/24 Python
详解Python3中字符串中的数字提取方法
2017/01/14 Python
一款纯css3实现的动画加载导航
2014/10/08 HTML / CSS
Big Green Smile德国网上商店:提供各种天然产品
2018/05/23 全球购物
Under Armour安德玛英国官网:美国高端运动科技品牌
2018/09/17 全球购物
德国健康生活方式网上商店:Landkaufhaus Mayer
2019/03/12 全球购物
集体生日活动方案
2014/08/18 职场文书
领导班子三严三实对照检查材料
2014/09/25 职场文书
社区六一儿童节活动总结
2015/02/11 职场文书