slice、substring、substr 遇到负数和起止颠倒时有什么区别？

同一组参数，三种结果

把三个方法放在一起喂同样的参数，差别一眼就能看出来。

const s = 'JavaScript'
const show = (...args) => console.log(args.map((v) => JSON.stringify(v)).join(' '))
// 正常顺序：三者结果一样
show(s.slice(0, 4), s.substring(0, 4), s.substr(0, 4))
// 负数开头：slice 和 substr 从末尾倒数，substring 当成 0
show(s.slice(-6), s.substring(-6), s.substr(-6))
// 负数结尾：只有 slice 会倒数
show(s.slice(0, -6), s.substring(0, -6), s.substr(0, -6))
// 起止颠倒：slice 返回空串，substring 自动交换
show(s.slice(4, 0), s.substring(4, 0))
// substr 的第二个参数是长度
show(s.slice(4, 6), s.substr(4, 6))

"Java" "Java" "Java"
"Script" "JavaScript" "Script"
"Java" "" ""
"" "Java"
"Sc" "Script"

为什么推荐 slice

substring 的自动交换看起来贴心，其实会掩盖 bug。比如你算出来的结束位置因为逻辑错误比开始位置还小，slice 会老老实实返回空串，你很快就能发现不对；substring 却悄悄把两个数对调，截出一段看似正常的内容，问题就藏起来了。

slice 的负数规则也更好用。取文件扩展名、去掉末尾几个字符这类需求，name.slice(-3)、str.slice(0, -1) 一眼就能看懂，换成 substring 就得先写 str.length - 1。

substr 的问题在于它是唯一一个「第二个参数表示长度」的方法，和数组、和另外两个字符串方法都不一样，读代码时很容易看错。MDN 已经把它标为 deprecated，ESLint 也有规则提示替换。老代码里的 s.substr(start, len) 可以直接改成 s.slice(start, start + len)，前提是 start 不是负数。

容易答错的地方

substring 也支持负数倒数

不支持。substring 会把负数和 NaN 都当成 0，想从末尾倒数只能用 slice，或者先用 length 算出正数下标。

slice 起止颠倒会自动交换

会自动交换的是 substring。slice(4, 0) 返回空串，不会帮你调整参数顺序。

截取方法会修改原字符串

字符串是原始值，不可变。三个方法都返回新字符串，原来的 s 不受影响。和数组的 splice 混在一起记的人最容易在这里答错。

面试官还会怎么问？

把知识连起来