Strings in JavaScript

In JavaScript, a String is a series of characters surrounded by a pair of quotation marks. Strings may be used as a message to be displayed on the output or as a value which is assigned to a variable.

Importance of Quotation marks surrounding the String

As soon as the JavaScript finds a quotation mark, it interprets the very next character as the beginning of the string. After reading the whole string, when JavaScript reaches the second quotation mark, it interprets the preceding character as the last character of the string. Therefore, the characters present in between the quotation marks are treated as one complete string. However, these quotation marks are never displayed on the output.

Indexing in JavaScript Strings

In a Strings, each item is given a number. This number represents the position of that particular item in the string. The position is termed as the Index of the string item.

Index of the first item is always zero and that of the second item is one and so on. This type of indexing is called Zero-based Indexing.

One String Item = 16 bits

As you know that a string consists of a sequence of characters. Thus, to be stored in the memory, these characters need to be converted into bits. This conversion is carried out on the basis of Unicode Standards.

In JavaScript, each string item is converted into a 16-bit value which represents one Unicode Character.

How to create a String in JavaScript?

There are three ways to create a string in JavaScript:

  • Using Double Quotes ("..."):
    <!DOCTYPE html>
    <html lang="en">
     <head> </head>
     <body>
      <script>
       var name = "Ronit Roy" //assigning string to a variable.
       document.write(name); 
      </script>
     </body>
    </html>​
    Output:
    Ronit Roy​
  • Using Single Quotes ('...'):
    <!DOCTYPE html>
    <html lang="en">
     <head> </head>
     <body>
      <script>
       document.write('I am a Student.'); //displaying a string as a message. 
      </script>
     </body>
    </html>​
    Output:
    I am a Student.​
  • Using Backticks (`...`): Backtick is a special way to create strings in JavaScript. Along with creating a string, it can simultaneously evaluate an expression and show the result. Provided that the expression must be written in the following manner:
    ${expression}

    Whereas this is not possible with single or double quotes.

    Example:
    <!DOCTYPE html>
    <html lang="en">
     <head> </head>
     <body>
      <script>
       document.write(`sum of 1 and 2 is ${1+2}.`); //using backticks
       document.write('sum of 1 and 2 is ${1+2}.'); //using single quotes 
      </script>
     </body>
    </html>​
    Output:
    sum of 1 and 2 is 3.
    sum of 1 and 2 is ${1+2}.​
    The output clearly shows the difference between backticks (`...`) and single quotes('...').

Length of String in JavaScript

The number of characters present in the string is known as its length. JavaScript strings have a built-in property called length which returns a number indicating the number of characters in the string.

Syntax:
string_name.length

Example:

<!DOCTYPE html>
<html lang="en">
 <head> </head>
 <body>
  <script>
   var city = "Hyderabad";
   document.write("city = ", city, "<br>");
   var len = city.length; //storing the length in variable len. 
   document.write("Length of string 'city' = ", len ); 
  </script>
 </body>
</html>

Output:

city = Hyderabad
Length of string 'city' = 9

How to access the characters of a string in JavaScript?

Since the string is an indexed datatype in JavaScript, the characters can be accessed using the index itself.

Syntax:
String_name[index]

Example:

<!DOCTYPE html>
<html lang="en">
 <head> </head>
 <body>
  <script>
   var hobby = "I like playing Guitar!";
   document.write( hobby , "<br>");
   document.write("Accessing random characters of the string 'hobby'.<br>");
   document.write("1st character = ", hobby[0],"<br>");
   document.write("6th character = ", hobby[5],"<br>");
   document.write("Last character = ", hobby[hobby.length - 1],"<br>");
  </script>
 </body>
</html>

Output:

I like playing Guitar!
Accessing random characters of the string 'hobby'.
1st character = I
6th character = e
Last character = !

In the above program, the first, sixth and last character of the string are accessed using the index as [0], [5] and [hobby.length -1] respectively. As you already know that the indexing starts at 0, therefore the index of the last character is always one less than the length of the string.

charAt() Method in JavaScript

There is one more way to access the string characters. A built-in method charAt() is available in JavaScript which takes the index as the parameter and returns the character present at that index.

Syntax:
string_name.charAt(index)

Let us use this method in the previous example to access the characters of the string.

Example:

<!DOCTYPE html>
<html lang="en">
 <head> </head>
 <body>
  <script>
   var hobby = "I like playing Guitar!";
   document.write( hobby , "<br>");
   document.write("Accessing random characters of the string 'hobby'.<br>");
   document.write("4th character = ", hobby.charAt(3),"<br>");
   document.write("10th character = ", hobby.charAt(9),"<br>");
  </script>
 </body>
</html>

Output:

I like playing Guitar!
Accessing random characters of the string 'hobby'.
4th character = i
10th character = a