For the purposes of this article, we’ll be searching for the letter
'J' at the beginning of the word
We’ll then use
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.
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:
This is the most modern and recommended approach. The remaining methods in this article are simply for reference and different scenarios.
We can use
String.prototype.indexOf to return us the index of the particular character, so this one’s nice and simple:
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).
.startsWith() arrived, this was the preferred solution as it was more performant.
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.
.indexOf() we’ll also have to check the returned index using
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.
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
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.
Directives, simple right? Wrong! On the outside they look simple, but even skilled Angular devs haven’t grasped every concept in this eBook.
- Observables and Async Pipe
- Identity Checking and Performance
- Web Components <ng-template> syntax
- <ng-container> and Observable Composition
- Advanced Rendering Patterns
- Setters and Getters for Styles and Class Bindings
That went smoothly, check your email.
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 would return the first item in the string, in the same way
array returns us the first array item.
.startsWith() amongst other utilities.
Here’s using the index lookup syntax:
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!
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
Here’s how we can use the
^ character (which means “the beginning of the string”) to check if our string starts with our character:
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):
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?
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.