字符串方法substr和substring的区别

195 阅读3分钟

警告:尽管 String.prototype.substr(…) 没有严格被废弃 (as in "removed from the Web standards"), 但它被认作是遗留的函数并且可以的话应该避免使用。它并非 JavaScript 核心语言的一部分,未来将可能会被移除掉。如果可以的话,使用 substring() 替代它。

这句话我实在mdn上看到的,也就是说substr(),尽量避免使用,推荐使用substring(),但是这两种方法,我们都可以了解一下。

第一种String.prototype.substr()

substr() 方法返回一个字符串中从指定位置开始到指定字符数的字符。
语法str.substr(start[, length]),这个里面与两个参数,

start:开始提取字符的位置。如果为负值,则被看作 strLength + start,其中 strLength 为字符串的长度(例如,如果 start-3,则被看作 strLength + (-3))。
length:可选。表示的是提取的字符数。

我们直接来看一下实际代码演示

var str='abcdef'
//  如果start这个参数为整数
var str1=str.substr(6)
console.log(str1);//此时控制台打印出来是空的,什么也没有,如果 start 为正值,且大于或等于字符串的长度,则 substr 返回一个空字符串。
var str2=str.substr(-2)
console.log(str2);//'ef'
// //  如果 start 为负值,则 substr 把它作为从字符串末尾开始的一个字符索引。
var str3=str.substr(-6)
console.log(str3);//'abcdef'
//  如果 start 为负值且 abs(start) 大于字符串的长度,则 substr 使用 0 作为开始提取的索引。注意负的 start 参数不被 Microsoft JScript 所支持。
// 上面讲到的是,只写一个参数的时候,那么加上第二个参数,是怎么使用的
var str4=str.substr(1,3)
console.log(str4);//'bcd'
var str5=str.substr(-1,3)
console.log(str5);//'f'像这种后面截取已经没东西了,就只能截取到能截取的了
// 第一个参数表述开始的位置,第二个为从开始的位置,从左往右一共截取多少个字符

第二种 String.prototype.substring()

substring() 方法返回一个字符串在开始索引到结束索引之间的一个子集,或从开始索引直到字符串的末尾的一个子集。
语法:str.substring(indexStart[, indexEnd])
参数1:indexStart:需要截取的第一个字符的索引,该索引位置的字符作为返回的字符串的首字母。
参数2:indexEnd:可选。一个 0 到字符串长度之间的整数,以该数字为索引的字符不包含在截取的字符串内。

第二个参数和substr()方法有不同,注意区分

下面我们也来看一下啊这个方法的演示代码

  • 如果 indexStart 等于 indexEndsubstring 返回一个空字符串。
  • 如果省略 indexEndsubstring 提取字符一直到字符串末尾。
  • 如果任一参数小于 0 或为 NaN,则被当作 0。
  • 如果任一参数大于 stringName.length,则被当作 stringName.length
  • 如果 indexStart 大于 indexEnd,则 substring 的执行效果就像两个参数调换了一样。见下面的例子。
var oneString = "abcdef";

console.log(oneString.substring(0));//'abcdef'
console.log(oneString.substring(-7));//'abcdef'
console.log(oneString.substring(2,100));//'cdef'
console.log(oneString.substring(0,3));//'abc'
这个验证了第12这两点
var oneString = "abcdef";

// 结果输出 都是"abc"
console.log(oneString.substring(0,3));
console.log(oneString.substring(3,0));
console.log(oneString.substring(3,-3));
console.log(oneString.substring(3,NaN));
console.log(oneString.substring(-2,3));
console.log(oneString.substring(NaN,3));
//再次验证了上面的第345这三点,

其实理解起来也很简单的,就是如果遇到NaN或者为负数,就当作0,如果遇到第一个参数比第二个参数大,就互换位置

这两个方法有一个地方需要注意一下的

substr()的第二参数和substring()第二个参数,逻辑上是有一点不同的,
substr()表示第二参数,表示截取多少个,
substring()第二参数表示的是截取到这个索引号的前一位

上面的内容建议自己动手操作一遍,加深印象

细节拉满了.gif