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 相关文章推荐
新浪刚打开页面出来的全屏广告代码
Apr 02 Javascript
关于JavaScript定义类和对象的几种方式
Nov 09 Javascript
在jQuery ajax中按钮button和submit的区别分析
Oct 07 Javascript
jQuery事件绑定和委托实例
Nov 25 Javascript
jQuery搜索子元素的方法
Feb 10 Javascript
值得分享的Bootstrap Ace模板实现菜单和Tab页效果
Dec 30 Javascript
个人网站留言页面(前端jQuery编写、后台php读写MySQL)
May 03 Javascript
jQuery使用DataTable实现删除数据后重新加载功能
Feb 27 Javascript
vue 的点击事件获取当前点击的元素方法
Sep 15 Javascript
vue新vue-cli3环境配置和模拟json数据的实例
Sep 19 Javascript
JavaScript常见鼠标事件与用法分析
Jan 03 Javascript
Vue中使用Echarts仪表盘展示实时数据的实现
Nov 01 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
动态新闻发布的实现及其技巧
2006/10/09 PHP
php 404错误页面实现代码
2009/06/22 PHP
PHP 数组遍历方法大全(foreach,list,each)
2010/06/30 PHP
thinkphp配置连接数据库技巧
2014/12/02 PHP
浅谈PHP各环境下的伪静态配置
2019/03/13 PHP
基于Jquery实现表格动态分页实现代码
2011/06/21 Javascript
Jquery+CSS3实现一款简洁大气带滑动效果的弹出层
2013/05/15 Javascript
复选框全选与全不选操作实现思路
2013/08/18 Javascript
jquery-syntax动态语法着色示例代码
2014/05/14 Javascript
基于socket.io和node.js搭建即时通信系统
2014/07/30 Javascript
JavaScript数据类型之基本类型和引用类型的值
2015/04/01 Javascript
简介JavaScript中的push()方法的使用
2015/06/09 Javascript
微信浏览器禁止页面下拉查看网址实例详解
2017/06/28 Javascript
基于zepto.js实现手机相册功能
2017/07/11 Javascript
理解 JavaScript EventEmitter
2018/03/29 Javascript
express+vue+mongodb+session 实现注册登录功能
2018/12/06 Javascript
VUE简单的定时器实时刷新的实现方法
2019/01/20 Javascript
vue实现动态显示与隐藏底部导航的方法分析
2019/02/11 Javascript
微信小程序开发实现的选项卡(窗口顶部/底部TabBar)页面切换功能图文详解
2019/05/14 Javascript
JS脚本实现定时到网站上签到/签退功能
2020/04/22 Javascript
VUE 单页面使用 echart 窗口变化时的用法
2020/07/30 Javascript
[02:39]DOTA2国际邀请赛助威团西雅图第一天
2013/08/08 DOTA
Python中关键字is与==的区别简述
2014/07/31 Python
Python中3种内建数据结构:列表、元组和字典
2014/11/30 Python
python实现模拟按键,自动翻页看u17漫画
2015/03/17 Python
在Python中使用Neo4j数据库的教程
2015/04/16 Python
详解字典树Trie结构及其Python代码实现
2016/06/03 Python
python matplotlib 在指定的两个点之间连线方法
2018/05/25 Python
金融学专科生自我鉴定
2014/02/21 职场文书
2014年体育教学工作总结
2014/12/09 职场文书
秦始皇兵马俑导游词
2015/02/02 职场文书
护士实习自荐信
2015/03/06 职场文书
教师“一帮一”结对子活动总结
2015/05/07 职场文书
Python Pygame实战之塔防游戏的实现
2022/03/17 Python
PostgreSQL并行计算算法及参数强制并行度设置方法
2022/04/06 PostgreSQL
python游戏开发Pygame框架
2022/04/22 Python