Checking Substrings Cleanly

Use the includes method for a yes or no answer, and indexOf when you need the position. The newer string methods were added in the 2015 edition precisely so that you would not have to write indexOf and compare the result to minus one every time.

const url = "https://example.com/docs/guide";

console.log(url.includes("docs"));          // true
console.log(url.startsWith("https://"));    // true
console.log(url.endsWith("guide"));         // true
console.log(url.indexOf("docs"));           // 20
console.log(url.indexOf("missing"));        // -1

// A small guard function built on startsWith.
const isSecure = (u) => u.startsWith("https://");
console.log(isSecure(url));                // true
console.log(isSecure("http://example.com")); // false

The startsWith and endsWith methods take a position as an optional second argument, which tells the method where to start or where to stop looking. That is useful when you have a string and you want to check the end of it but ignore a trailing newline or a suffix that the platform added.

One trap worth knowing. The includes and startsWith methods reject a regular expression, so passing a pattern throws a TypeError. If you need pattern matching, use the search method or the match method, or construct a regular expression and test that instead.

For case-insensitive checks, convert both sides to the same case first, or use the regular expression flag that ignores case. Just remember that lowercasing the whole string allocates a new string, so on a very hot path a regular expression with the flag is often cheaper.

They answer different questions. IndexOf returns the position of the first occurrence, or minus one when there is no match. Includes returns a boolean. That is the whole difference for a plain substring search.

Both are case sensitive and both work on the raw code units, so a search string containing a character outside the basic multilingual plane has to match exactly. They also differ in what they accept. IndexOf takes a search string, and it can also take a position to start from. Includes takes a search string only, and it throws if you pass it a regular expression.

There is one more difference that catches people. IndexOf on a string uses the same value comparison as the equality operators, so it can find a substring at any position. The related lastIndexOf method searches backwards from the end. On an array, indexOf uses strict equality, so it never finds a matching object by content, only by reference.

For an interview, the practical guidance is to use includes when you only need the answer, and indexOf when you need the position, for example to slice a string at that point. Writing indexOf and comparing to minus one is a code smell that a linter will usually flag, because the includes method exists precisely to express that intent.

Use the match method to find a pattern, and the test method when you only need a yes or no answer. The important detail is the global flag, because it changes the behaviour of the object in ways that surprise people.

const email = "[email protected]";
const pattern = /^[^@\s]+@[^@\s]+\.[^@\s]+$/;

console.log(pattern.test(email));         // true
console.log(pattern.test("not-an-email")); // false

// The global flag makes a regular expression stateful.
const globalPattern = /\d/g;
console.log(globalPattern.test("a1b2"));   // true
console.log(globalPattern.test("a1b2"));   // false - lastIndex moved on
globalPattern.lastIndex = 0;
console.log(globalPattern.test("a1b2"));   // true again

// Use matchAll when you want every match.
console.log([..."a1b2".matchAll(/\d/g)].map((m) => m[0]));   // ["1", "2"]

The statefulness of a global regular expression is the trap. The test method with a global pattern keeps a lastIndex property that advances after each successful match, so calling test twice on the same string gives different answers. It bites hardest when the same pattern object is used in a loop, because the matches start skipping ahead. Either create the pattern inside the function, or use matchAll, which returns a fresh iterator and does not carry state between calls.

Another point on safety. A pattern built from user input can be a security problem if the input contains regular expression metacharacters, because a maliciously crafted value can cause catastrophic backtracking. If you build a pattern from a variable, escape the variable first so that it is matched literally.

And a last note on anchors. The caret and the dollar sign match the start and the end of the whole string, not the start and end of a line, unless you turn on the multiline flag. If you are validating an email address, anchors on both ends are what stop a pattern from matching a substring of a longer string.