JavaScript slice, substr and substring

JavaScript has three methods to perform substring operations:

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

Having three different methods of 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.


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

'hello world!'.substr(0, -1) // returns ""


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 the length of the string (string.length), it is treated as if it were string.length (no index related error is thrown):

'hello world!'.substring('welcome', 5) // returns "hello" as 'welcome' is NaN
'hello world!'.substring(6, 100) // returns "world!"


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 the end is omitted slice extracts till the 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"


All these three methods seem to be very similar at first glance. Especially when some or all of them return the same results for specific 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 the second parameter or start using negative values for any of the settings. So whenever you are in doubt about which function should be used, think about the required parameter. E.g., do I usually have end string index or substring length? Do I need to substring from the end of the string? Etc. Read the functions descriptions and specification of input parameters and its required, optional and default values. Based on that knowledge you should be able to determine the best choice for you. Note that Mozilla Development Network works best for me – you can find all necessary links at the bottom of the page.

See also documentation on Mozilla Development Network: