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/…
