JavaScript Strings

String data type in JavaScript is used to store a sequence of text values. We generally use the JavaScript string to represent textual data. A string value can have zero or more than zero characters, and to wrap up the string characters we can use single quotes, double quotes or backticks. JavaScript Strings

Example 

<script>
    var name1 = "Rohan Singh";
    var name2 = 'Reet Gunia'; 
    var name3 = `Jay jio`
    var name4 =""
</script>
In the above example, all name1 , name2 , name3 and name4 are strings. Although the name4 variable is an empty string, still, it is a string data type.

Everything between the single or double quote surrounding the value will be treated as a single character except the matching quote and escape characters(discuss further in this tutorial). We can have the quotes as a character, but they should not match the quote surrounding the string value. Example 

<script>
    var statement1 = "Let's go for a walk";  //valid
    var statement2 = 'He said "Give me the pan"'; // valid
    var statement3 = "He said "Give me the pan""; // error
</script>

Behind the code In the above code statement1 and statement2 variables are valid because they have different quotes for surrounding and different quotes for characters. But in statement3 the surrounding quotes and character quotes match that result in error. So how can we use single and double quotes in the same string? There are two ways to use single and double quotes in the same string, we can either use the escape character or backtick string. Here is the example of a backtick string using both single and double quotes inside the string.

Example 

<script>
    var statement = `He said "Let's go"`;
</script>

There is no difference between single-quoted and double-quoted strings, but a backtick quoted-string provides more features as compared to a single and double-quoted string. We will discuss the backtick string in detail in upcoming tutorials.

String Length

In JavaScript, everything is an object, including every data type. The object we learned in the previous few tutorials is the building block of every concept of JavaScript. In the previous tutorials, we learned how to create user-defined objects in JavaScript but there are many built-in objects in JavaScript embedded in the core JavaScript and string is one of those. And like the properties of an object, the string contains a built-in property called length that returns the total number of characters present in the string.

Example 

<script>
    var statement = "123456abcdef"
    var len = statement.length;
    document.write("The Length of the statement is: "+len); 
</script>

Output 

The Length of the statement is: 12

String Escape characters

The (\) backslash character is known as the string escape character, and it is one of the most important features of the JavaScript string. And almost every programming language supports the concept of a string escape character. Whenever the JS engine reads the \ symbol inside the string it does not treat the \ symbol as a normal character it treats it as a special escape character. In the above examples where we used the string surrounding quote inside the string, it threw an error, so in order to use both single and double quotes inside the string, we used backticks string. But that problem can also be solved using escape characters and for most of the cases, you will be seeing that all the developers prefer to use escape characters rather than backticks string. error statement 

var statement = "He said "Let's Go""; //error

Solve using the escape character 

var statement = "He said \"Let's Go\"";
In the above code, the backslash \ will turn the " character into a normal character.
The JS engine does not treat the \ inside the string as a normal character you can check it by mentioning a \ in a string.
The escape character tells the JS engine not to treat the next character as a special character. 
<script>
    var statement = "This is \ a backslash ";
    document.write(statement)
</script>

Output 

This is a backslash

From the output, you can see that the JS engine does not read the \ symbol inside the string. If you want to write the \ symbol in the string you have to escape it by using another \ character, that will tell the engine to treat the \ symbol as a normal character. Example 

<script>
    var statement = "This is \\ a backslash ";
    document.write(statement)
</script>
Output 
This is \ a backslash

Escape Sequence

An Escape sequence is a sequence of characters used inside a string, that has a special meaning. The JavaScript interpreter does not read the Escape sequence as a normal character, it treats an Escape sequence as a set of instructions. In JavaScript, an Escape Sequence is used in a string and it is made of two characters out of which the first character is the Escape Character itself (\) and the second character could be an alphabet. There are 6 major Escape sequence in JavaScript

Escape Sequence Description
\b Backspace
\f Form Feed
\n New Line
\r Carriage Return
\t tab (spaces)
\v Vertical Tabulator

Examples 

<script>
    var statement = "First Line \nSecond Line \nThird line";
    console.log(statement)
</script>
Output 
First Line 
Second Line 
Third line

String Character Access

The string stores all the characters in sequential order, so we can treat the string as an array-like object and grab the individual characters using its numerical index value. The index value of every non-empty string starts with 0 up to n-1 where n is the total number of characters present in the string.

Example 

<script>
    var data = "This is a String";
    console.log(data[0]); //first charecter 
    console.log(data[1]); //second charecter
</script>

Output 

T
h

Comparing String

We can compare two string values. And the comparison test between two strings is based on their value and lexical order.

Example 

<script>
    var str1 ="Hello";
    var str2 = "Tech";
    console.log(str1 == str2) //false
    console.log(str1 > str2); //false
    console.log(str1 < str2);  //true 
</script>
Acoording to the lexical order 0-9 < a-z < A-Z.

Javascript String Object and String Primitive

By far we have been using quotes and backticks to represent JavaScript Primitive string data type. But JavaScript also provides a dedicated String object to declare a string variable or value. JavaScript primitive string data 

var name = "Rahul";   //primitive string

To define a String object we use the JavaScript new keyword 

var name = new String("Rahul");   //object string

When we use the quotes to declare a string it will create a primitive string, and if we use JavaScript String() object to create a string then it will create an object String. Although we can use either of the techniques to implement a string value in javascript, and both of them will give the same result for most of the cases but both are different by their type. The difference between both the strings can be seen through identify operator === and eval() statement. Example 

<script>
    var str1 ="3+3";  // primitive string 
    var str2 = new String("3+3");    //object string 
    console.log(typeof str1);   //string
    console.log(typeof str2);   //object
    console.log(str1 == str2); //true (check for value equal)
    console.log(str1 === str2); //false (check for value as well as type equality)
    console.log(eval(str1));  //6
    console.log(eval(str2));  //string 3+3 
</script>

Output 

string
object
true
 false
6
"3+3"

Summary

  • A string is a collection of characters.
  • String stores all the characters in sequential order.
  • \ treated as a special character in String, and it is known as an escape character.
  • An escape sequence is a sequence of characters that translated into a special meaning in the string.
  • JavaScript also provided a String() object that can also be used to create a string data value in JavaScript.

People are also reading:

Previous Tutorial Next Tutorial