JavaScript has three methods to perform substring operations:

  • string.substr(start [, length])
  • string.substring(start [, end])
  • string.slice(start [, end])

Having three different methods doing "very similar" things might be very confusing especially for people starting with JavaScript. I created this post to show some similarities and differences between those methods.

String.prototype.substr

The string.substr(start[, length]) method returns the characters in a string beginning at the specified location - specified by start zero-based index - through the specified number of characters - length parameter.

"hello world!".substr(0)     // returns "hello world!"
"hello world!".substr(6)     // returns "world!"
"hello world!".substr(6, 5)  // returns "world"

// length is more than remaining characters
"hello world!".substr(6, 10) // returns "world!"

Note that if start parameter is negative, substr uses it as a character index from the end of the string.

"hello world!".substr(-6)    // returns "world!"
"hello world!".substr(-6, 5) // returns "world"

If length parameter is 0 or negative, substr returns an empty string 1 "hello world!".substr(0, -1) // returns ""

String.prototype.substring

The string.substring(start[, end]) method returns a subset of a string between one index and another (both zero-based indexes), or through the end of the string.

"hello world!".substring(0)    // returns "hello world!"
"hello world!".substring(6)    // returns "world!"
"hello world!".substring(0, 5) // returns "hello"

Note that character at index end is not included in the substring outcome.

"hello world!".substring(0, 4) // returns "hell"

If either of indexes start or end is less than 0 or is NaN, it is treated as if it were 0. Also if either of indexes is greater than length of the string (string.length), it is treated as if it were string.length (no index related error is thrown):

"hello world!".substring("welcom", 5) // returns "hello"
"hello world!".substring(6, 100)      // returns "world!"

String.prototype.slice

The string.slice(start[, end]) method extracts a section of a string beginning at zero-base index start and ending at zero-based index end and returns a new string. If end is omitted slice extracts till end of the string.

"hello world!".slice(0) // returns "hello world!"
"hello world!".slice(6) // returns "world!"

Note that if start (or end) parameter is negative, slice uses it as a character index from the end of the string.

"hello world!".slice(-6)     // returns "world!"
"hello world!".slice(-6, -1) // returns "world"
"hello world!".slice(1, -1)  // returns "ello world"

Conclusions:

All these three method seems to be very similar at first glance. Especially when some or all of them return the same results for a certain parameters e.g.

// all returns "string"
"test string".substr(5)
"test string".substring(5)
"test string".slice(5)

However, there are subtle differences between them mainly when we add second parameter or start using negative values for any of the parameters.

So whenever you are in doubt which function should be used, think about your parameter (do I usually have end string index or substring length or do I need to substring from the end of the string etc.) read functions descriptions and allowed parameter values (Mozilla Development Network works best for me – you can find necessary links at the bottom of the page) and based on that knowledge you should be able to choose the best function for you.

See also documentation on Mozilla Development Network: