Programming for beginners: String literal Vs objects

As I said string can be created in literal form (or) in object notation.

How to create string in literal form?

Enclose the string in double (or) single quotes.

Ex:

var str1 = "Hello";

var str2 = 'hello';

How to create string in Object notation?

By using new operator, you can create string in object notation.

Ex:

var str1 = new String("Hello");

JavaScript automatically converts literals to String objects, so that it's possible to use String object methods for primitive strings.

Difference between String literal and Strings in object notation

a. 'typeof' return "String" for string literals, where as 'typeof' return object for string in object notation.

var a = "Hello"; //typeof a return string

var b = new String("Hello"); //typeof b return object

b. eval() process string literal and objects differently. eval() treats string literals as source code, and string objects like other objects by returning the object.

var c = "2 + 2"; //eval(c) return 4

var d = new String("2 + 2"); //eval(d) return "2 + 2"

string.html

<!DOCTYPE html>

<html>

<head>
    <title>String literal Vs object</title>
</head>

<body>
    <script type="text/javascript">
        var a = "Hello"; //typeof a return string
        var b = new String("Hello"); //typeof b return object

        var c = "2 + 2"; //eval(c) return 4
        var d = new String("2 + 2"); //eval(d) return "2 + 2" 

        document.write("a = " + a + ", type = " + typeof(a) + "<br />");
        document.write("b = " + b + ", type = " + typeof(b) + "<br />");

        document.write("eval(c) : " + eval(c) + "<br />");
        document.write("eval(d) : " + eval(d));
    </script>
</body>

</html>

How can a string literal have properties and methods of String object?

You may doubt that, only objects has properties and methods associated with them, but how can a string literal also has properties and methods.

When you try to refer a property (or) method using string literal, JavaScript creates a temporary object by calling new String(literal) function. Once the property (or) method resolved, it discards the temporary object.

Let me give an example,

var str = "Hello";

str.noOfChars = 5;

var len = str.noOfChars;

When you evaluate above statements, the value of len is undefined. It is because, the second line of code creates a temporary string object and sets the noOfChars property to the value 5 and then discard the object. Third statement again creates a new String object and tries to read the property noOfCahrs, which is undefined.

literal.html

<!DOCTYPE html>

<html>

<head>
    <title>String literals</title>
</head>

<body>
    <script>
        var str = "Hello";
        str.noOfChars = 5;
        var len = str.noOfChars;

        document.write("str = " + str + "<br />");
        document.write("str.noOfChars = " + str.noOfChars + "<br />");
        document.write("len = " + len + "<br />");

        var str1 = new String("Hello");
        str1.noOfChars = 5;
        var len1 = str1.noOfChars;

        document.write("<br /><br />str1 = " + str1 + "<br />");
        document.write("str1.noOfChars = " + str1.noOfChars + "<br />");
        document.write("len1 = " + len1 + "<br />");
    </script>
</body>

</html>

Open above page in browser, you can able to see following kind of output.

str = Hello

str.noOfChars = undefined

len = undefined

str1 = Hello

str1.noOfChars = 5

len1 = 5

‘==’ operator treats both literals and objects same, where as ‘===’ operator don’t treat them same.

var str1 = "Hello";

var str2 = new String("Hello");

str1 == str2; // return true

str1 === str2; // return false

literal.html

<!DOCTYPE html>

<html>

<head>
    <title>String literals</title>
</head>

<body>
    <script>
        var str1 = "Hello";
        var str2 = new String("Hello");

        document.write("str1 = " + str1 + "<br />");
        document.write("str2 = " + str1 + "<br />");
        document.write("str1 == str2 : " + (str1 == str2) + "<br />");
        document.write("str1 === str2 : " + (str1 === str2) + "<br />");
    </script>
</body>

</html>

Open above page in browser, you can able to see following text.

str1 = Hello

str2 = Hello

str1 == str2 : true

str1 === str2 : false

Note

Same is true for number and boolean literals.

Previous Next Home

Programming for beginners

Tuesday 28 August 2018

String literal Vs objects

No comments:

Post a Comment