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
Nov 25 Javascript
javascript怎么禁用浏览器后退按钮
Mar 27 Javascript
jQuery蓝色风格滑动导航栏代码分享
Aug 19 Javascript
使用Web Uploader实现多文件上传
Jun 08 Javascript
JQuery控制图片由中心点逐渐放大效果
Jun 26 Javascript
AngularJS  双向数据绑定详解简单实例
Oct 20 Javascript
ionic cordova一次上传多张图片(类似input file提交表单)的实现方法
Dec 16 Javascript
vue-router配合ElementUI实现导航的实例
Feb 11 Javascript
Vue中props的使用详解
Jun 15 Javascript
JQuery实现简单的复选框树形结构图示例【附源码下载】
Jul 16 jQuery
Angular+ionic实现折叠展开效果的示例代码
Jul 29 Javascript
JS实现简单控制视频播放倍速的实例代码
Apr 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
PHP 类型转换函数intval
2009/06/20 PHP
PHP stristr() 函数(不区分大小写的字符串查找)
2010/06/03 PHP
浅谈php冒泡排序
2014/12/30 PHP
统计PHP目录中的文件数方法
2019/03/05 PHP
jQuery学习笔记(1)--用jQuery实现异步通信(用json传值)具体思路
2013/04/08 Javascript
JS比较2个日期间隔的示例代码
2014/04/15 Javascript
Javascript字符串对象的常用方法简明版
2014/06/26 Javascript
使用js dom和jquery分别实现简单增删改
2014/09/11 Javascript
JavaScript动态创建link标签到head里的方法
2014/12/22 Javascript
原生js和jquery实现图片轮播淡入淡出效果
2015/04/23 Javascript
JavaScript对象属性检查、增加、删除、访问操作实例
2015/07/08 Javascript
jquery分页插件jquery.pagination.js实现无刷新分页
2016/04/01 Javascript
url中的特殊符号有什么含义(推荐)
2016/06/17 Javascript
手机软键盘弹出时影响布局的解决方法
2016/12/15 Javascript
妙用Angularjs实现表格按指定列排序
2017/06/23 Javascript
jQuery实现动态给table赋值的方法示例
2017/07/04 jQuery
angular $watch 一个变量的变化(实例讲解)
2017/08/02 Javascript
vant(ZanUi)结合async-validator实现表单验证的方法
2018/12/06 Javascript
20多个小事例带你重温ES10新特性(小结)
2019/09/29 Javascript
[02:43]中国五虎出征TI3视频
2013/08/02 DOTA
在树莓派2或树莓派B+上安装Python和OpenCV的教程
2015/03/30 Python
使用python脚本实现查询火车票工具
2018/07/19 Python
Atom Python 配置Python3 解释器的方法
2019/08/28 Python
PyTorch中 tensor.detach() 和 tensor.data 的区别详解
2020/01/06 Python
你需要学会的8个Python列表技巧
2020/06/24 Python
python 绘制国旗的示例
2020/09/27 Python
实例讲解CSS3中的border-radius属性
2015/08/18 HTML / CSS
html5超简单的localStorage实现记住密码的功能实现
2017/09/07 HTML / CSS
购买瑞典当代设计的腕表和太阳眼镜:TRIWA
2016/10/30 全球购物
Abbacino官网:包、钱包和女士配饰
2019/04/15 全球购物
大学同学聚会邀请函
2014/01/19 职场文书
《窗前的气球》教学反思
2014/04/07 职场文书
职业生涯规划书结束语
2014/04/15 职场文书
面试通知短信
2015/04/20 职场文书
毕业欢送晚会主持词
2019/06/25 职场文书
springboot @ConfigurationProperties和@PropertySource的区别
2021/06/11 Java/Android