Sometimes it can be hard to remember the difference between substring and substr methods, but let’s make this article a quick reminder to help you out with understanding the substring and substr difference.
So, in short – substring vs substr in javascript: What is the difference? When working with substring, the method takes a starting index and an end index, while when working with substr, the method takes a starting index and a length of characters. Yep, that’s it. As simple as that. Nevertheless, there are some additional specifics and tweaks, so let’s dig in a bit deeper and see what the fuss is all about.
What is a JavaScript string?
The JavaScript string is an object that represents a sequence of characters. A JavaScript string stores a series of characters like “Substring vs substr in javascript”. A string can be any text that is positioned inside double or single quotes.
What is a substring() method in JavaScript?
First, let’s take a look at the substring method syntax in JavaScript:
string.substring(start, end)The substring() method will help you extract the characters from a specific string, between two indices (start and end in the syntax example above) that you specify. This way the substring() method will return the new substring and will not change the original string.
In the example above the “start” stands for the position where you want to start the new string extraction. Keep in mind the index is starting from 0. The “end” in the syntax example stands for the position where you want to end the extraction. The “end” position is extracting up to the counted position and is not including “end” itself. End as a second argument is optional.
Let’s take a look at a few simple examples:
let myString = 'deeptechpoint';
// Displays 'd'
console.log(myString.substring(0, 1));
console.log(myString.substring(1, 0)); // for this example notice that if the first argument is greater than the second argument, the substring method will switch these two arguments.
// Displays 'deep'
console.log(myString.substring(0, 4));
// Displays 'point'
console.log(myString.substring(8));
console.log(myString.substring(8, 13));
console.log(myString.substring(13, 8));
// Displays 'deeptechpoint'
console.log(myString.substring(0, 13));
console.log(myString.substring(0, 210));There are two more things worth mentioning. They may be obvious in the examples above, but let’s put them in a theory:
- if either the first (start) or second (end) argument is less than 0, the substring method will treat the arguments as if they were 0
- if the first argument (in our case ‘start’) is greater than the second argument (in our case ‘end’), the substring method will switch these two arguments
What is a substr() method in JavaScript?
Let’s take a look at the substr() method syntax in JavaScript:
string.substr(start, length)The substr() method is very similar to the substring() method – it will help you extract a part of a string, too. The first argument ‘start’ is required and it stands for the starting index – the position where you want to start the extraction. Keep in mind the counting starts from 0, so the first character is at index 0.
The second argument ‘length’ stands for the number of characters to include in the returned string. The ‘length’ as an argument is optional and if you don’t include it, the method will extract the rest of the string.
What happens if the starting argument is positive and greater than, or equal, to the length of the string? The substr() method will return an empty string.
What happens if the starting argument is negative? The substr() method uses it as a character index from the end of the string.
What happens if the starting argument is negative or larger than the length of the string? The starting argument is set to 0.
Don’t worry – we will take a look at a few examples below, and the view will be much clearer, we’re sure.
There is one more thing we need to mention, and we will take a look at the specific case in the example below. When you want to extract characters from the end of the string, you can use a negative integer as a first argument (‘start’). When this is the case, the start of the returned string is counted from the end of the string that the substr() method is used on. However, it is worth mentioning that this tweak does not work in IE 8 and earlier. In addition, substr() method is considered a legacy feature in ECMAScript, and is very possible it will be removed from future versions. Our recommendation is best to avoid using it altogether.
Let’s take a look at a few examples.
let myString = 'deeptechpoint';
// Displays 'deep'
console.log(myString.substr(0, 4));
// Displays 'point' because when the starting argument is negative, the substr() method uses it as a character index from the end of the string
console.log(myString.substr(-5));
//Displays empty string when starting argument is positive or greater than, or equal, to the length of the string
console.log(myString.substr(14, 4));
// Displays 'tech'
console.log(myString.substr(4, 4));Final thoughts about the difference between substring() and substr()
The difference between substring() and substr() method is in the second argument: with the second argument substring() method returns a string up to, but excluding the counted position, while with a ‘length’ argument the substr() method extracts the number of characters to include in the returned string. The first argument is the same in both methods – the first argument is required and it stands for the starting index – the position where you want to start the extraction – it starts with 0. Both the substring() and substr() methods don’t change the original string.