Javascript Tips: slice, substr, substring
When I started studying Javascript, I saw a lot of string manipulation functions that seems to be doing the exact same thing. However, when we look closely, we see that they have some unique features.
I focus this article on three functions, slice, substr and substring. Enjoy!
The slice() method extracts parts of a string and returns the extracted parts in a new string.
Syntax:str.slice(beginIndex, endIndex)
The extracted section depends on the arguments passed to the function:
- If no arguments are passed to the function, it returns the entire string.
- If one integer argument beginIndex is passed to the function, it returns a substring starting at beginIndex and ending at the end of the string.
- If two integer arguments, beginIndex and endIndex, are passed to the function, it returns a substring starting at beginIndex and ending at endIndex, not including “endIndex” itself. For instance: str.slice(1,4), extracts the first, second and third characters.
- If one (or both) of the arguments passed to this function is negative, the selection starts from the end of the string. Its value is capped at -string.length. For instance: str.slice(2,-1), extracts the third character through the second to last character in the string.
var str1 = 'The morning is upon us.',
str2 = str1.slice(1, 8),
str3 = str1.slice(4, -2),
str4 = str1.slice(12),
str5 = str1.slice(30);
console.log(str2); // he morn
console.log(str3); // morning is upon u
console.log(str4); // is upon us.
console.log(str5); // Important: It does not change the original string.
The substr() method extracts parts of a string, beginning at the character at the specified position, with a specified number of characters.
Warning: Although String.prototype.substr(…) is not strictly deprecated (as in “removed from the Web standards”), it is considered a legacy function and should be avoided when possible. It is not part of the core JavaScript language and may be removed in the future. If at all possible, use the substring() method instead.
Syntax:str.substr(start, length)
The extracted section depends on the arguments passed to the function:
- If no arguments are passed to the function, it returns the entire string.
- If one integer argument, start, is passed to the function, it returns a substring starting at index start and ending at the end of the string. The same thing happens if the length argument is undefined.
- If two integer arguments, start and length, are passed to the function, it returns a substring starting at index start and with a specified length.
- If the start argument is negative, the selection starts from the end of the string. Its value is capped at -string.length.
- If the length argument is negative or 0, it returns a empty string.
var aString = 'Mozilla';
console.log(aString.substr(0, 1)); // 'M'
console.log(aString.substr(1, 0)); // ''
console.log(aString.substr(-1, 1)); // 'a'
console.log(aString.substr(1, -1)); // ''
console.log(aString.substr(-3)); // 'lla'
console.log(aString.substr(1)); // 'ozilla'
console.log(aString.substr(-20, 2)); // 'Mo'
console.log(aString.substr(20, 2)); // ''Important: It does not change the original string.
The substring() method extracts the characters from a string, between two specified indices, and returns the new substring.
Syntax:str.substring(indexStart, indexEnd)
The extracted section depends on the arguments passed to the function:
- If no arguments are passed to the function, it returns the entire string.
- If one integer argument, indexStart, is passed to the function, it returns a substring starting at indexStart and ending at the end of the string.
- If two integer arguments, indexStart and indexEnd, are passed to the function, it returns a substring starting at indexStart and ending at indexEnd, not including the indexEnd itself;
- If indexStart is equal to indexEnd, returns an empty string;
- If indexStart is greater than indexEnd, then the two arguments were swapped;
- Any argument value that is less than 0 or greater than string.length is treated as if it were 0 and string.length, respectively.
var anyString = 'Mozilla';
console.log(anyString.substring(0, 1)); // 'M'
console.log(anyString.substring(1, 0)); // 'M'
console.log(anyString.substring(0, 6)); // 'Mozill'
console.log(anyString.substring(4)); // 'lla'
console.log(anyString.substring(4, 7)); // 'lla'
console.log(anyString.substring(7, 4)); // 'lla'
console.log(anyString.substring(0, 7)); // 'Mozilla'
console.log(anyString.substring(0, 10)); // 'Mozilla'Important: It does not change the original string.
To sum up, I put an example bellow that shows the difference among the three functions. I did not use negative numbers since the function substring does not support It. As you can see, the function slice and substring returns the same results. The main difference between them is that theslice receives negative values as inputs. A negative value, for instance, the index -1 is actually the index string.length-1, which is the last index of any string.
var anyString = 'Mozilla';
console.log(anyString.slice(1, 3)); // 'oz'
console.log(anyString.substr(1, 3)); // 'ozi'
console.log(anyString.substring(1, 3)); // 'oz'I hope this can help you as much as It helped me.
Feel free to comment and give feedback bellow
