We can check if JavaScript String contains a substring using pre-ES6 way and ES6 way. ES6 brought a lot of new things that help developers do things faster. The same happened with the checking string for a substring.
Check if JavaScript string contains a substring PRE-ES6
In order to check a string for a substring, we are going to use indexOf(). The indexOf() method returns the index within the calling String object of the first occurrence of the specified value, starting the search at fromIndex. Returns -1 if the value is not found, according to MDN.
This means that indexOf() will search for the provided string, and if this string is found, it will return the index on which string starts. Otherwise, it will return -1.
The indexOf() accepts two parameters. The first parameter is searchValue, the string that we are looking for. The second parameter is startingIndex, index from which we want to start the search. The second parameter can be omitted. If omitted the second parameter will default to 0
let string = "This is a string";
console.log(string.indexOf("a"))
//Result
// 8
console.log(string.indexOf("a", 22));
// Result
// -1
console.log(string.indexOf("a", 5));
// Result
// 8
As we can see from the example above when we used indexOf() without the second parameter indexOf() returned 8. This means that the first occurrence of our string is on the 8th index. But, when we used indexOf() with the second parameter that is larger than 8, -1 was returned. That means that there was no occurrence of our string after the index we’ve provided.
This concludes pre-ES6 way of checking if JavaScript String contains substring.
Check if JavaScript string contains a substring ES6
Among other things, ES6 introduced includes() method. The includes() method performs a case-sensitive search to determine whether one string may be found within another string, returning true or false as appropriate, according to MDN.
Instead of returning index, includes() method returns true or false. Also, includes() accepts the same two parameters as indexOf(). NOTE: includes() is not supported in Internet Explorer.
let string = "This is a string";
console.log(string.includes("a"))
//Result
// true
console.log(string.includes("a", 22));
// Result
// false
console.log(string.includes("a", 5));
// Result
// true
In the code snippet above includes() returned true when we provided no index (it started from 0) and when our index was lower than substring.
How to use indexOf and includes
Both methods, indexOf() and includes(), can be used to check if JavaScript String contains substring. But, if we really need to know the position/index where substring occurs, then we need to use indexOf().
let string = "This is a string";
/**
* Now we can check if
* string contains substring
* using indexOf()
* */
if (string.indexOf("a") !== -1) {
console.log("There is a substring");
} else {
console.log("Substring not found");
}
//Result:
// "There is a substring"
/**
* Let's use includes() for
* the same action
* */
if (string.includes("a")) {
console.log("There is a substring");
} else {
console.log("Substring not found");
}
//Result:
// "There is a substring"
/**
* Let's check if index is larger
* or smaller than number
* */
if (string.indexOf("a") > 10) {
console.log("A substring is too far");
} else {
console.log("A substring is close enough");
}
//Result:
// "A substring is close enough"
In the example above we can see the application of both methods. The includes() method provides cleaner code, but indexOf() returns information that includes() doesn’t.
If you have any questions or anything you can find me on my Twitter, or you can read some of my other articles like Unlimited arguments in a JavaScript function in 2 ways.