Difference Between String Slice and Substring Methods

JavaScript is a dynamic and most popular programming language which can be used on both client side and server side. JavaScript is used to create interactive web pages. It has many frameworks such as React JS, Angular JS, Node JS etc.,

JavaScript contains many inbuilt functions to perform various tasks. There are functions that are used to manipulate the strings. Str.slice and str.substring are two of those inbuit functions that can manipulate strings. Although the functionalities of both the functions are almost similar, there are a few differences between them

String.slice() Method

This method returns a part of the string based on the index specified. The syntax for the slice method is given below ?

string.slice (start, end)

This method has two parameters i.e. start and end. Start specifies the index from which it should start and end index tells the last index of the string to return. The end index is not included while returning string. End is not necessary. If end is not specified, it returns the whole string starting from the start index specified. Here, indexing starts from '0'.

String.substring() Method

This method is also similar to the slice method and returns a part of the string as a new string. The syntax of this method is given below ?

string.substring (start, end)

Here, start and end are the two parameters that represents the indexes from which string should be returned. If end index is not specified, it returns the entire string from the specified start index. The end index is not included while returning string. Index starts from '0'.

Consider a string 'Good Morning' of string length 12. Let us understand the functionalities of these methods by the following example cases ?

const greeting = 'Good Morning'

Case 1

If the start index is a positive number, then both methods gives the same output.

greeting.slice (5)  		//  'Morning'
greeting.substring (5)  	// 'Morning'

Here, index is taken as 5 and hence returned the string starting from 5th position of the main string.

Case 2

If the index given is negative, these two methods gives different outputs as shown below.

greeting.slice (-7)  // 'Morning'
greeting.substring (-7)  // 'Good Morning'

In the slice method, when negative index is given, it counts from the end of the string and returns string starting from that index position. In substring, any negative number is considered as zero. Hence it starts from 0 index and returns the whole string.

Case 3

When length of the string is passed, both the methods returns an empty string.

greeting.slice (12)  // ''
greeting.substring (12)  // ''

Case 4

Start index is greater than the end index

greeting.slice (9, 5)  // ''
greeting.substring (9, 5)  // 'Morn'

Slice method returns an empty string whereas substring method swap those indexes and returns the string. The end index is not included.

Case 5

When both start and end indexes are negative

greeting.slice (-12, -8)  // 'Good'
greeting.substring (-12, -8)  // ''

Slice method counts from the end of the string up to the index specified and returns it. As the both indexes are negative and substring method considers them as zero, then it starts from zero and ends at zero. So, an empty string is returned.

Case 6

When start index is negative and end index is positive

greeting.slice (-3, 5)  // ''
greeting.substring (-3, 5)  // 'Good'

Here, as the end index is present before the start index, slice method returns an empty string. But substring method considers negative index as zero and starts from 0 index up to the 5th index excluding it. Hence, it returns 'Good'.

Case 7

When start index is positive but end index is negative

greeting.slice (5, -3)  // 'Morn'
greeting.substring (5, -3)  // 'Good'

Slice method returns 'Morn' as output and substring method returns 'Good'. Substring method considers the end index as zero and since start index (5) is larger than the end index (0), it simply swaps their positions (0,5) and return the string.

Slice vs Substring Method

The following table highlights the important differences between the slice method and the substring method ?

Conclusion

String.slice and string.substring methods are used for the manipulation of strings. Both of them are similar based on their parameters and in some cases. Their first major difference is when they have negative values as their indexes as shown in the above examples. The second one is when start index is greater than the end index.