Strings represent a sequence of multiple characters and it is crucial to know how to manipulate and play with strings in any programming language. One of the ways to manipulate strings is by using startsWith in JavaScript.<\/p>\n\n\n\n
Before moving forward, let’s revise our understanding of Strings. Strings in JavaScript represent a sequence of multiple characters. We can declare a string in JavaScript by making a string literal using double quotes. The syntax for the same is given below:<\/p>\n\n\n\n
\/\/declaring a string literal\nlet a = "FavTutor"\n\n\/\/printing the string\nconsole.log(a);<\/pre><\/div>\n\n\n\nOutput:<\/strong><\/p>\n\n\n\n
FavTutor<\/code><\/pre>\n\n\n\nSo, where does startsWith() fit in?<\/p>\n\n\n\n
The startsWith() is a built-in JavaScript method to determine or check whether a string starts with a specified set of characters. The method returns a bool value indicating the presence of the characters at the beginning of the string.<\/strong><\/p>\n\n\n\n
The syntax of the method is given below:<\/p>\n\n\n\n
stringName.startsWith(stringCheck, position);<\/code><\/pre>\n\n\n\nwhere,<\/p>\n\n\n\n
\n
- stringName: <\/strong>The original string on which we have to perform the check<\/li>\n\n\n\n
- stringCheck<\/strong>: The substring to be checked for at the beginning of the original string.<\/li>\n\n\n\n
- position(optional parameter): <\/strong>The position within the original string at which to begin the search. By default, position would be index 0, i.e. beginning of the string.<\/li>\n<\/ul>\n\n\n\n
It returns a boolean value: true if the string starts with the specified characters, and false otherwise. The method first compares the characters of the given string with the given sequence of characters. If the characters match from the beginning of the string, the function returns true. However, if doesn’t match it returns false. <\/p>\n\n\n\n
Let us see the use of startsWith with an example:<\/p>\n\n\n\n
\/\/declaring the original string\nlet ogString="FavTutor";\n\n\/\/declaring the check string\nlet subString="Fav";\n\n\/\/checking if substring is part of the original string\nlet checkBool=ogString.startsWith(subString);\n\n\/\/printing the return value\nconsole.log(checkBool);<\/pre><\/div>\n\n\n\nOutput:<\/strong><\/p>\n\n\n\n
True<\/code><\/pre>\n\n\n\nIn this example, we have taken 2 strings, one original string(ogString), and a check string(subString). We check the presence of the subString in the ogString. We have used no position parameter in the function, so by default, we check the presence of the subString at the starting index, i.e. 0 of the ogString.\u00a0<\/p>\n\n\n\n
Positional Parameter<\/strong><\/h3>\n\n\n\n
Let us see another example, of using the positional parameter with the startsWith function. <\/p>\n\n\n\n
\/\/declaring the original string\nlet ogString="FavTutor";\n\n\/\/declaring the check string\nlet subString="Fav";\n\n\/\/checking if substring is part of the original string\nlet checkBool=ogString.startsWith(subString,2);\n\n\/\/printing the return value\nconsole.log(checkBool);<\/pre><\/div>\n\n\n\nOutput:<\/strong><\/p>\n\n\n\n
false<\/code><\/pre>\n\n\n\nIn this example, we have provided the position parameter as 2. This means that we will verify the presence of the characters of the subString starting from the second index of the original string(ogString) that is from the letter \u2018v\u2019. Hence we have got the result as false. This is the desired result.<\/p>\n\n\n\n
Let us see a similar example:<\/p>\n\n\n\n
\/\/declaring the original string\nlet ogString="FavTutor";\n\n\/\/declaring the check string\nlet subString="Tutor";\n\n\/\/checking if substring is part of original string\nlet checkBool=ogString.startsWith(subString,3);\n\n\/\/printing the return value\nconsole.log(checkBool);<\/pre><\/div>\n\n\n\nOutput:<\/strong><\/p>\n\n\n\n
true<\/code><\/pre>\n\n\n\nNow, in this example, we are using the positional parameter as 3. We are checking the subString \u201cTutor\u201d to be present in the string \u201cFavTutor ” at the 3rd index. As the indices start from 0 the string \u201cTutor\u201d occurs at the 3rd index in the ogString. Hence, we have got the desired result.<\/p>\n\n\n\n
Case Sensitivity<\/strong><\/h3>\n\n\n\n
It is also important to note the case sensitivity of the startsWith function that the uppercase and lowercase letters are treated differently. Let us see an example of the same:<\/p>\n\n\n\n
\/\/declaring the original string\nlet ogString="FavTutor";\n\n\/\/declaring the check string\nlet subString="fav";\n\n\/\/checking if substring is part of original string\nlet checkBool=ogString.startsWith(subString);\n\n\/\/printing the return value\nconsole.log(checkBool);<\/pre><\/div>\n\n\n\nOutput:<\/strong><\/p>\n\n\n\n
false<\/code><\/pre>\n\n\n\nWe are checking the presence of \u201cfav\u201d in the string \u201cFavTutor\u201d. Although the starting three characters are the same in the string \u201cFavTutor\u201d, the letter \u2018f\u2019 is present in uppercase and hence doesn\u2019t match with the letter \u2018f\u2019 present in lowercase in the string \u201cfav\u201d. Hence the function returns false. We have got the desired result.<\/p>\n\n\n\n
Conclusion<\/strong><\/h2>\n\n\n\n