Strings are pieces of text or “strings” of characters that are wrapped in quotes like so:
“Holidays” or ‘Holiday’. You can use single quotes or double quotes, it performs the same job. In the console, you can check typeof
“Holidays” and it will return “String”, similarly, if you type typeof
“30” - it will also return “String”. Yes, it’s a number but when inside quotes JavaScript treats it as a string.
Every character of a string has a corresponding index, starting at the 0 index, similar to an array object and we can access any character by its index. For example, if we have a string:
const holiday = “Christmas”
To access any character from it, we can simply type:
holiday[5]
> “t”
holiday[0]
> “C”
holiday[12]
> undefined // because there is no corresponding character at that index position.
To check the length of a string, you can use the .length
method:
holiday.length
> 9
One thing you need to be careful with here is that .length
will also count any spaces or symbols as well inside the string. Let's take a look at another example:
const fullName = “Uma Manandhar!”
fullName.length
>14
One might think it would return 12 but it actually returns 14 because it counts the spaces between first and last name and then the exclamation symbol as well. We can also concatenation two strings to one full string like so:
const firstName = “Aiden”
const lastName = “Manandhar”
const fullName = firstName + “ “ + lastName
> "Aiden Manandhar"
In the above snippet we declared firstName and lastName variables, then we use the concatenate method( +
symbol ) to set the fullName variable. Notice the empty string between firstName and lastName, this is there to add a space between them, without adding an empty string it would return "AidenManadhar"
, which is probably not the format we would want to have in our application.
There are plenty of built-in methods for the String type which you can find in this document but here we will discuss some popular ones:
toUpperCase()
const currentHoliday = “Christmas”
currentHoliday.toUpperCase() // converts string to UPPERCASE
> “CHRISTMAS”
toLowerCase()
const nextHoliday = “NEW YEAR”
nextHoliday.toLowerCase() // converts string to lowercase.
> “new year”
trim()
const language = “ JavaScript ”
language.trim() // removes empty space from beginning and end only.
> “JavaScript”
indexOf(arg)
const greeting = “HelloWorld”
greeting.indexOf(“Hello”) // find the index of the starting character.
> 0
greeting.indexOf(“World”)
> 5
greeting.indexOf(“world”) // case sensitive. Returns -1 when nothing is found.
> -1
slice()
const game = “baseball”
game.slice(4) // slices of existing string and give a piece of string
>”ball”
game.slice(12) //means not found
>””
game.slice(0, 4) //starts at index 0 and end at index 3
>”base”
game.slice(4, 8) //starts at index 4 and end at index 7
>”ball”
replace()
const phrase = “you are very very smart”
phrase.replace(“smart”, “intelligent”) // it specify what you want to replace and what you want to replace with
>"you are very intelligent"
phrase.replace(“very”, “a”)
>”you are a very smart” // if there is the same word more than once, it changes only the first one
phrase.replace(“so”, “so so”)
>"you are very very smart" //stays unchanged
String is immutable so if you want to have all those updated returned values you need to set it in a variable like below:
const phrase = “you are very very smart”
const updatedPhrase = phrase.replace(“smart”, “intelligent”)
updatedPhrase
>"you are very intelligent"
phrase
>”you are very very smart”
Also, we can chain methods like so:
” you are a rockstar like your mom ”.replace(“mom”, “dad”).toUpperCase().trim()
>"YOU ARE A ROCK STAR LIKE YOUR DAD"
As you can see it replaced “mom” with “dad” and converted it to the upper case then trim empty spaces from the beginning and end of a string. I tried to cover the most important parts of JavaScript strings. I hope this helps.
Thank you for reading.
Top comments (9)
It would be nice if you use
It automatically get highlighted 😀
Hi Harshil, I am little confuse on what are you trying to point out? Where to use those back-ticks ?
Your code snippets is
Now if you use language name after first three back-ticks
now I think you will get it 😁
github.com/adam-p/markdown-here/wi...
:) Thanks. I thought people won't care about it but I am glad you pointed it out because it looks much better with highlighted version.
Even I didn't know about that I also get same comment on my first post last week 🙌
cool. Lets help each other and get better. :)
Sure 🙏
Thanks for the tip Parmar.Will use ìn my post.Nice post Uma
Thanks Kirk!