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