Returning a part of a string

Arek Jaworski

Jul 30, 2018·2 min read

In JavaScript we have three very similar methods of returning a part of a string. In this article we will look at the similarities and subtle differences among the three.

String.prototype.substr()

First method is substr, which obviously stands for substring. This method takes two arguments: indexStart and length. It extracts all characters, starting and including indexStart and number of characters as equal to length. The latter is optional and if omitted then the method will return all characters starting from indexStart to the end of the string.

Let’s see this on actual example:

const string = 'Medium';
console.log(string.substr(0,3)); // Returns: Med
console.log(string.substr(1,4)); // Returns: ediu
console.log(string.substr(2)); // Returns: dium

If we length is negative it will be treated as 0:

const string = 'Medium';
console.log(string.substr(1,-1)); // Returns: ""
console.log(string.substr(1,0)); // Returns: ""

If indexStart is negative, then the string will be extracted from the end (where -1 is the last character):

const string = 'Medium';
console.log(string.substr(-3)); // Returns: "ium"
console.log(string.substr(-3,2)); // Returns: "iu"

String.prototype.substring()

Second method is substring. This method, like the previous one, takes two parameters, with the second one being optional.

The first one is indexStart again. However, the next parameter is indexEnd instead of length. The method will extract part of the string starting and including indexStart character up to and excluding indexEnd.

If indexEnd is omitted, then the method will extract characters to the end of the string.

If we swap places of the two parameters, that is, indexStart will be greater than indexEnd then the substring method will put them in the right order.

Finally, this method doesn’t take negative numbers as parameters (these will be defaulted to 0):

const string = 'Medium';
console.log(string.substring(1,3)); // Returns: ed
console.log(string.substring(1)); // Returns: edium
console.log(string.substring(3,1)); // Returns: ed
console.log(string.substring(3,-1)); // Returns: Med

String.prototype.slice()

Finally, we have slice which controversial takes the same parameters as substring! So is it just a different name of the same method? No, the big difference here is that the parameters can be negative values and there is no swapping of places.

const string = 'Medium';
console.log(string.slice(1,3)); // Returns: ed
console.log(string.slice(1)); // Returns: edium
console.log(string.slice(3,1)); // Returns: ""
console.log(string.slice(3,-1)); // Returns: iu
console.log(string.slice(-3)); // Returns: ium
console.log(string.slice(-4,-2)); // Returns: di

In this article we compared three similar methods that extract part of a string. While these work almost identically, there are subtle differences among them.