I don't think we can definitively answer this without someone involved with ECMA ten years ago weighing in, however we can infer some things.
substring
asks for the index (from 0) of the start, and optionally an index (again from 0) of the end.
substr
asks for the index (from 0) of the start, and a length. That makes it simpler to use for some cases, e.g. if you want to fetch 2 characters from the first "s" you can just specify 2 as the length instead of having to first calculate the index of the first "s" and then adding 2 to that, and then passing both positions to substring
.
As was pointed out in a comment, substr
allows a negative starting position.
Arguably, substr
is a better implementation. And so that is quite possibly why it was added.
As to the question of why are both there, that is probably for backward compatibility. Because Javascript runs in a wide variety of browsers (and these days elsewhere), in runtimes maintained by multiple organizations, there is no easy way to deprecate or eliminate anything. It's easier to just leave it there and add more to the language instead. Old code still works, and new code has better options available to use.