likes
comments
collection
share

str.slice()、str.substring()、str.substr()

作者站长头像
站长
· 阅读数 35

str.slice() 与 str.substring() 异同比较

相同点

  • 都是对某个字符串进行截取，返回一个新字符串，不会改动原字符串
  • 没参数时，相当于复制
  • 省略 endIndex，截取字符一直到字符串末尾
  • 截取不包含 endIndex
  • 参数可以为负数
  • 任一参数为 NaN，会被当做 0 看待
  • 任一参数大于 strLength，则被当做 strLength 看待
  • beginIndex 等于 endIndex，返回一个空字符串

不同点

  • slice()会对负值参数进行 strLength + beginIndex(或 endIndex) 处理，substring()会将负值参数当作 0 看待
  • slice()中，如果最终的beginIndex 大于 endIndex，返回一个空字符串；而substring()执行效果就像两个参数调换了一样

详细介绍

String.prototype.slice()

slice()  方法提取某个字符串的一部分，并返回一个新的字符串，且不会改动原字符串。

语法

str.slice() // 相当于复制
str.slice(beginIndex[, endIndex])

参数

  • beginIndex

    从该索引处开始提取原字符串中的字符。如果值为负数，会被当做 strLength + beginIndex 看待

  • endIndex

    可选。在该索引处结束提取字符串，以该数字为索引的字符不包含在提取的字符串内。如果省略该参数，slice() 会一直提取到字符串末尾；如果该参数为负数，则被看做是 strLength + endIndex。

返回值

返回一个从原字符串中提取出来的新字符串。

总结

  • slice() 从一个字符串中提取字符串并返回新字符串。在一个字符串中的改变不会影响另一个字符串。也就是说，slice 不会修改原字符串（只会返回一个包含了原字符串中部分字符的新字符串）。

  • slice() 提取的新字符串包括beginIndex但不包括 endIndex

  • 如果省略 endIndex，slice()提取字符一直到字符串末尾

  • 如果任一参数为负数，则作 strLength + beginIndex(或 endIndex) 处理

  • 如果任一参数为 NaN，会被当做 0 看待

  • 如果任一参数大于 strLength，则被当作 strLength 看待

  • 如果 beginIndex 等于 endIndex，slice() 返回一个空字符串

  • 如果 beginIndex、endIndex都已大于等于 0，并且beginIndex大于等于endIndex，返回一个空字符串

示例

let str = '0123456789';
// strLength = 10
console.log(str.slice()); // '0123456789'
console.log(str.slice(0)); // '0123456789'
console.log(str.slice(0, str.length)); // '0123456789'

console.log(str.slice(2, 6)); // '2345' （不包括 endIndex）
console.log(str.slice(6, 2)); // '' （beginIndex 大于 endIndex，无效）
console.log(str.slice(2, 15)); // '23456789' （endIndex 大于 strLength）

console.log(str.slice(4)); // '456789'
console.log(str.slice(-4)); // '6789' （等同 str.slice(6)）
console.log(str.slice(15)); // '' 

console.log(str.slice(4, -2)); // '4567' （等同 str.slice(4, 8)）
console.log(str.slice(-4, 2)); // '' （等同 str.slice(6, 2)）
console.log(str.slice(-4, -2)); // '67' （等同 str.slice(6, 8)）
console.log(str.slice(4, 4)); // '' （beginIndex 等于 endIndex）

console.log(str.slice(NaN)); // '0123456789'
console.log(str.slice(NaN, 4)); // '0123'
console.log(str.slice(4, NaN)); // ''

String.prototype.substring()

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

语法

str.substring() // 相当于复制
str.substring(beginIndex[, endIndex])

参数

  • beginIndex

    从该索引处开始提取原字符串中的字符。如果值为负数，会被当做 0 看待

  • endIndex

    可选。在该索引处结束截取字符串，以该数字为索引的字符不包含在截取的字符串内。如果省略该参数，substring() 会一直截取到字符串末尾；如果该参数为负数，则被看做是 0。

返回值

返回一个从原字符串中提取出来的新字符串。

总结

  • substring() 从一个字符串中提取字符串并返回新字符串。在一个字符串中的改变不会影响另一个字符串。也就是说，substring 不会修改原字符串（只会返回一个包含了原字符串中部分字符的新字符串）。
  • substring() 提取的新字符串包括beginIndex但不包括 endIndex
  • 如果省略 endIndex，substring()提取字符一直到字符串末尾
  • 如果任一参数为负数或为 NaN，会被当做 0 看待
  • 如果任一参数大于 strLength，则被当作 strLength 看待
  • 如果 beginIndex 等于 endIndex，substring() 返回一个空字符串
  • 如果 beginIndex、endIndex都大于 0，并且beginIndex大于endIndex，则 substring() 的执行效果就像两个参数调换了一样。

示例

let str = '0123456789';
// strLength = 10
console.log(str.substring()); // '0123456789'
console.log(str.substring(0)); // '0123456789'
console.log(str.substring(0, str.length)); // '0123456789'

console.log(str.substring(2, 6)); // '2345' （不包括 endIndex）
console.log(str.substring(6, 2)); // '2345' （调换位置）
console.log(str.substring(2, 15)); // '23456789' （endIndex 大于 strLength）

console.log(str.substring(4)); // '456789'
console.log(str.substring(-4)); // '0123456789' （当作0）
console.log(str.substring(15)); // '' 

console.log(str.substring(4, -2)); // '0123' （等同 str.substring(4, 0)，再等同str.substring(0, 4)）
console.log(str.substring(-4, 2)); // '01' （等同 str.substring(0, 2)）
console.log(str.substring(-4, -2)); // '' （等同 str.substring(0, 0)）
console.log(str.substring(4, 4)); // '' （beginIndex 等于 endIndex）

console.log(str.substring(NaN)); // '0123456789' （等同 str.substring(0)）
console.log(str.substring(4,NaN)); // '0123' （等同 str.substring(0, 4)）
console.log(str.substring(NaN, 4)); // '0123' （等同 str.substring(0,4)）

String.prototype.substr()

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

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

语法

str.substr() // 相当于复制
str.substr(start[, length])

参数

  • start

    开始提取字符的位置。如果为负值，则被看作 strLength + start。

  • length

    可选。提取的字符数。

总结

  • substr() 从一个字符串中提取字符串并返回新字符串。在一个字符串中的改变不会影响另一个字符串。也就是说，substr 不会修改原字符串（只会返回一个包含了原字符串中部分字符的新字符串）。

  • 如果 start 为正值，且大于或等于字符串的长度，则 substr 返回一个空字符串。

  • 如果 start 为负值且 abs(start) 小于等于 strLength，则被看作 strLength + start；如果 start 为负值且 abs(start) 大于字符串的长度，则 substr 使用 0 作为开始提取的索引。注意负的 start 参数不被 Microsoft JScript 所支持。

  • 如果 length 为 0 或负值，则 substr 返回一个空字符串。如果忽略 length，则 substr 提取字符，直到字符串末尾。

示例

console.log(str.substr()); // '0123456789'
console.log(str.substr(0)); // '0123456789'
console.log(str.substr(0, str.length)); // '0123456789'

console.log(str.substr(4)); // '456789'
console.log(str.substr(-4)); // '6789' （等同 str.substr(6)）
console.log(str.substr(15)); // ''
console.log(str.substr(-15)); // '0123456789' （等同 str.substr(0)，因为 abs(start) > strLength）

console.log(str.substr(4, 2)); // '45'
console.log(str.substr(4, 0)); // ''
console.log(str.substr(4, -2)); // ''
console.log(str.substr(4, 10)); // '456789'

console.log(str.substr(NaN)); // '0123456789' （等同 str.substr(0)）
console.log(str.substr(4,NaN)); // '' （等同 str.substr(4, 0)）
console.log(str.substr(NaN, 4)); // '0123' （等同 str.substr(0,4)）

补充

Array.prototype.slice()

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

用法类似 String.prototype.slice()

示例

let arr = [0,1,2,3,4,5,6,7,8,9];
// arrLength = 10
console.log(arr.slice()); // [0,1,2,3,4,5,6,7,8,9]
console.log(arr.slice(0)); // [0,1,2,3,4,5,6,7,8,9]
console.log(arr.slice(0, arr.length)); // [0,1,2,3,4,5,6,7,8,9]

console.log(arr.slice(2, 6)); // [2,3,4,5] （不包括 endIndex）
console.log(arr.slice(6, 2)); // [] （beginIndex 大于 endIndex，无效）
console.log(arr.slice(2, 15)); // [2,3,4,5,6,7,8,9] （endIndex 大于 arrLength）

console.log(arr.slice(4)); // [4,5,6,7,8,9]
console.log(arr.slice(-4)); // [6,7,8,9] （等同 arr.slice(6)）
console.log(arr.slice(15)); // [] （等同 arr.slice(6)）

console.log(arr.slice(4, -2)); // [4,5,6,7] （等同 arr.slice(4, 8)）
console.log(arr.slice(-4, 2)); // [] （等同 arr.slice(6, 2)）
console.log(arr.slice(-4, -2)); // [6, 7] （等同 arr.slice(6, 8)）
console.log(arr.slice(4, 4)); // [] （beginIndex 等于 endIndex）

console.log(arr.slice(NaN)); // [0,1,2,3,4,5,6,7,8,9] （等同 arr.slice(0)）
console.log(arr.slice(NaN, 4)); // [0,1,2,3] （等同 arr.slice(0, 4)）
console.log(arr.slice(4, NaN)); // [] （等同 arr.slice(4, 0)）

参考

developer.mozilla.org/zh-CN/docs/…

developer.mozilla.org/zh-CN/docs/…

developer.mozilla.org/zh-CN/docs/…

developer.mozilla.org/zh-CN/docs/…

转载自:https://juejin.cn/post/7005829617638457374
评论
请登录