string is a
They are used to store much different information, from names, product descriptions, etc.. and hopefully NOT passwords!.
In this article, we are going to look at 10 String methods that you will see yourself use on an almost daily basis once you start working with
At the end of this article you will find a link to download a set of flashcards to bring with you and revise the concepts discussed in this article.
If you are not too familiar with
string (the primitive) and
String. in the method names are written in two different cases. The answer is that lowercase
string refers to the primitive type while uppercase
String refers to the global object on which we can call several built-in methods.
The conversion between the primitive
string and the
String object is done automatically and that is why you don't have to write code like the following:
const primitiveString = 'Alberto'; const str = new String([primitiveString]); str.length; // 7
Here we are creating a new
String methods directly on the primitive like this:
const primitiveString = 'Alberto'; primitiveString.length; // 7
Now that we covered some basics, let's start looking at some useful methods.
String.prototype.indexOf() returns the index of the first occurrence in the calling
String object of the value that we specify as an argument.
const str = "Watermelon"; str.indexOf("melon"); // 5 const str2 = "My dog is named boo. My dog is 7 years old"; str2.indexOf('dog'); // 3 const str3 = "My DOG is named boo. My dog is 7 years old"; str3.indexOf('dog'); // 24
In the second
String, the word "dog" appears twice but
indexOf() only returns the index of the first occurrence.
In the third
String you will see that "DOG" is now uppercase, thus the result changed from '3' to '24' because the
indexOf() method is case sensitive.
String.protoype.includes() method is similar to the previous, in that it's used to find one string inside another one but it won't return the index of it but simply a boolean, whether the first string can or cannot be found in the second one.
const str = "Watermelon"; str.includes("melon"); // true const str2 = "WATERMELON"; str2.includes("melon"); // false
As you can see, this method is also case sensitive, returning us
false where looking for lowercase "melon" inside of uppercase "WATERMELON".
Since these two methods are very similar, you may be wondering why you should use one over the other and the answer is simply to choose the one that best fits what you are trying to achieve.
Do you need to know at what index does string B appear in string A? use
indexOf(). Conversely, are you just checking if string B is present in string A? You could use something like:
a.indexOf(b) !== -1 but you should just use
includes() for better clarity of your code.
These two methods have been added with the ECMAScript 2015 (ES6) specification and are used to determine if one string starts, or ends, with a specified set of characters returning
Similar to the two methods above, these two are also case sensitive
Both methods can take two parameters, the first one is the same for both and it's a string. The second one differs between the two methods:
startsWith()can take an optional parameter indicating the starting position where to begin searching for a string. It defaults to 0
endsWith()can take an optional parameter indicating the length of the original string to check. It defaults to the length of the string.
Let's look at the following examples for
const str = "Watermelon"; str.startsWith('Water'); // true str.startsWith('Water', 1); // false str.startsWith('melon',5 ) // true str.startsWith('lon',7 ) // false
Let's break the code down:
truebecause "Watermelon" includes the string 'Water' right at the beginnng
falsebecause the string that is used as the base to check is the original string starting at index 1 which equals to 'atermelon'
str.startsWith('lon',7 )both return
truebecause the string we used to check are the original string starting from index 5 and index 7, which equal to 'melon' and 'lon'.
Now let's look at some examples for
const str = "Watermelon"; str.endsWith('melon'); // true str.endsWith('me', 7) // true str.endsWith('melon', 8) // false
Let's break the code down:
truebecause 'Watermelon' ends with 'melon'
truebecause we are only checking the first 7 characters of the string, which in turn transforms it from 'Watermelon' to 'Waterme'.
falsebecause we specified a max length of 8 which transformed the string to check to 'Watermel' which does not end with 'melon'.
String.protoype.slice() is a useful method to extract a section of a string into another string without modifying the original one.
This method takes two parameters: a beginning index and an end index. The second one is optional and it defaults to the end of the string if not specified.
Let's look at an example:
const str = "Watermelon"; const str2 = str.slice(1); // atermelon const str3 = str.slice(1,5); // ater const str4 = str.slice(5); // melon const str5 = str.slice(10); // ''
Let's look at what we just did:
str.slice(1)extracts every character from index 1 to the end of the string
str.slice(1,5)extracts characters from index 1 to index 5
str.slice(5)extracts characters from index 5 to the end of the string
str.slice(11)extracts characters from index 11 to the end of the string. Since the string does not have 11 characters, the result we got was an empty string
String.prototype.substring() is very similar to the previous
slice() method, in that it is used to extract a portion of a string.
It takes two arguments, one for a start index and one for an end index.
Let's look at some examples:
const str = "Watermelon"; const str2 = str.substring(1); // atermelon const str3 = str.substring(1,5); // ater const str4 = str.substring(5); // melon const str5 = str.substring(10); // ''
If you look at the examples above and compare them with the ones from the
slice() method you will wonder what's the difference as they both returned the same substring.
While for the most part, you can use them interchangeably, there are differences between the two.
Look at this example for the first difference:
const str = "Watermelon"; const subStr = str.substring(10,0); // Watermelon const sliceStr = str.slice(10,0); // ''
In this case, the start index was higher than the end index I've provided and as you can see the two methods behaved differently:
substring() will swap start and end index if start is higher than end while
slice(), on the other hand, won't do that, thus returning an empty string.
Another difference we can observe has to do with negative indexes:
const str = "Watermelon"; const subStr = str.substring(-3); // Watermelon const sliceStr = str.slice(-3); // lon
When we set the starting point as a negative value,
substring() will simply treat it as 0 (and that is also valid for
NaN values) while
slice() will start counting the index from the end of a string.
That is why
str.slice(-3) returned 'lon', because it started counting from 3 steps from the end of the string, all the way to the end.
For the most part, you will be fine using either
substring() but it is useful to know that there are some differences between the two.
Disclaimer: Links to Amazon and Educative are affiliate links, purchases you make will generate extra commissions for me. Thank you