ECMAScript 2015 String Literal Operators

ECMAScript Operators – Part 6

ECMAScript 6

Foreword: In this part of the series I talk about string ECNAScript literal operators.

By: Chrysanthus Date Published: 13 May 2016

Introduction

This is part 6 of my series, ECMAScript Operators. A string literal is text in quotes. In this part of the series I talk about string ECNAScript literal operators. If you are new to programming, then you should have read the previous part of the series before reaching here.

The Concatenation Operator
This operator is the plus sign (+). It concatenates (joins) two strings together to form a new string. Each of the strings concatenated can be a string literal or a string identifier. Read and try the following code:

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>

<script type="text/ECMAScript">

    str1 = "I am the first";
    str2 = " And I am the second";

    strng1 = "I am the first" + " And I am the second";
    document.write(strng1); document.write('<br>');

    strng2 = str1 + " And I am the second";
    document.write(strng2); document.write('<br>');

    strng3 = "I am the first" + str2;
    document.write(strng3); document.write('<br>');

    strng4 = str1 + str2;
    document.write(strng4);

</script>

</body>
</html>

The extra HTML code is to produce a web page. The output is:

I am the first And I am the second
I am the first And I am the second
I am the first And I am the second
I am the first And I am the second

The Concatenating Assignment Operator
The concatenating assignment operator is ‘+=’ without the quotes. It appends a new string to an old string. The right operand string can be a string literal or a string identifier. Read and try the following code:

    <script type="text/ECMAScript">

        oldStr = "Old and wise.";
        newStr = " New and active.";
        veryNewStr = " Young and aspiring.";

        oldStr += newStr;
        oldStr += " Young and aspiring.";

        document.write(oldStr);

    </script>

The output is:

    Old and wise. New and active. Young and aspiring.

Difference Between the Concatenation and the Concatenating Assignment Operator
The concatenation operator joins two strings, and it does not matter which comes first and which comes last, and returns a new joined string. The concatenating assignment operator adds (appends) one string to the end of an already existing string, and returns the result.

Relational Operators and String Literal
The ECMAScript specification does not tell you how to use string literals with relational operators (<, >, <=, <=). However, most browsers implement the use of relational operators with string literals as I explain below:

The > Operator
This is also the Greater Than Operator for strings (not only for numbers). It compares two strings alphabetically, the way they are placed in the dictionary. A string that would be typed last in the dictionary, is the greater string. That is, “bbb” is greater than “aaa”. Read and try the following program that illustrates this:

    <script type="text/ECMAScript">
        $ident1 = "aaaa ccccccc";
        $ident2 = "d";
            if ($ident2 > $ident1)
                {
                    document.write('The value of $ident2 is greater than the value of $ident1.');
                }
    </script>

The if-block is executed, because "d" is greater than "aaaa ccccccc".

In the ECMAScript alphabetic series, uppercase letters come before lowercase letters. So a lowercase letter is greater than an uppercase letter. That is, the series, is A, B, C, …Z, a, b, c …z. Read and try the following code that illustrates this:

    <script type="text/ECMAScript">
        $ident1 = "QQQQ";
        $ident2 = "eeee";
        if ($ident2 > $ident1)
            {
                document.write('The value of $ident2 is greater than the value of $ident1.');
        }

    </script>

The if-block is executed.

When numbers are considered as characters (in a string), they fit alphabetically in front of ‘A’. Here, the ECMAScript numeric-alpha series is, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, …a, b, c,…. So “BB” is greater than “33”. Read and try the following program that illustrates this:

    <script type="text/ECMAScript">

        $ident1 = "22aa";
        $ident2 = "aa22";
        if ($ident2 > $ident1)
            {
                document.write('The value of $ident2 is greater than the value of $ident1.');
            }

    </script>

The if-block is executed.

The < Operator
This is the Less Than operator. It behaves in the opposite way to >
.

The >= Operator
This is the Greater Than or Equal To operator. It returns true if the left operand is the same in content (characters and order) as the right operand; and it also returns true if the left operand is greater than the right operand. Read and try the following program, where the two operands are the same:

    <script type="text/ECMAScript">

        $ident1 = "e e e";
        $ident2 = "e e e";
        if ($ident2 >= $ident1)
            {
                document.write('The value of $ident2 is greater than the value of $ident1.');
            }

    </script>

The <= String Operator
This is the Less Than or Equal To operator. It does the opposite of, >=.

That is it for string operators. Let us take a break here. Rendezvous in the next part of the series.

Chrys

Broad Network

Related Articles

ECMAScript 2015 String Literal Operators

ECMAScript Operators – Part 6

ECMAScript 6

Introduction

Related Links

Comments