JavaScript | String.slice 和 String.substring 的区别

在 JavaScript 中，有两个可用于截取字符串的方法，分别是 String.slice() 和 String.substring()。这两个方法看起来很相似，但有一些不同之处。

String.slice()

String.slice() 方法可以从字符串中提取指定区间的子字符串，并返回一个新字符串。其语法如下：

str.slice(beginIndex[, endIndex])

• beginIndex：起始位置，包括该位置。
• endIndex：结束位置，不包括该位置。若省略，则一直截取到末尾。

例如，假设有一个字符串 str，内容为 "Hello, world!"，我们可以对其进行如下操作：

var str = "Hello, world!";
var newStr1 = str.slice(0, 5); // 从 0 开始，一直截取到第 5 个字符（不包含第 5 个）
var newStr2 = str.slice(7); // 从第 7 个字符开始，截取到末尾

console.log(newStr1); // 输出 "Hello"
console.log(newStr2); // 输出 "world!"

String.substring()

String.substring() 方法也可以从字符串中提取指定区间的子字符串，并返回一个新字符串。其语法如下：

str.substring(indexStart[, indexEnd])

• indexStart：起始位置，包括该位置。
• indexEnd：结束位置，不包括该位置。若省略，则一直截取到末尾。

需要注意的是，与 String.slice() 不同的是，String.substring() 不接受负数索引，如果传入负数则会被当作 0 处理。另外，String.substring() 也可以将第一个参数与第二个参数位置颠倒，函数同样可以正确执行。

例如，对于同样的字符串 str，我们可以对其进行如下操作：

var str = "Hello, world!";
var newStr1 = str.substring(0, 5); // 从 0 开始，一直截取到第 5 个字符（不包含第 5 个）
var newStr2 = str.substring(7); // 从第 7 个字符开始，截取到末尾

console.log(newStr1); // 输出 "Hello"
console.log(newStr2); // 输出 "world!"

区别

两种方法的主要区别如下：

1. String.slice() 方法可以接受负数索引，且可以将第一个参数与第二个参数位置颠倒。而 String.substring() 方法不接受负数索引，如果传入负数则被当作 0 处理，并且位置颠倒可能会导致得到的结果不同。
2. 当传入的参数相同时，两种方法的截取结果相同。但当第二个参数大于第一个参数时， String.slice() 方法会将第二个参数向下取整，而 String.substring() 方法会将两个参数互换。

例如，假设有一个字符串 str，内容为 "Hello, world!"，则可以得到以下结果：

var str = "Hello, world!";
console.log(str.slice(3, -3)); // 输出 "lo, worl"
console.log(str.substring(3, -3)); // 输出 "Hel"

console.log(str.slice(-3, 3)); // 输出 ""
console.log(str.substring(-3, 3)); // 输出 "Hel"

总结

在 JavaScript 中，我们可以使用 String.slice() 方法和 String.substring() 方法来截取字符串。这两种方法在大多数情况下都能正确执行，但需要注意两种方法之间的区别。在实际使用中，我们需要根据具体情况选择适合自己的方法。