详解JS方法之slice、splice、substring、substr

详解JS方法之slice、splice、substring、substr

1.slice() [字符串，数组]

Array 对象方法的slice()：

slice() 方法可从已有的数组中返回选定的元素。
语法 ：arrayObject.slice(start,end)。

参数： 参数start：必需。规定从何处开始选取。如果是负数，那么它规定从数组尾部开始算起的位置。也就是说，-1 指最后一个元素，-2 指倒数第二个元素，以此类推。如果不传参数，则当0处理。

参数end：可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数，那么切分的数组包含从 start

到数组结束的所有元素。如果这个参数是负数，那么它规定的是从数组尾部开始算起的元素。

返回值： 返回一个新的数组，包含从 start 到 end （不包括该元素）的 arrayObject 中的元素。

说明：
请注意，该方法并不会修改数组，而是返回一个子数组。如果想删除数组中的一段元素，应该使用方法 Array.splice()。

提示和注释：

1.可使用负值从数组的尾部选取元素。

2.如果 end 未被规定，那么 slice() 方法会选取从 start 到数组结尾的所有元素。

3.如果start是正数且大于arrayObject.length，则返回[]空数组。如果start是负数且绝对值大于arrayObject.length，则当0处理。

并不会改变原字符串和数组。

const str = 'Hello, World!'
console.log(str.slice(7, 12)) // "World"
 
const arr = [1, 2, 3, 4, 5]
console.log(arr.slice(2, 4)) // [3, 4]
 
console.log(str.slice(1)) // ello, World!
console.log(arr.slice(1)) // [2, 3, 4, 5]
 
// 如果start是负数，则会从数组尾部开始算起。这里只有start没有end,且start为负数，所以只能获取到最后1个元素
console.log(str.slice(-1)) // !
console.log(arr.slice(-1)) // [ 5 ]
 
console.log(str.slice(1, -1)) // ello, World
console.log(arr.slice(1, -1)) // [ 2, 3, 4 ]
 
// 获取除了最后1个元素以外的全部元素
console.log(str.slice(0, -1)) // Hello, World
console.log(arr.slice(0, -1)) // [ 1, 2, 3, 4 ]
 
// 都为负数，值为空字符创或空数组
console.log(str.slice(-1, -1)) // ""
console.log(arr.slice(-1, -1)) // []


var arr = [1, 2, 3, 4, 5];

var arrNew = arr.slice(1,3);

console.log(arr); // [1, 2, 3, 4, 5]

console.log(arrNew); // [2, 3]

console.log(arr.slice(6, 2)); // []

console.log(arr.slice(-6, 2)); // [1, 2]

String 对象方法slice()：

slice() 方法可提取字符串的某个部分，并以新的字符串返回被提取的部分。

语法：

stringObject.slice(start,end)。

参数：

参数start：要抽取的片断的起始下标。如果是负数，则该参数规定的是从字符串的尾部开始算起的位置。也就是说，-1 指字符串的最后一个字符，-2 指倒数第二个字符，以此类推。如果不传参数，则当0处理。

参数end：紧接着要抽取的片段的结尾的下标。若未指定此参数，则要提取的子串包括 start 到原字符串结尾的字符串。如果该参数是负数，那么它规定的是从字符串的尾部开始算起的位置。

返回值：

一个新的字符串。包括字符串 stringObject 从 start 开始（包括 start）到 end 结束（不包括 end）为止的所有字符。

说明：

String 对象的方法 slice()、substring() 和 substr() （不建议使用）都可返回字符串的指定部分。slice() 比 substring() 要灵活一些，因为它允许使用负数作为参数。slice() 与 substr() 有所不同，因为它用两个字符的位置来指定子串，而 substr() 则用字符位置和长度来指定子串。

还要注意的是，String.slice() 与 Array.slice() 相似。

实例：

var str = "abcde";

var strNew = str.slice(1, 3);

console.log(str); // "abcde"

console.log(strNew); // "bc"

2.splice () [数组]

会改变原数组。

splice() 是Array对象的方法，用来操作数组。

splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目。

语法：

arrayObject.splice(index,howmany,item1,.....,itemX)。

参数：

参数index：必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。如果不传参数，则当0处理。

参数howmany：必需。要删除的项目数量。如果设置为 0，则不会删除项目。

参数item1,...,itemX：可选。向数组添加的新项目。

返回值：

返回一个包含被删除项目的新数组，如果有的话。没有被删除项目则返回空数组。

说明：

该方法会改变原始数组。splice() 方法可删除从 index 处开始的零个或多个元素，并且用参数列表中声明的一个或多个值来替换那些被删除的元素。

如果从 arrayObject 中删除了元素，则返回的是含有被删除的元素的数组。

提示和注释：

请注意，splice() 方法与slice()方法的作用是不同的，splice() 方法会直接对数组进行修改。splice() 方法的第二个参数是要删除的项目数量，slice() 方法的第二个参数是数组片断结束处的数组下标，且不包括该元素。splice() 方法有第三个参数的话可以添加插入新元素，slice() 方法没有此功能。

实例：

var arr = [1, 2, 3, 4, 5];
var arrNew = arr.splice(1, 3, 9);
console.log(arr); // [1, 9, 5]
console.log(arrNew); // [2, 3, 4]

const arr1 = [1, 2, 3, 4, 5]
console.log(arr1.splice(2, 2, 6, 7)) // 从数组下标2的位置，删除2个元素，并添加6和7两个值
// [ 3, 4 ] splice方法的返回值是被删除的元素组成的数组。
console.log(arr1) // arr1 变为 [1, 2, 6, 7, 5]
 
const arr2 = [1, 2, 3, 4, 5]
console.log(arr2.splice(2, 0, 6)) // [] 从数组下标2的位置，删除0个元素，并添加6
console.log(arr2) // arr2 变为 [ 1, 2, 6, 3, 4, 5 ]
 
const arr3 = [1, 2, 3, 4, 5]
console.log(arr3.splice(-1, 1, 6)) // [ 5 ] 返回了数组的最后一位，并添加6
console.log(arr3) // arr3 变为 [ 1, 2, 3, 4, 6 ]
 
const arr4 = [1, 2, 3, 4, 5]
console.log(arr4.splice(-1, 0, 6)) // [] 从最后1个元素开始且不删除元素，同时在最后1个元素前面新增1个元素
console.log(arr4) // arr4 变为 [ 1, 2, 3, 4, 6, 5 ]
 
const arr5 = [1, 2, 3, 4, 5]
console.log(arr5.splice(-1, 3)) // [ 5 ] 截取到数组的最后一个元素后会停止
console.log(arr5) // arr5 变为 [ 1, 2, 3, 4 ]
 
const arr6 = [1, 2, 3, 4, 5]
console.log(arr6.splice(-1, 2)) // [ 5 ] // 当start为-1时，不管end的值是多少，都表示截取到数组的最后一个元素后会停止
console.log(arr6) // arr6 变为 [ 1, 2, 3, 4 ]

3.substring() [字符串]

substring(start, end)：

substring 方法用于从字符串中提取指定范围的子串，并返回一个新的字符串。

它接受两个参数，start 表示起始位置（包含），end 表示结束位置（不包含）。

如果省略 end 参数，则提取从 start 位置到字符串末尾的所有字符。
并不会改变原字符串。

substring()

是String对象的方法，用来操作字符串。

substring() 方法用于提取字符串中介于两个指定下标之间的字符。

语法：

stringObject.substring(start,stop)。

参数：

参数start：必需。一个非负的整数，规定要提取的子串的第一个字符在 stringObject 中的位置。如果不传参数或者传负数，则当0处理。

参数stop：可选。一个非负的整数，比要提取的子串的最后一个字符在 stringObject 中的位置多 1。

如果省略该参数，那么返回的子串会一直到字符串的结尾。

返回值：

一个新的字符串，该字符串值包含 stringObject 的一个子字符串，其内容是从 start 处到 stop-1 处的所有字符，其长度为 stop 减 start。

说明

substring() 方法返回的子串包括 start 处的字符，但不包括 stop 处的字符。

如果参数 start 与 stop 相等，那么该方法返回的就是一个空串（即长度为 0 的字符串）。如果 start 比 stop 大，那么该方法在提取子串之前会先交换这两个参数。

重要事项：与 slice() 和 substr() 方法不同的是，substring() 不接受负的参数。如果不传参数，则当0处理，即跟stringObject.substring(0, 0)等同；当参数传入负数，则当0处理，如stringObject.substring(-3, -2)等同于stringObject.substring(0,0)，返回""空字符串。

var str = "abcde";
var strNew = str.substring(1, 3);
var strEmpty = str.substring();
console.log(str); // "abcde"
console.log(strNew); // "bc"
console.log(strEmpty); // ""


const str = 'Hello, World!';
console.log(str.substring(7, 12)); // World
console.log(str.substring(1)); // ello, World!
console.log(str.substring(0)); // Hello, World!
console.log(str.substring(-1)); // Hello, World!
console.log(str.substring(2, -2)); // He

4.substr() [字符串]

并不会改变原字符串。

substr()是String对象的方法，用来操作字符串。

substr() 方法可在字符串中抽取从 start 下标开始的指定数目的字符。

语法：

stringObject.substr(start,length)。

参数：

参数start：必需。要抽取的子串的起始下标。必须是数值。如果是负数，那么该参数声明从字符串的尾部开始算起的位置。也就是说，-1 指字符串中最后一个字符，-2 指倒数第二个字符，以此类推。如果不传参数，则当0处理。

参数length：可选。子串中的字符数。必须是数值。如果省略了该参数，那么返回从 stringObject 的开始位置到结尾的字串。

返回值：

返回一个新的字符串，包含从 stringObject 的 start（包括 start 所指的字符） 处开始的 length 个字符。如果没有指定 length，那么返回的字符串包含从 start 到 stringObject 的结尾的字符。

提示和注释

注释：substr() 的参数指定的是子串的开始位置和长度，因此它可以替代 substring() 和 slice() 来使用。

重要事项：ECMAscript 没有对该方法进行标准化，因此反对使用它。

重要事项：在 IE 4 中，参数 start 的值无效。在这个 BUG 中，start 规定的是第 0 个字符的位置。在之后的版本中，此 BUG 已被修正。

var str = "abcde";
var strNew = str.substr(1, 3);
console.log(str); // "abcde"
console.log(strNew); // "bcd"



const str = 'Hello, World!';
console.log(str.substr(7, 1)); // W
console.log(str.substr(7, 2)); // Wo
console.log(str.substr(1)); // ello, World!
console.log(str.substr(0)); // Hello, World!
console.log(str.substr(-1)); // !
console.log(str.substr(-3)); // ld!
console.log(str.substr(2, -2)); // '' length 不管传0，-1，-2等都返回空字符串

区分

在传递给这些方法的参数是负值的情况下，它们的行为就不尽相同了。其中，
slice()方法会将传入的负值与字符串的长度相加；
substr()方法将负的第一个参数加上字符串的长度，而将负的第二个参数转换为 0；
substring()方法会把所有负值参数都转换为0。