JavaScript substr() and substring() – What’s the Difference?

JavaScript has two similar-looking methods for extracting substrings from strings – substr() and substring(). This article explains the difference.

These two functions perform almost the same function and have almost the same name, and at a glance, even seem to have the same syntax – but they’re different!

Here is the syntax for each function – side by side so that you can see the difference.

A Quick Reminder about Indexes

An index is the integer number representing the position of an item in a series. Indexes start counting at 0 – so the first index is index 0, the second is index 1, and so on.

As strings are a series of characters, the position of each character can be described by its index.

For example, take the string:

abcdefg

The letter a is at index 0, and the letter c is at index 2.

JavaScript substr() Syntax

The syntax for the Javascript substr() method is as follows:

string.substr(START, LENGTH)

Note that:

• substr() will return a portion of a given string, starting at index START to the specified LENGTH
• START is the index of the character you wish to start at
• LENGTH is the maximum number of characters you wish to include
  • If it is not specified, the remainder of the string starting at START will be returned
  • If it is larger than the remaining number of characters in the string, the remainder of the string starting at START will be returned

substr() Example

var myString = "Ahoy!"; // Define a string
var mySubstring = myString.substr(1, 4); // Returns "hoy!"

JavaScript substring() Syntax

The syntax for the substring() method is as follows:

string.substring(START, END)

Note that:

• substring() will return a portion of a given string, starting at index START and ending at index END
• START is the index of the character you wish to start at
• END is the index of the character you wish to end at
  • It is optional – if not specified, the rest of the string will be returned
  • It is also not included in the resulting substring – everything up to END is included only

substring() Example

var myString = "Ahoy!"; // Define a string
var mySubstring = myString.substring(1, 4); // Returns "hoy"

Notice that substring() has returned a different result to substr() – as it uses the index to calculate the end position rather than the maximum number of characters.

The Difference (It’s the Second Parameter)

As shown above, the difference is the second parameter. substring() accepts the index to stop at, whereas substr() accepts the maximum number of characters to return.

The JavaScript split() function can also be used to create substrings from strings.