slice() 和 substring() 这两个方法都可以截取字符串，那么为什么会设计这两个 API 呢？

二者的区别

substring() 和 slice() 方法几乎是相同的，但两者之间有一些微妙的区别，特别是在处理负参数的方式上。

如果 indexStart 大于 indexEnd，substring() 方法会交换两个参数，这意味着仍然会返回一个字符串。但是 slice() 方法面对这种情况会返回一个空字符串。

let text = 'Mozilla'
console.log(text.substring(5, 2))  // => "zil" 
console.log(text.slice(5, 2))      // => ""

如果参数中的一个或两个都是负数或 NaN，则 substring() 将它们当作 0 处理。

console.log(text.substring(-5, 2))  // => "Mo"
console.log(text.substring(-5, -2)) // => "" 

slice() 也将 NaN 参数视为 0，但当它为负时，它会从字符串的末尾向前数，以找到索引。

console.log(text.slice(-5, 2))   // => ""
console.log(text.slice(-5, -2))  // => "zil"

共存的原因

乍一看 slice() 和 substring() 做的是同样的事情，但最大的区别在于它们如何处理负参数。

当 Netscape 2.0 首次实现 JavaScript 时，只有一个 substring() 方法。如果它的任何一个参数是负数，就会被当作 0 处理。

当 Netscape 4.0 引入 JavaScript 1.2 后，他们希望通过支持负索引来从反向遍历字符串。不过不能修改 substring() 的行为 ，因为这会破坏现有的代码的兼容性，所以只能创建一个新的函数来支持新增的功能。这个函数就是 slice()，在 Array 和 String 上都实现了。

参考资料

• String.prototype.substring() – JavaScript | MDN
• javascript – Why two different methods slice() & substring()? – Stack Overflow
• JavaScript Substring Vs Substr Vs Slice Differences With Examples | Arunkumar Blog