I’m always having to lookup stuff like this. Often times I know like 90% of the answer, but that remaining 10% of ambiguity requires I look it up. In this case, Google led me to a stack overflow answer stating:
The difference is in the second argument. The second argument to
substringis the index to stop at (but not include), but the second argument to
substris the maximum length to return.
Additionally (and almost equally important) I learned that – according to Mozilla’s docs –
substr is considered legacy and you should therefore opt to use
substring whenever possible.
Being the visual person that I am, I decided to create a visual answer to this question. In part because I thought this particular answer was well suited to being expressed visually; but also because creating the graphic would require me to internalize the answer more concretely (which will make it easier to remember – and explain to others – in the future).