Javascript Icon Get 67% off the JavaScript Master Bundle!

See the bundle then add to cart and your discount is applied.

0 days
00 hours
00 mins
00 secs
Javascript

Ways to check if a String starts with specific characters

Like all things JavaScript, there are many ways to accomplish the same task. Here we’ll dive into the various ways to check if a JavaScript string starts with something, such as a single character or multiple characters.

For the purposes of this article, we’ll be searching for the letter 'J' at the beginning of the word 'JavaScript':

const word = 'JavaScript';
const char = 'J';

We’ll then use char alongside a few different methods to demonstrate approaches to finding a character at the beginning of a string in JavaScript!

Based on what you’re doing, you might want to “extract” part of that string, however more often than not we actually need to check if the character(s) are even there to begin with. This means we’ll simply want a Boolean (true/false) value back from our methods.

ES6 .startsWith()

Firstly, you’re probably here for the “correct answer”, so let’s start with String.prototype.startsWith, a mildly new String feature introduced in ES2015 / ES6:

const word = 'JavaScript';
const char = 'J';

word.startsWith(char); // true

This is the most modern and recommended approach. The remaining methods in this article are simply for reference and different scenarios.

🕵️‍♂️ Note: This method isn’t supported in Internet Explorer, so you’ll need a polyfill and to check the browser compatibility.

indexOf

We can use String.prototype.indexOf to return us the index of the particular character, so this one’s nice and simple:

const word = 'JavaScript';
const char = 'J';

word.indexOf(char) === 0 // true

However, unlike our good friend .startsWith() you’ll notice that we have to do something with the return value and using === 0 to ensure that it fits the beginning of our string.

Of course as well, this method is just checking the first character, however will still work for multiple characters as it returns the index of the found item(s).

lastIndexOf

Before .startsWith() arrived, this was the preferred solution as it was more performant.

Using String.prototype.lastIndexOf allows the string to search faster as it begins at the index of 0. It looks backwards through the string, starting at the beginning. Therefore this will get to the answer even faster. If it finds a match, it won’t search the entire string.

Similar to .indexOf() we’ll also have to check the returned index using === 0:

const word = 'JavaScript';
const char = 'J';

word.lastIndexOf(char, 0) === 0 // true

substring

An oldie but a goodie. Using String.prototype.substring is also a nice method for fine-grained string control, as it allows us to specify a “search index” via two parameters. Start index, end index.

const word = 'JavaScript';
const char = 'J';

word.substring(0, 1) === char // true

You’ll notice that this doesn’t read as well as the other solutions listed above, and let’s be honest we all forget the difference between substring and substr and how to use them. MDN also considers substr as deprecated, so I’ve chosen not to include it however using it in the same scenario as above will give the same results.

JavaScript Array Methods eBook Cover

🎉 Download it free!

Ready to go beyond ForEach? Get confident with advanced methods - Reduce, Find, Filter, Every, Some and Map.

  • Green Tick Icon Fully understand how to manage JavaScript Data Structures with immutable operations
  • Green Tick Icon 31 pages of deep-dive syntax, real-world examples, tips and tricks
  • Green Tick Icon Write cleaner and better-structured programming logic within 3 hours

As an extra bonus, we'll also send you some extra goodies across a few extra emails.

string[0] index

Similar to looking up “indexes” in an array, you can also use the square bracket syntax to lookup each “index” of a string. For example string[0] would return the first item in the string, in the same way array[0] returns us the first array item.

With this, we could access the initial character of the string, which requires no function call and should technically be one of the fastest mechanisms - though it does promote a little “oldschool” style code. These days, JavaScript is shifting towards a more functional style, with methods such as .startsWith() amongst other utilities.

Here’s using the index lookup syntax:

const word = 'JavaScript';
const char = 'J';

word[0] === char // true

Regular Expressions

I love Regular Expressions (why, I hear you ask?!). I don’t know, they’re just great and make me feel like a “proper coder”. Nevertheless, let’s investigate some RegExp!

Built into JavaScript is a global function called RegExp, which allows us to dynamically construct a Regular Expression.

Check out my in-depth guide to Regular Expression matching for more details on some RegExp prototype methods.

Here’s how we can use the ^ character (which means “the beginning of the string”) to check if our string starts with our character:

const word = 'JavaScript';
const char = 'J';

new RegExp(`^${char}`).test(word) // true

You’ll notice I’m using an ES6 string literal and some interpolation here. This is basically the same as doing new RegExp('^' + char) but is obviously more awesome, as who likes concatenating strings anymore?

Finally, we could also “hard code” our Regular Expression and use it against .test() (which returns a Boolean, by the way):

const word = 'JavaScript';
const char = 'J';

/^J/.test(word) // true

But you can see how this would be less appealing.

All-in-all, you know startsWith is the way to go, so what’re you waiting for?

🏆 Oh, and if you’d like to learn even more JavaScript you should come and check out my JavaScript courses. They’re the result of 10 years of developing and I’ve put every ounce of knowledge into them, I hope you find them super helpful for your career!

P.S. Here’s a StackBlitz embed with everything inside, so you can have a fiddle with it in real-time:

Thanks for reading, come check out our Newsletter to stay up to date with the latest and greatest in all things web.

Free eBooks:

JavaScript Array Methods eBook Cover

Ready to go beyond ForEach? Get confident with advanced methods - Reduce, Find, Filter, Every, Some and Map.

NestJS Build a RESTful CRUD API eBook Cover

Build your first NestJS app. With the CLI you'll learn the basics of real-world NestJS development.