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的的一个隔行变色,鼠标移动变色的小插件
Jul 06 Javascript
一个简单的JS鼠标悬停特效具体方法
Jun 17 Javascript
javascript检测浏览器的缩放状态实现代码
Sep 28 Javascript
Jquery api 速查表分享
Jan 12 Javascript
javascript时间排序算法实现活动秒杀倒计时效果
Jan 28 Javascript
easyui combobox开启搜索自动完成功能的实例代码
Nov 08 Javascript
vue.js实现表格合并示例代码
Nov 30 Javascript
原生JS实现跑马灯效果
Feb 20 Javascript
Material(包括Material Icon)在Angular2中的使用详解
Feb 11 Javascript
vue 实现边输入边搜索功能的实例讲解
Sep 16 Javascript
15个顶级开源JavaScript框架和库
Oct 10 Javascript
微信小程序实现消息框弹出动画
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中使用excel的简单介绍
2013/08/02 PHP
PHPStorm+XDebug进行调试图文教程
2016/06/13 PHP
PHP应用跨时区功能的实现方法
2019/03/21 PHP
js中的escape及unescape函数的php实现代码
2007/09/04 Javascript
jQuery UI Datepicker length为空或不是对象错误的解决方法
2010/12/19 Javascript
70+漂亮且极具亲和力的导航菜单设计国外网站推荐
2011/09/20 Javascript
解读JavaScript中 For, While与递归的用法
2013/05/07 Javascript
JS远程获取网页源代码实例
2013/09/05 Javascript
javascript与jquery中跳出循环的区别总结
2013/11/04 Javascript
jquery对table中各数据的增加、保存、删除操作示例
2014/05/14 Javascript
超炫的jquery仿flash导航栏特效
2014/11/11 Javascript
jQuery实现文本框输入同步的方法
2015/06/20 Javascript
JavaScript统计字符串中每个字符出现次数完整实例
2016/01/28 Javascript
在javascript中创建对象的各种模式解析
2016/05/16 Javascript
js将滚动条滚动到指定位置的简单实现方法
2016/06/25 Javascript
JavaScript算法系列之快速排序(Quicksort)算法实例详解
2016/09/04 Javascript
详解Webpack+Babel+React开发环境的搭建的方法步骤
2018/01/09 Javascript
小程序自定义弹框效果
2020/11/16 Javascript
[48:18]DOTA2-DPC中国联赛 正赛 RNG vs Dynasty BO3 第二场 1月29日
2021/03/11 DOTA
Python编写生成验证码的脚本的教程
2015/05/04 Python
Python轻量级ORM框架Peewee访问sqlite数据库的方法详解
2017/07/20 Python
Python实现识别手写数字大纲
2018/01/29 Python
详解TensorFlow查看ckpt中变量的几种方法
2018/06/19 Python
Python判断一个list中是否包含另一个list全部元素的方法分析
2018/12/24 Python
Django uwsgi Nginx 的生产环境部署详解
2019/02/02 Python
利用ImageAI库只需几行python代码实现目标检测
2019/08/09 Python
pytorch 固定部分参数训练的方法
2019/08/17 Python
详解canvas多边形(蜘蛛图)的画法示例
2018/01/29 HTML / CSS
服装设计专业自荐书范文
2013/12/30 职场文书
国际商务专业毕业生自我鉴定2014
2014/09/27 职场文书
群众路线查摆问题及整改措施
2014/10/10 职场文书
承诺函格式模板
2015/01/21 职场文书
公司行政助理岗位职责
2015/04/11 职场文书
基于Python和openCV实现图像的全景拼接详细步骤
2021/10/05 Python
Python GUI编程之tkinter 关于 ttkbootstrap 的使用详解
2022/03/03 Python
Java Lambda表达式常用的函数式接口
2022/04/07 Java/Android