DEV Community

loading...

JavaScript “Strings”

uma profile image Uma Updated on ・3 min read

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.
Enter fullscreen mode Exit fullscreen mode

To check the length of a string, you can use the .length method:

holiday.length
> 9
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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"
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

toLowerCase()

const nextHoliday = NEW YEAR
nextHoliday.toLowerCase()   // converts string to lowercase.
> new year
Enter fullscreen mode Exit fullscreen mode

trim()

const language =    JavaScript      
language.trim()   // removes empty space from beginning and end only.
> JavaScript
Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

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"
Enter fullscreen mode Exit fullscreen mode

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.

Discussion (9)

pic
Editor guide
Collapse
harshilparmar profile image
Harshil Parmar • Edited

It would be nice if you use

``` javascript code```
Enter fullscreen mode Exit fullscreen mode

It automatically get highlighted 😀

Collapse
uma profile image
Uma Author

Hi Harshil, I am little confuse on what are you trying to point out? Where to use those back-ticks ?

Collapse
harshilparmar profile image
Harshil Parmar

Your code snippets is

holiday.length
> 9
Enter fullscreen mode Exit fullscreen mode

Now if you use language name after first three back-ticks

holiday.length
> 9
Enter fullscreen mode Exit fullscreen mode

now I think you will get it 😁

github.com/adam-p/markdown-here/wi...

Thread Thread
uma profile image
Uma Author • Edited

:) 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.

Thread Thread
harshilparmar profile image
Harshil Parmar

Even I didn't know about that I also get same comment on my first post last week 🙌

Thread Thread
uma profile image
Uma Author

cool. Lets help each other and get better. :)

Thread Thread
harshilparmar profile image
Collapse
vtechjm profile image
Kirk-Patrick Brown • Edited

Thanks for the tip Parmar.Will use ìn my post.Nice post Uma

Collapse
uma profile image
Uma Author

Thanks Kirk!