Before you look at the differences between slice() and substring(), take a look at the syntax of String.slice() and String.substring() methods:
let partOfAString = originalString.slice(startIndex, endIndex); let partOfAString = originalString.substring(startIndex, endIndex);
Both slice() and substring() methods of a string are used to extract a part of a string, but they have some differences that are explained below:
1. If startIndex is greater than endIndex, the slice() method returns an empty string. On the other hand, the substring() method swaps the values of startIndex and endIndex.
let str = "JavaScript"; console.log(str.slice(4, 0)); //"" console.log(str.substring(4, 0)); //"Java"
Here, str.substring(4, 0) changes to str.substring(0, 4).
2. If startIndex is equal to endIndex, both slice() and substring() methods return empty string.
let str = "JavaScript"; console.log(str.slice(4, 4)); //"" console.log(str.substring(4, 4)); //""
3. If startIndex is less than endIndex, both methods extract a part of a string.
let str = "JavaScript"; console.log(str.slice(4, 10)); //"Script" console.log(str.substring(4, 10)); //"Script"
4. If you do not specify the endIndex, these methods extract characters from the startIndex index position to the end of a string.
let str = "JavaScript"; console.log(str.slice(4)); //"Script" console.log(str.substring(4)); //"Script"
5. If either of the parameters is greater than the length of the string. In that case, the parameter is converted to the string's length.
let str = "JavaScript"; console.log(str.slice(4, 20)); //Script console.log(str.substring(4, 20)); //Script
Here, the value of endIndex is 20, which is greater than the length of the original string "JavaScript", so it is changed to 10. The str.substring(4, 20) changes to str.substring(4, 10) and str.slice(4, 20) updates to str.slice(4, 10).
6. If either of the parameters is negative. In that case, the substring() method converts it to 0, whereas the slice() method works differently. The slice() method converts the negative index value to their corresponding positive index value. After conversion, the startIndex and endIndex are compared. If the startIndex is greater than or equal to the endIndex, then an empty string is returned; otherwise, a substring is returned.
let str = "JavaScript String"; console.log(str.substring(-5, 10)); //JavaScript console.log(str.slice(-6, 9)); //"" console.log(str.slice(4, -7)); //"Script"
Here, -6 is passed to the slice() method as the startIndex. The slice() method converts -6 to 11 because 11 is the corresponding positive index value of -6. After that, slice(-6, 9) method becomes slice(11, 9). As you know, 11 is greater than 9, so an empty string is returned.
In another example, -7 is converted to 10, the positive index value of -7. The slice(4, -7) changes to slice(4, 10), and a substring "Script" is returned.
