Understanding String.includes() and String.indexOf() in JavaScript

In JavaScript, when working with strings, it’s often necessary to check if a particular substring exists within a larger string. Two commonly used methods for this purpose are String.includes() and String.indexOf(). Both methods serve similar purposes but have distinct differences in their implementation and usage. In this article, we’ll explore both methods in detail, providing examples and use cases to help you understand when to use each.

String.includes()

The String.includes() method checks if one string contains another substring and returns a boolean (true or false) based on the presence of the substring. This method is straightforward and easy to use, making it a popular choice for simple substring checks.

Syntax

string.includes(searchValue[, fromIndex])

searchValue: The substring to search for.
fromIndex (optional): The index at which to start the search. The default value is 0.

Example

const str = 'Hello, World!';

// Check if 'World' is present in the string
console.log(str.includes('World')); // Output: true

// Check if 'world' (lowercase) is present
console.log(str.includes('world')); // Output: false

// Start searching from index 7
console.log(str.includes('World', 7)); // Output: true

In the example above, str.includes('World') returns true because the substring ‘World’ exists in the string. However, str.includes('world') returns false because the search is case-sensitive.

String.indexOf()

The String.indexOf() method searches for a substring within a string and returns the index of the first occurrence of the substring. If the substring is not found, it returns -1. This method provides more control over the search process and can be used when you need to know the position of the substring.

Syntax

string.indexOf(searchValue[, fromIndex])

searchValue: The substring to search for.
fromIndex (optional): The index at which to start the search. The default value is 0.

Example

const str = 'Hello, World!';

// Find the index of 'World'
console.log(str.indexOf('World')); // Output: 7

// Find the index of 'world' (lowercase)
console.log(str.indexOf('world')); // Output: -1

// Start searching from index 5
console.log(str.indexOf('World', 5)); // Output: 7

In this example, str.indexOf('World') returns 7, which is the starting index of the substring ‘World’ in the string. Since the substring ‘world’ is not found, str.indexOf('world') returns -1.

Differences Between includes() and indexOf()

While both methods can be used to check for the presence of a substring, there are key differences between them:

Return Value:
includes(): Returns a boolean (true or false).
indexOf(): Returns the index of the substring or -1 if not found.
Use Case:
Use includes() when you only need to know if a substring exists in the string.
Use indexOf() when you need to know the position of the substring or if it exists.

Example Comparison

const str = 'Hello, World!';

// Using includes()
if (str.includes('World')) {
  console.log('Substring found!');
} else {
  console.log('Substring not found!');
}

// Using indexOf()
const index = str.indexOf('World');
if (index !== -1) {
  console.log('Substring found at index:', index);
} else {
  console.log('Substring not found!');
}

Case Sensitivity

Both includes() and indexOf() are case-sensitive by default. This means that the search will only match substrings that exactly match the case of the characters in the original string.

Example

const str = 'Hello, World!';

// Case-sensitive search
console.log(str.includes('hello')); // Output: false
console.log(str.indexOf('hello'));   // Output: -1

// Case-insensitive search
const lowerStr = str.toLowerCase();
console.log(lowerStr.includes('hello')); // Output: true
console.log(lowerStr.indexOf('hello'));   // Output: 0

If you need to perform a case-insensitive search, you can convert the string to lowercase (or uppercase) before using either method.

Multiple Use Cases

Use Case 1: Validating User Input

const userInput = prompt('Enter your email address:');

if (userInput.includes('@')) {
  console.log('Valid email format.');
} else {
  console.log('Invalid email format. Please include an @ symbol.');
}

Use Case 2: Checking for a Specific Character

const str = 'JavaScript is fun!';

if (str.indexOf('!') !== -1) {
  console.log('The string ends with an exclamation mark.');
}

Frequently Asked Questions

What is the difference between includes() and indexOf()?
includes() returns a boolean indicating whether the substring exists, while indexOf() returns the index of the substring or -1 if it is not found.
Can I use includes() and indexOf() for case-insensitive searches?
Yes, by converting the string to lowercase (or uppercase) before performing the search.
Which method is more efficient?
Both methods are efficient for most use cases. The choice between them depends on whether you need a boolean result or the index of the substring.
Can I search for a substring starting from a specific index?
Yes, both methods accept an optional fromIndex parameter to specify the starting point of the search.

Conclusion

The includes() and indexOf() methods are powerful tools for working with strings in JavaScript. By understanding their differences and use cases, you can choose the appropriate method for your specific needs. Practice using both methods with different scenarios to become more comfortable with their functionality.