JavaScript字符串截取方法

在页面数据处理的过程中都会不可避免的使用字符串的截取操作，有三种方式可以选择，分别是slice，substr,substring

下面详细介绍下使用这三种方式进行截取字符串

slice()

slice() 方法返回一个新的数组对象，这一对象是一个由 begin 和 end 决定的原数组的浅拷贝（包括 begin，不包括end）。原始数组不会被改变。 –MDN传送门

重点知识

• 开始下标索引从0开始
• 使用slice()方法进行截取出来的字符串不包含结束下标对应的字符
• 如果第二个参数省略的话则默认截取到当前开始字符到字符串末尾
• 开始下标和结束下标相等的情况下，截取结果为空
• 开始下标如果大于结束下标截取结果同样为空
• -1表示最后一个下标，-2表示倒数第二个下标元素到最后一个元素

下面用一些🌰来验证一下：

🌰

 let str = "abcdefgh"
 str.slice(1,2)

从下标索引0开始截取2位数(不包含结束字段)也就是从索引1->b到2-b，所以得到的截取之后的结果为b

🌰

 let str = "abcdefgh"
 str.slice(1)

如果省略第二个参数，则获取开始下标索引一直到末尾的数据，从索引1-b开始到结尾，所以得到的截取之后的结果为bcdefgh

🌰

 let str = "abcdefgh"
 str.slice(1, 1)

开始下标和结束下标相同的情况下，得到的截取结果为空

🌰

 let str = "abcdefgh"
 str.slice(3, 1)

开始下标大于结束下标的情况下，得到的截取结果与上面相同

🌰

 let str = "abcdefgh"
 str.slice(-1)
 str.slice(-2)

如果只有一个元素-1则截取最后一个下标，结果为h，如果只有一个元素-2则倒数第二个下标元素到最后一个元素，结果为gh。

这里可以延伸下，如果参数包含两个负数那么获取元素是什么呢？

这个我们可以将正数参数和负数参数作为对等比较，当参数为正数时执行顺序则从左到右，而参数为负数时则是从右到左，下面我们来实际验证下：

 let str = "abcdefgh"
 str.slice(-3, -1)

结合我们上面的结论，可以代入到代码中，第一个参数为-3那么我们从最后一个下标往前数到e，同样不取结束下标，所以得到的结果为f，第二个参数-1，继续推算得到结果g，那么结合下来最终结果就是fg

substr()

这个语法在MDN有一段警告说明：

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

大致意思就是，substr并不是没有纳入规范，不作为标准库的一部分，但是还是可以使用，不过细心的同学可以发现在某些编辑器上这个语法已经显示substr()下面我们来讲下这个语法

substr() 方法返回一个字符串中从指定位置开始到指定字符数的字符。 –MDN传送门

简单来说就是substr()同样包含两个参数，第一个参数表示开始下标，暂时表示为start，第二个参数表示截取的长度，暂时表示为substr

重点知识

• start下标索引从0开始，substr是截取的长度
• start为正且大于或等于字符串总长度，则结果返回空字符串
• start为负，则substr会将它(start)作为字符串末尾开始的一个字符索引
• start为负且abs(start)大于或等于字符串总长度，则substr使用0作为开始提取的索引，这个可以理解为从索引0对应的字符开始，截取substr长度的字符
• 第二个参数为负或0，结果返回空字符串

下面用一些🌰来验证下：

🌰

 let str = "abcdefgh"
 str.substr(1, 2)

第一个开始索引的下标是1所以截取的开始字符是b，然后截取2个字符，得到的结果是bc

🌰

 let str = "abcdefgh"
 str.substr(8, 3) // a1
 str.substr(9, 3) // b2
 str.substr(7, 3) // c3

我们先看a1,b2，索引下标等于字符串总长度，截取字符串为3，得到的结果为空

然后看下c3，索引下标小于字符串总长度，截取字符串为3，从索引下标为7->h开始截取，得到的结果为h

🌰

let str = "abcdefgh"
str.substr(-2, 3) // a1
str.substr(-8, 3) // b2
str.substr(-9, 3) // c3

我们先看下a1符合start为负且小于字符串长度，那么第二个参数按照start从字符串末尾开始截取字符，得到的结果为gh

然后看下b2,c3大于等于字符串长度的情况下，第二个参数会使用0作为开始的索引，也就是说会从字符串索引下标为0->a 开始截取，根据第二个参数截取的字符数得到的结果为abc

substring()

substring() 方法返回一个字符串在开始索引到结束索引之间的一个子集，或从开始索引直到字符串的末尾的一个子集。 – MDN传送门

简单来说就是截取字符串开始索引(start)和结束索引(end)之间的字符

重点知识

• substring()截取字符串规则从start到end(不包括)索引之间的字符
• 如果start等于end，返回一个空字符串
• 如果省略end，字符串提取字符一直到字符串末尾
• 如果start大于end，则执行结果是参数互换，
• 如果任一参数小于0或为NaN，则被当做0
• 如果任一参数大于字符串总长度，则该参数作为字符串总长度

下面用一些🌰来验证下：

🌰：

let str = "abcdefgh"
str.substring(1, 3)

通过开始和结果索引进行截取字符的规则，首先索引1对应的字符b，然后结束索引3对应的字符为d，根据字符不包括end原则，得到的最终结果bc

🌰：

let str = "abcdefgh"
str.substring(1, 1)

如果start等于end则返回结果为空

🌰：

 let str = "abcdefgh"
 str.substring(1)

如果省略end，则从start索引开始提取字符串到末尾，所以得到的结果为bcdefgh

🌰：

 let str = "abcdefgh"
 str.substring(3, 1)

如果start大于end，那么按照规则参数进行互换，原有start->3 变更为start-1，原有end-1变更为end-3，得到的结果为bc

🌰：

 let str = "abcdefgh"
 str.substring(0, 1)
 str.substring(NaN, 1)

如果任意参数为0或NaN，则参数作为0进行截取操作，所以得到结果为a

🌰：

 let str = "abcdefgh"
 str.substring(0, 8)
 str.substring(0, 9)

如果任一参数大于等于字符串总长度，则该参数作为字符串总长度，所以得到的结果为abcdefgh

end~

个人博客已上线，欢迎来访~
传送门：夜雨炊烟