在程序语言中,字符串可以说是最常用的一种类型,而在程序中对字符串的操作也是十分频繁。当程序语言自带多种字符串操作的方法时,用该语言编程程序时就有很多的便利性,提高开发的效率。但是当方法过多,甚至目的相似、参数雷同的时候,就容易造成迷惑难以选择的窘境。

在JavaScript中就有这样的情况出现,对于取字符串的子串的操作,JavaScript提供了三种不同的方法:slice,substr,substring。虽然在网上随便搜索一下,就可以找到介绍三者区别的文章,但是每次使用的时候,依然会迷糊无从选择。

JavaScript中String 对象的slice()、substring()、substr()方法都能提取字符串的一部分,但使用时有所区别。

JavaScript中String 对象的slice()、substring()、substr()方法都能提取字符串的一部分,但使用时有所区别。

  • stringObject.slice(startIndex,endIndex)

返回字符串 stringObject 从 startIndex 开始(包括 startIndex )到 endIndex 结束(不包括 endIndex )为止的所有字符。

1)参数 endIndex 可选,如果没有指定,则默认为字符串的长度 stringObject.length 。

var stringObject = “hello world!”;
  alert(stringObject.slice(3)); // lo world!
  alert(stringObject.slice(3,stringObject.length)); // lo world!

【注1】字符串中第一个字符的位置是从【0】开始的,最后一个字符的位置为【stringObject.length-1】,所以slice()方法返回的字符串不包括endIndex位置的字符。

2)startIndex 、endIndex 可以是负数。如果为负,则表示从字符串尾部开始算起。即-1表示字符串最后一个字符。

var stringObject = “hello world!”;
  alert(stringObject.slice(-3)); // ld!
  alert(stringObject.slice(-3,stringObject.length)); // ld!
  alert(stringObject.slice(-3,-1)); // ld

【注2】合理运用负数可以简化代码

3)startIndex、endIndex 都是可选的,如果都不填则返回字符串 stringObject 的全部,等同于slice(0)

var stringObject = “hello world!”;
  alert(stringObject.slice()); // hello world!
  alert(stringObject.slice(0)); // hello world!

4)如果startIndex、endIndex 相等,则返回空串

【注3】String.slice() 与 Array.slice() 相似

  • stringObject.substring(startIndex、endIndex)

返回字符串 stringObject 从 startIndex 开始(包括 startIndex )到 endIndex 结束(不包括 endIndex )为止的所有字符。

1)startIndex  是一个非负的整数,必须填写。endIndex 是一个非负整数,可选。如果没有,则默认为字符串的长度stringObject.length 。

var stringObject = “hello world!”;
  alert(stringObject.substring(3)); // lo world!
  alert(stringObject.substring(3,stringObject.length)); // lo world!
  alert(stringObject.substring(3,7)); // lo w,空格也算在内[l][o][ ][w]

2)如果startIndex、endIndex 相等,则返回空串。如果startIndex 比 endIndex 大,则提取子串之前,调换两个参数。即stringObject.substring(startIndex,endIndex)等同于stringObject.substring(endIndex,startIndex)

var stringObject = “hello world!”;
  alert(stringObject.substring(3,3)); // 空串
  alert(stringObject.substring(3,7)); // lo w
  alert(stringObject.substring(7,3)); // lo w

注4】与substring()相比,slice()更灵活,可以接收负参数。

  • stringObject.substr(startIndex,length)

返回字符串 stringObject 从 startIndex 开始(包括 startIndex )指定数目(length)的字符字符。

1)startIndex 必须填写,可以是负数。如果为负,则表示从字符串尾部开始算起。即-1表示字符串最后一个字符。

2)参数 length 可选,如果没有指定,则默认为字符串的长度 stringObject.length 。

var stringObject = “hello world!”;
  alert(stringObject.substr(3)); // lo world!
  alert(stringObject.substr(3,stringObject.length)); // lo world!
  alert(stringObject.substr(3,4)); // lo w

3)substr()可以代替slice()和substring()来使用,从上面代码看出 stringObject.substr(3,4) 等同于stringObject.substring(3,7)

【注5】ECMAscript 没有对该方法进行标准化,因此尽量少使用该方法。

——————————————

结合网上介绍的区别,在本文中将它们的异同之处罗列在表中,方便参照和区分。

测试字符串: "0123456789"

  参数 方法
参数1 参数2 slice(begin[, end]) substr(start[, length]) substring(from[, to])
参数/结果 7   789 789 789
说明 只有参数1,省略参数2 参数1指定的坐标截取到字符串结尾
参数/结果 -3   789 789 0123456789
说明 参数1为负数 从字符串末尾开始计算位置* 视为0
参数/结果 21        
说明 参数1大于或等于字符串长度 视为字符串长度,即返回空字符串
参数/结果 “3.21″   3456789 3456789 3456789
说明 参数1为浮点数或只含数字的字符串 类似parseInt()将数值转换成整形
参数/结果 NaN   0123456789 0123456789 0123456789
说明 参数1非为有效数值 非有效数值视为视为0
参数/结果 3 7 3456 3456789 3456
说明 既有参数1,又有参数2 参数1的位置截取到参数2的位置 参数1的位置截取长度参数2的字符 同slice()
参数/结果 7 3   789 3456
说明 参数1大于参数2 返回空字符串 参数1的位置截取长度参数2的字符 交换参数1参数2再进行截取
参数/结果 3 -3 3456   012
说明 参数2为负数 负数从字符末尾开始计算位置 视为长度0,返回空字符串 交换参数,负数视为0
参数/结果 3 21 3456789 3456789 3456789
说明 参数2大于或等于字符串长度 视为字符串长度,结果同省略参数2
参数/结果 3 NaN     012
说明 参数2非为有效数值 非有效数值视为0,返回空字符串 非有效数值视为0,因长度为0返回空字符串 非有效数值视为0,交换参数进行截取
参数/结果 -7 -3 3456    
说明 参数1参数2都为负数 从字符串末尾开始计算位置 长度为负数,返回空字符串 负数视为0,返回空字符串
参数/结果 -7 7 3456 3456789 0123456
说明 参数1为正数,参数2为负数 (自动套用上边的规则,不解释)

*从字符串末尾开始计算位置:-1 指字符串中最后一个字符,-2 指倒数第二个字符,以此类推;也可视为字符串长度与负数之和的位置,若结果小于0,则视为0。

从上述表格对比中不难看出,三个方法之间的主要区别如下:

  • 三个方法的参数1都代表子串开始位置,参数2在slice和substring中表示结束位置,而在substr中代表的则是子串长度;
  • 对于负数态度,当出现在参数1的位置时,slice和substr从末尾开始计算,而substring不支持末尾计数法直接视为0;当出现在参数2位置时,slice和substring的处理同参数1:前者从末尾开始计算,后者转换成0,而substr则视负数长度为0返回空串;
  • 对于参数1小于参数2的情况,substring最大的不同在于它会交换两个参数再截取子串,substr因第二参数表示的是长度因此并无异常,slice曽依然正常搜寻子串始末位置,若开始位置在结尾后边则返回空串。

根据MDN对substr的描述,在IE下可能并不支持负数从末尾计算的方式。

————————

substr 方法
返回一个从指定位置开始的指定长度的子字符串。

stringvar.substr(start [, length ])

参数
stringvar

必选项。要提取子字符串的字符串文字或 String 对象。

start

必选项。所需的子字符串的起始位置。字符串中的第一个字符的索引为 0。

length

可选项。在返回的子字符串中应包括的字符个数。

说明
如果 length 为 0 或负数,将返回一个空字符串。如果没有指定该参数,则子字符串将延续到 stringvar 的最后。

示例
下面的示例演示了substr 方法的用法。

function SubstrDemo(){
   var s, ss;                // 声明变量。
   var s = “The rain in Spain falls mainly in the plain.”;
   ss = s.substr(12, 5);  // 获取子字符串。
   return(ss);               // 返回 “Spain”。
}

substring 方法
返回位于 String 对象中指定位置的子字符串。

strVariable.substring(start, end)
“String Literal”.substring(start, end)

参数
start

指明子字符串的起始位置,该索引从 0 开始起算。

end

指明子字符串的结束位置,该索引从 0 开始起算。

说明
substring 方法将返回一个包含从 start 到最后(不包含 end )的子字符串的字符串。

substring 方法使用 start 和 end 两者中的较小值作为子字符串的起始点。例如, strvar.substring(0, 3) 和 strvar.substring(3, 0) 将返回相同的子字符串。

如果 start 或 end 为 NaN 或者负数,那么将其替换为0。

子字符串的长度等于 start 和 end 之差的绝对值。例如,在 strvar.substring(0, 3) 和 strvar.substring(3, 0) 返回的子字符串的的长度是 3。

示例
下面的示例演示了 substring 方法的用法。

function SubstringDemo(){
   var ss;                         // 声明变量。
   var s = “The rain in Spain falls mainly in the plain..”;
   ss = s.substring(12, 17);   // 取子字符串。
   return(ss);                     // 返回子字符串。
}