JavaScript startsWith() Method: Check String Beginnings

The startsWith() method in JavaScript is a powerful tool for determining whether a string begins with a specific substring. This method is case-sensitive, meaning that "Hello" and "hello" are considered different strings.

How it Works

The startsWith() method takes two arguments:

• searchValue: The substring to search for at the beginning of the string.
• start (optional): The index from which to start the search. If omitted, the search starts from the beginning (index 0).

If the string begins with the specified searchValue, starting from the optional start index, the method returns true. Otherwise, it returns false.

Syntax

The syntax for the startsWith() method is straightforward:

string.startsWith(searchValue, start)

Example

Let's look at an example to see how it works in practice:

let text = "Hello world, welcome to the universe.";

// Starts at position 0 (true)
console.log(text.startsWith("Hello"));  // Output: true

// Starts at position 1 (false)
console.log(text.startsWith("Hello", 1)); // Output: false

JavaScript startsWith() in Action

Here's how you can use startsWith() in various scenarios:

1. Validating User Input

You can use startsWith() to validate user input, ensuring it adheres to specific formats or conventions. For example, you could check if an email address starts with a valid domain name:

function isValidEmail(email) {
  return email.startsWith("@example.com");
}

2. Filtering Data

startsWith() can help you filter data based on specific prefixes. You can use it in combination with arrays or other data structures to extract elements matching a particular pattern:

let filenames = ["image1.jpg", "document.pdf", "video.mp4", "image2.png"];

let images = filenames.filter(filename => filename.startsWith("image"));
console.log(images); // Output: ["image1.jpg", "image2.png"]

3. Building Dynamic Content

This method can be used to generate dynamic content based on specific prefixes in your data. For instance, you might create different HTML elements depending on whether a string starts with a certain tag:

let content = ["# Welcome", "## Introduction", "* Hello World"];

let output = "";

for (let line of content) {
  if (line.startsWith("#")) {
    output += `
${line.slice(1).trim()}
`;
  } else if (line.startsWith("##")) {
    output += `
${line.slice(2).trim()}
`;
  } else if (line.startsWith("*")) {
    output += `
${line.slice(1).trim()}
`;
  }
}

console.log(output);

Browser Support

The startsWith() method is an ECMAScript 6 (ES6) feature, supported by all modern browsers since June 2017. Internet Explorer does not support this javascript method.

Browser	Support
Chrome	Supported since Chrome 51 (May 2016)
Edge	Supported since Edge 15 (April 2017)
Firefox	Supported since Firefox 54 (June 2017)
Safari	Supported since Safari 10 (September 2016)
Opera	Supported since Opera 38 (June 2016)
Internet Explorer	Not supported

Summary

• The startsWith() method in JavaScript is a powerful tool for string manipulation.
• It checks whether a string begins with a specific substring, returning true if it does and false otherwise.
• The method is case-sensitive, meaning that "Hello" and "hello" are considered different strings.
• It takes two arguments: the substring to search for (searchValue) and the optional starting index (start).
• startsWith() is widely supported in modern browsers but is not supported in Internet Explorer.
• This method can be used for various purposes, including validating user input, filtering data, and building dynamic content.