实测js数组截取的方法,详解slice与substring的区别

在 JavaScript 中，您可以使用 slice 方法对字符串和js数组进行截取分割，但可能很多人不知道如何使用它。

因此在本文中，我们将详细解释如何使用 slice 方法以及它与 substring 的区别！

看完这篇文章，你会知道如何用 slice 方法对字符串和数组进行切片，也会明白与 substring 的区别。

什么是slice

slice 是一种允许您从字符串或数组中截取指定部分的方法。

例如通过指定字符串截取开始和结束位置，您可以截取它们之间的字符串。

如果你用 slice 方法为数组指定开始位置和结束位置，中间的元素将被截取。

让我们仔细看看如何使用slice方法。

如何使用slice

slice方法的写法如下：

//字符串类型
字符串类型.slice(开始位置, [结束位置])
 
//数组类型
数组类型.slice(开始位置, [结束位置])

slice方法通过在字符串类型或数组类型后用点“.”连接来指定。

您可以为 slice 方法指定两个参数，第一个是“开始位置”，第二个是“结束位置”。

slice 方法的第二个参数（结束位置）是可选的。

如果省略，则从开始位置到结束的范围被剪裁。

下面我们来看看如何截取“字符串”，以及如何用 slice 方法截取“数组”。

如何用slice方法截取字符串

首先是如何使用 slice 方法截取一个字符串。

编写实际代码如下：

<script type="text/javascript">
let string = '实测js数组截取的方法';
 
console.log(string.slice(5)); // 仅指定开始位置时
console.log(string.slice(5, 7)); // 也指定了结束位置时
</script>

将字符串“实测js数组截取的方法”赋值给变量“string”。

然后使用 console.log 打印截取的字符串。

“string.slice(5)”指定字符串从起始位置“5”截取到末尾。

“string.slice(5, 7)”指定字符串从开始位置“5”截取到结束位置“7”。

我们来看下打印结果：

谷歌浏览器开发者工具的控制台输出字符串“组截取的方法”和“组截”。

输出为“组截取的方法”的字符串从第 5 个到最后一个字符被截取，因为 slice 方法将起始位置指定为“5”。

而对于输出为“组截”的字符串，slice方法将起始位置指定为“5”，结束位置指定为“7”，因此第5到第7个字符被截取。

如何用slice截取数组

现在我们来看下使用slice方法对数组进行截取的方法。

编写实际代码如下：

<script type="text/javascript">
let array = ['苹果', '香蕉', '葡萄', '橘子', '菠萝'];
 
console.log(array.slice(2)); // 仅指定开始位置时
console.log(array.slice(2, 4)); // 也指定了结束位置时
</script>

将包含“苹果,香蕉,葡萄,橘子,凤梨”的数组赋值给变量“array”。

然后使用console.log指定"array.slice()"，就像使用 strings 一样。

一个仅指定开始位置'2'，另一个含有开始位置'2'和结束位置'4'。

显示结果：

第一个输出“葡萄、橘子、菠萝”，第二个输出“葡萄、橘子”。

首先在slice方法中将起始位置指定为'2'，因此倒数第二个元素被剪切。

其次slice方法指定了“2”的开始位置和“4”的结束位置，所以第二个到第四个元素被剪裁了。

对于数组，与字符串一样，结束位置不包含在剪辑中。

所以第二种截取方法意味着连“橘子”都被截掉了。

slice和substring的区别

至此我们已经了解了如何使用 slice 方法。

不过可能有小伙伴会觉得“有一种方法叫 substring，跟 slice 方法很像，但是有什么区别呢？”

substring 方法也和 slice 方法一样，都是可以截取字符串和数组的方法。

不过还是有一些区别的，所以这里我就解释一下slice和substring的区别。

当开始位置和结束位置的大小不同时

slice方法和substring方法在开始位置和结束位置的大小不同时会产生不同的结果。

例如：

<script type="text/javascript">
let string = '你好张三';
 
console.log(string.slice(2, 0));
</script>

果有字符串“你好张三”，则使用 slice 方法指定起始位置为“2”，结束位置为“0”。

本来应该是“开始位置<结束位置”，但是当设置为“开始位置>结束位置”。

显示结果：

如果开始位置大于结束位置， slice 方法会打印空白。

但是对于substring方法，可以得到以下结果：

<script type="text/javascript">
let string = '你好张三';
 
console.log(string.substring(2, 0));
</script>

输出字符串“你好”。

使用 substring 方法，如果开始位置大于结束位置，会自动切换到“开始位置 < 结束位置”。

换句话说，在这个例子中指定的 "2, 0"被自动替换为" 0, 2 " 。

所以结果是字符串“你好”。

当开始位置和结束位置的大小不同时，slice方法和substring方法会产生不同的输出结果。

如果指定小于 0

slice 方法和 substring 方法在指定小于 0 时结果不同。

我们来看下实际效果：

<script type="text/javascript">
let string = '你好张三';
 
console.log(string.slice(-2, 4));
</script>

字符串“你好张三”，在 slice 方法中，我们将起始位置指定为“-2”，将结束位置指定为“4”。

查看结果时内容如下：

结果输出为“张三”。

如果为 slice 方法指定小于 0的数字，则从字符串末尾开始按“-1、-2、-3...”的顺序添加数字。

因此将起始位置指定为“-2”表示“你好张三”中的-2字符“张三”为起始位置。

另一方面用 substring 方法指定的结果会是什么？

<script type="text/javascript">
let string = '你好张三';
 
console.log(string.substring(-2, 4));
</script>

结果字符串“你好张三”被输出。

出现这种结果的原因是，如果substring 方法指定了一个小于 0 的数字，则将其识别为“0”。

所以起始位置的“-2”变成了“0”，结果是“你好张三”。

如你所见，即使指定小于 0， slice 方法和 substring 方法也会产生不同的结果。

结语

本篇文章我们详细解释了JavaScript的slice方法。

slice方法可以通过指定开始和结束位置作为参数来截取字符串和数组。

需要注意的是字符串可以逐个字符的截取，但数组是逐个元素裁剪的。

另外还有一个类似的方法叫做substring，但是如果要指定的参数大小不同，或者指定小于0的值，结果也会不同，所以一定要正确使用。