Concatenating and Splitting Strings in ECMAScript 2015

The ECMAScript String Object – Part 3

ECMAScript 6

Foreword: In this part of the series I explain how to concatenate and split strings in ECMAScript.

By: Chrysanthus Date Published: 14 Jul 2016

Introduction

This is part 3 of my series, The ECMAScript String Object. In this part of the series I explain how to concatenate and split strings in ECMAScript. The methods involved are of the String Object prototype; however they are very easy to learn. You should have read the previous part of the series before reaching here, as this is a continuation.

Concatenating Strings
Concatenating means joining. You can concatenate strings in two ways: if all the strings are literals, then use the + operator to join the strings; if the strings consist of only string objects or string objects and literals, then use the Strong Object Prototype cancat() method. The syntax to use the + operator is:

    str = "text" + "text"+ - - -

Read and try the following code:

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

    <script type="text/ECMAScript">

        str = "We are the world." + " We are the children." + " We are the ones.";

        document.write(str);

    </script>

</body>
</html>

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

    We are the world. We are the children. We are the ones.

When concatenating strings, always remember that a space is a character and always make provision for the space where necessary.

You use the concat method when you are dealing with only string objects or a mixture of strings objects and literals. The syntax is:

    stringObject.concat ( [ string1 [ , string2 [ , … ] ] ] )

That is, onto the original object literal are added string1, string2, etc. string1, string2, - - -are each optional as indicated by the square brackets. string1, string2, etc. may each be a string object or a string literal; they are separated by commas, and they are added to the stringObject literal in the order in which they are typed. The returned value is a concatenated string literal and not a string object. The string literal for stringObject might be empty before concatenation. The original object is not modified. Read and try the following code:

    <script type="text/ECMAScript">

        strObj = new String();
        str1 = "We are the world.";
        str2 = new String(" We are the children.");
        str3 = " We are the ones.";

        str = strObj.concat(str1, str2, str3);

        document.write(str);

    </script>

The literal of the original string object here, is an empty string. However, concatenation has still taken place to return a string literal. The output is:

    We are the world. We are the children. We are the ones.

If the literal of the original string object were not empty, its value would have preceded in the concatenation string.

You can still use a literal in place of the main string object. Read and try the following code:

    <script type="text/ECMAScript">

        str1 = new String(" We are the children.");
        str2 = " We are the ones.";

        str = "We are the world.".concat(str1, str2);

        document.write(str);

    </script>

Splitting a String
If you have a string, which is a sentence, you might want to retrieve the individual words; in this situation, you would use the space as the separator, to separate the words. You can have a list of phrases. The phrases might be separated by a comma and a space, or a hyphen, or some other separator.

You split a string into substrings based on the separator. You use the split() function. The return value is an array, where each element is the different substring without the separator. The syntax is:

    ident = stringObject.split(separator, limit)

ident is the identifier of the array returned. limit is optional. Assume that the split results in 10 substrings, and you wanted the first seven, then the limit value will be 7. The limit is a number for the first number of substrings you want. With the limit, the rest of the substrings are not sent to the array.

If separator is absent, the whole string is sent to the array as one element to have a one-element array. The separator is a string literal. The separator is not part of any array element value. Read and try the following code, where the separator is a comma followed by a space:

    <script type="text/ECMAScript">

        strObj = new String("John, Mary, Peter, Augustine, Angela, Susan, Martin, Grace, Paul, Simon");

        arrNames = strObj.split(", ", 7);

        for (i=0; i<arrNames.length; ++i)
            {
                document.write(arrNames[i]); document.write('<br>');
            }

    </script>

The output is:

John
Mary
Peter
Augustine
Angela
Susan
Martin

You can use a string literal in place of the string object for the split() method. Read and try the following code:

    <script type="text/ECMAScript">

        str = "John, Mary, Peter, Augustine, Angela, Susan, Martin, Grace, Paul, Simon";

        arrNames = str.split(", ", 7);

        for (i=0; i<arrNames.length; ++i)
            {
                document.write(arrNames[i]); document.write('<br>');
            }

    </script>

The output is the same as before.

That is it for this part of the series. We stop here and continue in the next part:

Chrys

Broad Network

Related Articles

Concatenating and Splitting Strings in ECMAScript 2015

The ECMAScript String Object – Part 3

ECMAScript 6

Introduction

Related Links

Comments