Top 5 JavaScript startsWith() Alternative Methods With Examples

Have you ever wanted to check if a string starts with a certain substring in JavaScript? If so, you might have used the built-in method startsWith(), which returns true or false depending on the match.

But what if you need more flexibility or functionality than startsWith() can offer? For example, what if you want to ignore the case of the strings, or use a regular expression instead of a literal substring?

In this blog post, we will explore some alternative ways to check if a string starts with another string in JavaScript, and compare their performance.

1. indexOf()
2. lastIndexOf()
3. match()
4. slice()
5. substring()

By the end of this post, you will have a better understanding of how to use different methods to achieve the same goal, and how to choose the best one for your needs.

What is JavaScript startsWith() method?

Before going to JavaScript startsWith() alternative methods, let's see what is startsWith() method.

JavaScript String startsWith() method determines whether a string starts with the specific string and returns true if the string begins with characters from another string, otherwise returns false. JavaScript startsWith() method is case sensitive. 

To use startsWith() JavaScript string method, you simply call the method on a string and pass in the searchString parameter. 

If you want to use startsWith() method from a specific index, you can pass in the position parameter. This is really useful when doing incremental search in a string.

Here’s an example:

let inputString = "Hello JavaScript";
let startsWithHello = inputString.startsWith("Hello");
console.log(startsWithHello); 
// Output: true

In the above example, we’re checking whether the JavaScript string begins with a “Hello” string. In this example, the input string “Hello JavaScript” starts with “Hello”, so startsWith() method returns true.

In JavaScript, there is an identical opposite method to the startsWith() method. The JavaScript endsWith() method can be used to check whether a string ends with a specific substring or character. 

JavaScript String startsWith() Method

JavaScript startsWith() alternative methods

What are the JavaScript startsWith() alternative methods? startsWith() alternatives like indexOf() and lastIndexOf() methods return 0 if the substring is found at the beginning, while slice() and substring() returns true if the extracted part matches the substring. Regular expressions with the test() method can also be used to achieve similar results.

Here we will see five different JavaScript startsWith() alternative methods:

JavaScript startsWith() Alternative Methods

1. indexOf()

JavaScript indexOf() method returns the position of the first occurrence of a specified value in a string. If the value you are searching is not found, then it returns -1.

If the indexOf() method returns 0, then you can assume the string starts with the specified string or character. You can use indexOf() method as one of the startsWith() alternative method.

const inputString = 'Hello, JavaScript!'
const searchText = 'Hello'

if (inputString.indexOf(searchText) === 0) {
  console.log('String starts with "Hello".')
}
// Output: "String starts with "Hello"."

2. lastIndexOf()

JavaScript lastIndexOf() method returns the last occurrence of a substring in the string. If the lastIndexOf() method returns 0, then you can confirm the string starts with the specified substring.

Note that, the start index is set as 0 so that it will start from the beginning of the string.

const inputString = 'Hello, JavaScript!'
const searchText = 'Hello'

if (inputString.lastIndexOf(searchText, 0) === 0) {
  console.log('String starts with "Hello".')
}
// Output: "String starts with "Hello"."

3. match()

This method searches a string for a specified value and returns that value as a string. If the value is not found, it returns null.

const inputString = 'Hello, JavaScript!'
const searchText = 'Hello'

if (inputString.match(searchText) && inputString.match(searchText).length > 0) {
  console.log('String starts with "Hello".')
}
// Output: "String starts with "Hello"."

4. slice() 

JavaScript slice() method extracts a portion of a string and returns a new string. It takes two parameters: the starting index and the ending index.

const inputString = 'Hello, JavaScript!'
const searchText = 'Hello'

if (inputString.slice(0, searchText.length) === searchText) {
  console.log(`String starts with "${searchText}"`)
}
// Output: "Input string starts with 'Hello'"

5. substring()

The JavaScript substring() method extracts a portion of a string and returns it as a new string. It takes two parameters: the starting index (inclusive) and the ending index (exclusive) of the desired substring.

const inputString = 'Hello, JavaScript!'
const searchText = 'Hello'

if (inputString.substring(0, searchText.length) === searchText) {
  console.log(`String starts with "${searchText}"`)
}
// Output: "Input string starts with 'Hello'"

You can use these startsWith() alternative methods to accomplish the same result as the startsWith() method. 

JavaScript startsWith() alternative methods performance comparison

The startsWith() method is the most efficient and readable way to check if a string begins with a certain value. Other methods, such as slicing, regex, or indexOf, perform worse than startsWith() in terms of performance and clarity.

I measured that startsWith() can handle 157,687 operations per second, while the other methods lag behind.

Conclusion

In this blog post, we have explored some alternative methods to the JavaScript startsWith() method, which can be useful for checking if a string begins with a certain substring. We have seen how to use regular expressions, slice(), indexOf(), and indexOf() to achieve the same functionality with performance comparison.

I hope you have learned something new and useful from this article, and that you will apply these techniques in your own projects!