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 表格分页等操作实现代码(pagedown,pageup)
Apr 11 Javascript
JavaScript获取URL汇总
Jun 08 Javascript
jQuery跨域问题解决方案
Aug 03 Javascript
基于jquery实现select选择框内容左右移动添加删除代码分享
Aug 25 Javascript
JavaScript提高性能知识点汇总
Jan 15 Javascript
JS实现响应鼠标点击动画渐变弹出层效果代码
Mar 25 Javascript
Ajax使用原生态JS验证用户名是否存在
May 26 Javascript
AngularJS变量及过滤器Filter用法分析
Nov 22 Javascript
浅谈VUE-CLI脚手架热更新太慢的原因和解决方法
Sep 28 Javascript
layer弹出层自适应高度,垂直水平居中的实现
Sep 16 Javascript
如何修改Vue打包后文件的接口地址配置的方法
Apr 22 Javascript
vue使用localStorage持久性存储实现评论列表
Apr 14 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 字符转义 注意事项
2009/05/27 PHP
PHP Socket 编程
2010/04/09 PHP
《PHP编程最快明白》第八讲:php启发和小结
2010/11/01 PHP
PHP实现根据设备类型自动跳转相应页面的方法
2014/07/24 PHP
PHP中对数组的一些常用的增、删、插操作函数总结
2015/11/27 PHP
ThinkPHP中session函数详解
2016/09/14 PHP
PHP使用preg_split()分割特殊字符(元字符等)的方法分析
2017/02/04 PHP
Laravel框架实现利用中间件进行操作日志记录功能
2018/06/06 PHP
JQuery通过Ajax提交表单并返回结果
2011/07/31 Javascript
FF火狐下获取一个元素同类型的相邻元素实现代码
2012/12/15 Javascript
js实现瀑布流的一种简单方法实例分享
2013/11/04 Javascript
setTimeout和setInterval的深入理解
2013/11/08 Javascript
基于AngularJs + Bootstrap + AngularStrap相结合实现省市区联动代码
2016/05/30 Javascript
深入理解jQuery 事件处理
2016/06/14 Javascript
浅谈JS中json数据的处理
2016/06/30 Javascript
js仿小米官网图片轮播特效
2016/09/29 Javascript
JS跨域请求外部服务器的资源
2017/02/06 Javascript
Bootstrap 网格系统布局详解
2017/03/19 Javascript
解决bootstrap下拉菜单点击立即隐藏bug的方法
2017/06/13 Javascript
vue项目在安卓低版本机显示空白的原因分析(两种)
2018/09/04 Javascript
Vue发布订阅模式实现过程图解
2020/04/30 Javascript
js实现双色球效果
2020/08/02 Javascript
[02:11]DOTA2上海特级锦标赛主赛事第二日RECAP
2016/03/04 DOTA
python动态加载包的方法小结
2016/04/18 Python
python实现求最长回文子串长度
2018/01/22 Python
对python打乱数据集中X,y标签对的方法详解
2018/12/14 Python
Django实现一对多表模型的跨表查询方法
2018/12/18 Python
Django 导出项目依赖库到 requirements.txt过程解析
2019/08/23 Python
Python之指数与E记法的区别详解
2019/11/21 Python
tf.concat中axis的含义与使用详解
2020/02/07 Python
pycharm激活码快速激活及使用步骤
2020/03/12 Python
Anaconda+VSCode配置tensorflow开发环境的教程详解
2020/03/30 Python
利用Python实现某OA系统的自动定位功能
2020/05/27 Python
中餐厅主管的职责范文
2014/02/04 职场文书
财务总经理岗位职责
2014/02/16 职场文书
高中军训感言200字
2014/02/23 职场文书