JavaScript String includes() Method: Checking String Inclusion

The includes() method in JavaScript is a powerful tool for determining if a string contains a specified substring. It’s a case-sensitive method that returns a boolean value: true if the substring is found within the string, and false otherwise. This method is essential for string manipulation and data validation, making it a fundamental part of any JavaScript developer’s toolkit.

Purpose of the includes() Method

The primary purpose of the includes() method is to efficiently check for the presence of a substring within a given string. It provides a straightforward way to perform a search operation without the need for complex regular expressions. This is especially useful when dealing with user input, searching through text, or validating data that must contain specific characters or words.

Syntax of includes() Method

The includes() method has the following syntax:

string.includes(searchString, position);

Here:

• string: The original string in which the search will be performed.
• searchString: The substring you are looking for.
• position (optional): The starting index position to begin the search in the string. If not provided, the search starts from the beginning of the string (index 0).

Parameter	Type	Description	Required
`searchString`	String	The substring to search for within the string.	Yes
`position`	Number	The index position to start searching from. If omitted, the search starts at index 0.	No

Basic Usage of includes()

Let’s start with basic examples demonstrating how to use the includes() method effectively.

Checking for a Substring

The simplest use case involves checking whether a string contains a particular substring:

const str1 = "Hello, world!";
const containsWorld = str1.includes("world");
const containsUniverse = str1.includes("Universe");

console.log(containsWorld); // Output: true
console.log(containsUniverse); // Output: false

Case Sensitivity

It’s crucial to remember that the includes() method is case-sensitive:

const str2 = "JavaScript is Awesome";
const containsJavascript = str2.includes("javascript");
const containsJavaScript = str2.includes("JavaScript");

console.log(containsJavascript); // Output: false
console.log(containsJavaScript); // Output: true

Using the Optional position Parameter

The optional position parameter allows you to start the search from a specific index:

const str3 = "I love coding in JavaScript";
const includesLoveFromStart = str3.includes("love"); // starts at index 0
const includesLoveFromIndex = str3.includes("love", 2); // starts at index 2
const includesLoveFromIndexAfter = str3.includes("love", 5); // starts at index 5

console.log(includesLoveFromStart);  // Output: true
console.log(includesLoveFromIndex);  // Output: true
console.log(includesLoveFromIndexAfter);  // Output: false

Empty Substring

Searching for an empty string will always return true because an empty string can be considered as a substring of any string:

const str4 = "Any String";
const includesEmpty = str4.includes("");
console.log(includesEmpty); // Output: true

Real-World Examples of includes()

Let’s explore some practical scenarios where the includes() method can be very useful.

Data Validation

You can use includes() to validate user input, ensuring that specific characters or substrings are included in a given text:

<input type="text" id="inputValidation" placeholder="Enter text containing '@'"/>
<button onclick="validateInput()">Validate</button>
<div id="validationResult"></div>

<script>
  function validateInput() {
    const input_val = document.getElementById("inputValidation").value;
    const result_val = document.getElementById("validationResult");

    if(input_val.includes('@')){
        result_val.textContent = 'Input is valid: contains "@"';
        result_val.style.color = 'green';
    } else {
        result_val.textContent = 'Input is invalid: does not contain "@"';
        result_val.style.color = 'red';
    }
  }
</script>

In this example, the validateInput function checks if the input text contains the “@” symbol.

Text Searching

The includes() method is ideal for searching through text to find specific words or phrases:

const longText = `The quick brown fox jumps over the lazy dog.
It is a common sentence used to test fonts and character sets.
The quick brown fox is very agile.`;

const searchForFox = longText.includes("fox");
const searchForCat = longText.includes("cat");

console.log("Text contains 'fox': " + searchForFox); // Output: Text contains 'fox': true
console.log("Text contains 'cat': " + searchForCat); // Output: Text contains 'cat': false

Filtering Data

You can use the includes() method to filter data based on whether they contain specific strings.

const fruits = ["apple", "banana", "orange", "grape", "kiwi"];
const searchKeyword = "ap";

const filteredFruits = fruits.filter(fruit => fruit.includes(searchKeyword));

console.log(filteredFruits); // Output: ["apple", "grape"]

Here, the filter() method combined with includes() allows us to quickly find fruits containing the substring “ap”.

Performance Considerations

The includes() method is generally fast and efficient for most practical use cases. However, when working with extremely large strings or performing a huge number of searches, performance might become a consideration. In such scenarios, using alternative methods like regular expressions or pre-processing the text could improve overall efficiency.

Important Notes

• The includes() method is case-sensitive. Be mindful of capitalization when searching for substrings.
• The optional position parameter can help you search only a portion of the string.
• Searching for an empty string ("") will always return true.
• For case-insensitive searches or more complex patterns, consider using regular expressions.

Browser Support

The includes() method is supported in all modern web browsers.

Conclusion

The includes() method is a fundamental part of the JavaScript string manipulation toolbox, offering a simple and efficient way to check for the presence of substrings. By combining it with other JavaScript features, you can perform a wide range of operations, from basic data validation to complex text searching and filtering. Understanding and using includes() will empower you to write more robust and efficient code.