JavaScript substring, substr and slice

Published 12/18/2014

The manipulations with texts are traditionally tedious, but essential tasks in the life of every program developer. Although it never was and most probably will never be a big pleasure we usually have no option to avoid it. The programming systems and tools provide rich sets of functions for the common operation with strings. However, the variety of methods often is confusing, in particular taking in account the fact that exactly the same method name may not mean exactly the same functionality in the different languages. Honestly speaking, even after more than ten years of intensive programming in JavaScript sometimes I’m still tangled in the details of substring, substr and slice methods and not always can recall how the different values of their parameters can affect the results.

In this article I tried to take this specific issue and put it in order. First of all, I placed the full description of all three methods together, in one place. Then I examine their similarities and differences as well as the choice considerations. Finally, I placed here a simple live form in which you can play with the functions and parameters and immediately see the results.

JavaScript substring in details

The substring method extracts and returns the part of string between two specified indexes.

string.substring(start, [end]);

The method receives two parameters:

start	The position from which the extraction starts (the first character is at the position 0). This parameter is required
end	The position where the extraction ends, not including. This parameter is optional. If omitted, the method extracts up to the end of string

start

The position from which the extraction starts (the first character is at the position 0).
This parameter is required

end

The position where the extraction ends, not including.
This parameter is optional. If omitted, the method extracts up to the end of string

The return value is a new extracted string. Note that the original string is not changed.

Example of use with two parameters:

var orgStr = "Hello, world!";

var extrStr = orgStr.substring(0, 5);

extrStr is "Hello"

Example of use with one parameter:

var orgStr = "Hello, world!";

var extrStr = orgStr.substring(7);

extrStr is "world!"

If start is greater than end, the method swaps the two parameters. For example:

var orgStr = "Hello, world!";

var extrStr = orgStr.substring(12, 7);

extrStr is "world" because substring(12, 7) is equal to substring(7, 12)

If either start or end is negative, the method considers it equal to 0. For example:

var orgStr = "Hello, world!";

var extrStr = orgStr.substring(-2, 5);

extrStr is "Hello" because substring(-2, 5) is equal to substring(0, 5)

JavaScript substr in details

The substr method extracts and returns the part of string beginning at the specified position and containing the specified number of characters.

string.substr(start, [length]);

The method receives two parameters:

start	The position from which the extraction starts (the first character is at the position 0). This parameter is required
length	The number of characters to extract. This parameter is optional. If omitted, the method extracts up to the end of string

start

The position from which the extraction starts (the first character is at the position 0).
This parameter is required

length

The number of characters to extract.
This parameter is optional. If omitted, the method extracts up to the end of string

The return value is a new extracted string. Note that the original string is not changed.

Example of use with two parameters:

var orgStr = "Hello, world!";

var extrStr = orgStr.substr(0, 5);

extrStr is "Hello"

Example of use with one parameter:

var orgStr = "Hello, world!";

var extrStr = orgStr.substr(7);

extrStr is "world!"

If start is negative, the actual starting position is calculated from the end of string. For example:

var orgStr = "Hello, world!";

var extrStr = orgStr.substr(-6, 5);

extrStr is "world"

Note, that negative start is not supported by Internet Explorer 8 and earlier.

If length is less or equal to 0 the method returns an empty string.

var orgStr = "Hello, world!";

var extrStr = orgStr.substr(6, 0);

extrStr is empty

JavaScript slice method

Please note that besides the string slice method JavaScript provides an array slice method which is out of this article’s purposes. Don’t confuse!

The slice method extracts and returns the part of string between two specified indexes.

string.slice(start, [end]);

The method receives two parameters:

start	The position from which the extraction starts (the first character is at the position 0). This parameter is required
end	The position where the extraction ends, not including. This parameter is optional. If omitted, the method extracts up to the end of string

start

The position from which the extraction starts (the first character is at the position 0).
This parameter is required

end

The position where the extraction ends, not including.
This parameter is optional. If omitted, the method extracts up to the end of string

The return value is a new extracted string. Note that the original string is not changed.

Example of use with two parameters:

var orgStr = "Hello, world!";

var extrStr = orgStr.slice(0, 5);

extrStr is "Hello"

Example of use with one parameter:

var orgStr = "Hello, world!";

var extrStr = orgStr.slice(7);

extrStr is "world!"

One or both start and end parameters of slice method can be negative. The actual position of negative parameter is calculated from the end of string. For example:

var orgStr = "Hello, world!";

var extrStr1 = orgStr.slice(-6, 12);

extrStr1 is "world"

var extrStr2 = orgStr.slice(4, -1);

extrStr2 is "o, world"

var extrStr3 = orgStr.slice(-12, -5);

extrStr3 is "ello, w"

substring, substr and slice similarities and differences

The below table shows the main differences and similarities of the three methods:

Method	Parameters	Negative Start Support
substring	Start, End	No
substr	Start, Length	Yes
slice	Start, End	Yes

substring: Start, End

Negative Start not supported

substr: Start, Length

Negative Start supported

substring: Start, End

Negative Start supported

Remember:

Both substring and slice extract the part of string between two specified indexes, while substr extracts the specified number of characters from specified position.

Both substr and slice can receive a negative 'start' parameter, while substring equates negative numbers to zero.

Additional choose considerations

In general, all three methods are intended to solve very similar tasks, so the choice mostly depends on the developer’s taste. However, there are some additional considerations that can be taken in account.

Code consistency considerations

Many client-side developers are also involved with a server-side code. It’s a good practice to use the methods with a similar syntax whenever it’s possible in order to avoid the possible mistakes. For example, If your server is written in PHP, it’s better to use substr in JavaScript, and if your server is written in ASP.NET or Java then the substring method is recommended.

Browser compatibility considerations

As it was mentioned above, use of negative numbers in substr ‘start’ parameter is not compatible with all browsers. So, whenever you plan to base the extraction on the end of string you definitely should use slice and avoid the use of substr.

Try it yourself

As it was promised at the article start, the following simple form lets you playing with the three methods described above. Enjoy!

JavaScript substring, substr and slice

JavaScript substring in details

JavaScript substr in details

JavaScript slice method

substring, substr and slice similarities and differences

Additional choose considerations

Code consistency considerations

Browser compatibility considerations

Try it yourself

3 Reader Comments