JavaScript: Check if String StartsWith another String

Best Solution: The startsWith() Method

The simplest and most straightforward way to check if a string starts with another string in JavaScript is by using the built-in startsWith() method. Introduced in ES6, it returns a boolean value indicating whether or not the string begins with the characters of the specified string.

let str = 'Hello World!';
console.log(str.startsWith('Hello')); // Output: true
console.log(str.startsWith('World')); // Output: false

In the example above, str.startsWith('Hello') checks if str starts with Hello, and it returns true because it does.

Method 2: The substring() Method

Before ES6 and the introduction of startsWith(), one common approach was to use the substring() method. substring() extracts characters from a string between two specified indices and returns the new sub-string.

let str = 'Hello World!';
console.log(str.substring(0, 5) === 'Hello'); // Output: true
console.log(str.substring(0, 5) === 'World'); // Output: false

In this example, str.substring(0, 5) returns the first five characters of str. We then compare this substring with Hello and World.

If you want to make it more dynamic by not entering the number of characters in your search string explicitly, you can use the string length property as follows:

let haystack = 'Hello World!';
let needle = 'Hello';

console.log(haystack.substring(0, needle.length) === 'Hello'); // Output: true
console.log(haystack.substring(0, needle.length) === 'World'); // Output: false

Method 3: The slice() Method

Another alternative to startsWith() is the slice() method. Similar to substring(), slice() extracts a part of a string and returns the extracted part in a new string.

let str = 'Hello World!';
console.log(str.slice(0, 5) === 'Hello'); // Output: true
console.log(str.slice(0, 5) === 'World'); // Output: false

Method 4: The indexOf() Method

The indexOf() method returns the index of the first occurrence of a specified text in a string. If the specified text does not occur in the string, it returns -1. We can use this to check if a string starts with another string by checking if the returned index is 0.

let str = 'Hello World!';
console.log(str.indexOf('Hello') === 0); // Output: true
console.log(str.indexOf('World') === 0); // Output: false

In this example, str.indexOf('Hello') returns 0 because Hello starts at the beginning of str.

Method 5: The Regular Expression Method

Regular expressions (RegEx) are patterns used to match character combinations in strings. We can use RegEx to check if a string starts with another string.

let str = 'Hello World!';
console.log(/^Hello/.test(str)); // Output: true
console.log(/^World/.test(str)); // Output: false

Here, ^Hello is a RegEx pattern that matches any string that starts with Hello. The caret (^) is a special character that denotes the start of a string.

Case insensitive comparison

All the methods I mentioned above are case-sensitive. There are multiple ways to check if a string starts with another string but ignore case. I recommend using RegEx also in this case as it’s simple and accurate. All you have to do is to use the “i” flag:

let str = 'Hello World!';
console.log(/^hello/.test(str)); // Output: false
console.log(/^hello/i.test(str)); // Output: true

You might be tempted to use .toUpperCase() or .toLowerCase() to do case-insenstive comparisons. This method is unreliable and shouldn’t be used.
To learn more, you can read about Simple Loose Matches

Final words

Each method has its own advantages and use cases. The startsWith() method is the most straightforward and readable, but it’s not supported in Internet Explorer. The substring(), slice(), and indexOf() methods are more broadly supported, but they’re a bit less intuitive. The RegEx method is the most powerful and flexible, but it can be overkill for simple string matching and may be harder to read for beginners.

When choosing a method, consider the complexity of your needs, the readability of your code, and the JavaScript environment in which your code will run.