This article is a transcript of my free youtube series about basics of web development. If you prefer watching over reading, feel free to visit my channel “Dev Newbs”.
Hello to all the dev newbs out there. Another day, another String method to cover. Today it’s going to be the indexOf() method to always tell us the right position.
The indexOf() method returns the index of the first occurrence of the specified string value within the searched string. Optionally we can also provide a starting position for the search to start from. Method returns the index at which the first occurence of searched string was found or value -1 if the searched string is not found.
Let’s check how it works in the first example:
let searchedString = "Hello my fellow dev newbs! 🙂";
let stringToLookFor = "fellow";searchedString.indexOf(stringToLookFor) // 9
searchedString.indexOf(stringToLookFor, 9) // 9
searchedString.indexOf(stringToLookFor, 12) // -1
We are searching for the position of the string “fellow” in the first and second case. The value we get is 9, because that is the starting position of the first occurrence of the specified string. The last case returns a value of -1, because we are searching in the limited range starting at position 12, which no longer contains specified string.
Again, just like with the previous method includes(), also indexOf() is case-sensitive. And apart from that, I would like to also point out the fact that method returns position only for the first occurrence of the specified string.
let welcomeString = "Hi to my Fellow fellow mellow newbs dewbs! 🙂";welcomeString.indexOf("Fellow") // 9
welcomeString.indexOf("fellow") // 16welcomeString.indexOf("Mellow") // -1
welcomeString.indexOf("mellow") // 23 welcomeString.indexOf("Dewbs") // -1
welcomeString.indexOf("newbs") // 30
First set shows nicely how the case-sensitivity results in the different results. The string with capital letter F starts at position 9, but the string with lowercase letter F starts only at position 16.
The rest of the cases shows that if the specified string does not match exactly including case-sensitivity, then the result is -1.
Okay, as before this is all nice, but in real life, we will also deal with the characters consisting of two code units. So how does that work? Well, you would be probably shocked, but mostly just like the previous method. Since they both do almost the same…let’s have a peek at the code of the last example of the day and see for ourselves.
let smileyFace = "🙂";// smileyFace:
// 0 -> "\ud83d"
// 1 -> "\ude42"smileyFace.indexOf("🙂") // 0
smileyFace.indexOf("\ud83d\ude42") // 0smileyFace.indexOf("🙂", 1) // -1
smileyFace.indexOf("\ude42", 1) // 1// 4 smiley faces:
// 0 -> "\ud83d"
// 1 -> "\ude42"
// 2 -> "\ud83d"
// 3 -> "\ude42"
// 4 -> "\ud83d"
// 5 -> "\ude42"
// 6 -> "\ud83d"
// 7 -> "\ude42""🙂🙂🙂🙂".indexOf('\ude42\ud83d', 1) // 1
"🙂🙂🙂🙂".indexOf('\ude42\ud83d', 2) // 3
First set is quite simple. We search for the position of the smiley face, which is in both cases at the index 0. Only difference is in a way how we specify the string to find the position for.
First case in the second set is equal to -1, because we limited the search range to only the second code unit of emoji and that does not include the whole emoji symbol. However, the second half contains exactly the value we are searching for in the second case, so the result is its position. And that is position 1.
The last set shows a bit more complex example with four emojis. I chose to use 4 emojis to point out that we will always get the start index of the first occurence. Even if there are multiple matches within the searched string.
Soooo, in the first case we are searching for the position of a string that consists of the second half of the emoji symbol followed by the first half of the emoji symbol. Fortunately for us exactly that sequence of code units spans from position 1 to position 2, so the result is the start position — ergo the value 1.
The second case also contains a match for this sequence of code units. Without the limitation of the second optional parameter the result value would be 1. But because we are limiting the range for search starting with position 2, the next occurrence of specified code unit sequence is at position 3. That is also what we get as the result. If we were to modify this sequence, the next value would be 5, because that is the starting position of the second occurrence of the specified string.
So, this is all that you need to know about the indexOf() method. You are now ready to use it on your own…
As always thank you very much for your time and I will see you soon with the next method.