深入浅析JavaScript字符串操作方法 slice、substr、substring及其IE兼容性_javascript技巧

在截取字符串时常常会用到substr()、substring()、slice()方法,有时混淆之间的用法,故总结下。

阅读目录
•slice()
•substring()
•substr()
•总结 

slice()

定义:接受一个或者两个参数,第一个参数指定子字符串的开始位置。第二个参数表示子字符串的结束位置(不包括结束位置的那个字符),如果没有传递第二个参数,则将字符串的长度作为结束位置。

1、传递参数为正值情况:

var str ="helloWorld";
// 一个参数,则将字符串长度作为结束位置
alert(str.slice(3)); // "loWorld"
// 两个参数,7位置上的字符为"r",但不包括结束位置的字符
alert(str.slice(3,7)); // "loWo" 

2、传递参数为负值的情况:

slice()方法会将传入的负值与字符串长度相加。
 var str ="helloWorld";
// 一个参数,与字符串长度相加即为slice(7)
alert(str.slice(-3)); // "rld"
// 两个参数,与字符串长度相加即为slice(3,6)
alert(str.slice(3,-4)); // "loW" 

3、第二个参数比第一个参数值小的情况:

slice()方法传入的第二个参数比第一个参数小的话,则返回空字符串。

var str ="helloWorld";
alert(str.slice(5,3)); // "" 

4、IE兼容性

在IE8浏览器测试下,没啥问题,行为与现代浏览器一致。

substring()

定义:接受一个或者两个参数,第一个参数指定子字符串的开始位置。第二个参数表示子字符串的结束位置(不包括结束位置的那个字符),如果没有传递第二个参数,则将字符串的长度作为结束位置。

1、传递参数为正值情况:与slice()方法行为相同的

var str ="helloWorld";
// 一个参数,则将字符串长度作为结束位置
alert(str.substring(3)); // "loWorld"
// 两个参数,7位置上的字符为"r",但不包括结束位置的字符
alert(str.substring(3,7)); // "loWo" 

2、传递参数为负值的情况:

substring()方法会把所有负值参数转换为0。来看下例子:

var str ="helloWorld";
// 两个参数,-4会转换为0,相当于substring(3,0) -->即为 substring(0,3)
alert(str.substring(3,-4)); // "hel" 

substring()方法会将较小的数作为开始位置,将较大的数作为结束位置。如上面的例子substring(3,0) 与substring(0,3)是一样效果的。

4、IE兼容性

在IE8浏览器测试下,没啥问题,行为与现代浏览器一致。

substr()

定义:接受一个或者两个参数,第一个参数指定子字符串的开始位置。第二个参数跟之前的方法有些区别,表示返回的字符个数。如果没有传递第二个参数,则将字符串的长度作为结束位置。来看例子:

1、传递参数为正值情况:

var str ="helloWorld";
// 一个参数,则将字符串长度作为结束位置
alert(str.substr(3)); // "loWorld"
// 两个参数,从位置3开始截取后面7个字符
alert(str.substr(3,7)); // "loWorld" 

2、传递参数为负值的情况:

substr()方法会将负的第一个参数加上字符串的长度,而将负的第二个参数转换为0。

var str ="helloWorld";
// 将第一个负的参数加上字符串的长度--->
//即为:substr(7,5) ,从位置7开始向后截取5个字符
alert(str.substr(-3,5)); // "rld"
// 将第二个参数转换为0
// 即为:substr(3,0),即从位置3截取0个字符串,则返回空
alert(str.substr(3,-2)); // "" 

3、IE兼容性

substr()方法传递负值的情况下会存在问题,会返回原始的字符串。IE9修复了此问题。

总结

在传递正值参数情况下,slice() 和 substring () 行为是一致的,substr()方法在第二个参数上会容易混淆

在传递负值参数情况下,slice() 方法是通过字符串长度相加,符合一般思维,substring()第二个参数转换为0会容易出问题,起始位置会容易变更,substr() 方法负值情况下会出现IE兼容性问题。

综上,小弟一般推荐使用slice()方法。

下面给大家介绍slice,substr和substring的区别

首先,他们都接收两个参数,slice和substring接收的是起始位置和结束位置(不包括结束位置),而substr接收的则是起始位置和所要返回的字符串长度。直接看下面例子:

 var test = 'hello world';
  alert(test.slice(,));    //o w
  alert(test.substring(,));   //o w
  alert(test.substr(,));   //o world 

这里有个需要注意的地方就是:substring是以两个参数中较小一个作为起始位置,较大的参数作为结束位置。

如:

alert(test.substring(7,4));   //o w 

接着,当接收的参数是负数时,slice会将它字符串的长度与对应的负数相加,结果作为参数;substr则仅仅是将第一个参数与字符串长度相加后的结果作为第一个参数;substring则干脆将负参数都直接转换为0。测试代码如下:

var test = 'hello world';
alert(test.slice(-));   //rld
alert(test.substring(-));  //hello world
alert(test.substr(-));  //rld
alert(test.slice(,-));  //lo w
alert(test.substring(,-)); //hel
alert(test.substr(,-));  //空字符串 

 注意:IE对substr接收负值的处理有错,它会返回原始字符串。

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索js_substr和substring
, js_substring_substr
slice_substr_substring
substr slice、slice和substr、js slice substr、js substring substr、substring substr,以便于您获取更多的相关知识。

时间: 2024-09-20 13:23:41

深入浅析JavaScript字符串操作方法 slice、substr、substring及其IE兼容性_javascript技巧的相关文章

JavaScript中数组slice和splice的对比小结_javascript技巧

前言 今天重温了一下Javascript,看到了数组的方法,其中有两个比较相似的方法--splice和splice,看着很像,就是多了一个p,但是用法却相当不一样. 在使用中,可以通过选择一个具有强语义表达性的 API 来减少混淆的发生. 1.slice slice是指定在一个数组中的元素创建一个新的数组,即原数组不会变 数组的 slice (ECMAScript 5.1 标准 15.4.4.10 节)非常类似于字符串的 slice.根据规范,slice 需要两个参数,起点和终点.它会返回一个包

javascript字符串替换函数如何一次性全部替换掉_javascript技巧

JS字符串替换函数:Replace("字符串1″, "字符串2″) 1.我们都知道JS中字符串替换函数是Replace("字符串1″, "字符串2″),但是这个函数只能将第一次出现的字符串1替换掉,那么我们如何才能一次性全部替换掉了? <script> var s = "LOVE LIFE ! LOVE JAVA ..."; alert(s); alert(s.replace("LOVE ", "爱&qu

浅析javascript中函数声明和函数表达式的区别_javascript技巧

javascript中声明函数的方法有两种:函数声明式和函数表达式. 区别如下: 1).以函数声明的方法定义的函数,函数名是必须的,而函数表达式的函数名是可选的. 2).以函数声明的方法定义的函数,函数可以在函数声明之前调用,而函数表达式的函数只能在声明之后调用. 3).以函数声明的方法定义的函数并不是真正的声明,它们仅仅可以出现在全局中,或者嵌套在其他的函数中,但是它们不能出现在循环,条件或者try/catch/finally中,而     函数表达式可以在任何地方声明. 下面分别用两种方法定

深入浅析JavaScript系列(13):This? Yes,this!_javascript技巧

前言 在这篇文章里,我们将讨论跟执行上下文直接相关的更多细节.讨论的主题就是this关键字.实践证明,这个主题很难,在不同执行上下文中this的确定经常会发生问题. 许多程序员习惯的认为,在程序语言中,this关键字与面向对象程序开发紧密相关,其完全指向由构造器新创建的对象.在ECMAScript规范中也是这样实现的,但正如我们将看到那样,在ECMAScript中,this并不限于只用来指向新创建的对象. 英文翻译: Dmitry A. Soshnikov在Stoyan Stefanov的帮助下

浅析JavaScript中两种类型的全局对象/函数_javascript技巧

这里所说的JavaScript指浏览器环境中的包括宿主环境在内的.第一种是ECMAScript Global Object,第二种是宿主环境(Host)下的全局对象/函数. 一.核心JavaScript内置对象,即ECMAScript实现提供的不依赖于宿主环境的对象 这些对象在程序执行之前就已经(实例化)存在了.ECMAScript称为The Global Object,分为以下几种 1, 值属性的全局对象(Value Properties of the Global Object).有NaN,

JavaScript截取字符串的Slice、Substring、Substr函数详解和比较

 这篇文章主要介绍了JavaScript截取字符串的Slice.Substring.Substr函数详解和比较,需要的朋友可以参考下 在JavaScript中,提取子字符串主要是通过 Slice.Substring.Substr 三个方法之一.    代码如下:// slice  // 语法: string.slice(start [, stop]) "Good news, everyone!".slice(5,9);  // 'news'   // substring  // 语法:

JavaScript截取字符串的Slice、Substring、Substr函数详解和比较_javascript技巧

在JavaScript中,提取子字符串主要是通过 Slice.Substring.Substr 三个方法之一. 复制代码 代码如下: // slice // 语法: string.slice(start [, stop])"Good news, everyone!".slice(5,9); // 'news' // substring // 语法: string.substring(indexA [, indexB])"Good news, everyone!".s

js字符串截取函数substr substring slice使用对比_javascript技巧

常用三个的字符串截取函数:substr substring slice,调用方式如下 复制代码 代码如下: stringObject.slice(start,end) stringObject.substr(start,length) stringObject.substring(start,end) 最明显的是substr,第二个参数是length,是截取长度,其他两个函数的第二个参数都是末尾字符的下标(这里并不包括该下标的字符,只截取到该字符的前一个字符) slice跟substring比,

JS 截取字符串substr 和 substring方法的区别_javascript技巧

substr 方法 返回一个从指定位置开始的指定长度的子字符串. stringvar.substr(start [, length ]) 参数 stringvar 必选项.要提取子字符串的字符串文字或 String 对象. start 必选项.所需的子字符串的起始位置.字符串中的第一个字符的索引为 0. length 可选项.在返回的子字符串中应包括的字符个数. 说明 如果 length 为 0 或负数,将返回一个空字符串.如果没有指定该参数,则子字符串将延续到 stringvar 的最后. 示