Broad Network


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

Related Links

ECMAScript Basics
ECMAScript Operators
Expressions in ECMAScript
Statements in ECMAScript
Custom Objects in ECMAScript
Functions in ECMAScript
ECMAScript Date Object
The ECMAScript String Object
ECMAScript String Regular Expressions
ECMAScript Template Literal
The ECMAScript Array
ECMAScript Sets and Maps
ECMAScript Number
Scopes in ECMAScript
Mastering the ECMAScript (JavaScript) eval Function
Sending Email with ECMAScript
ECMAScript Insecurities and Prevention
Advanced Course
Advanced ECMAScript Regular Expressions
Promise in ECMAScript 2015
Generator in ECMAScript 2015
ECMAScript Module
More Related Links
Node Mailsend
EMySQL API
Node.js Web Development Course
Major in Website Design
Low Level Programming - Writing ECMAScript Module
ECMAScript Course

BACK NEXT

Comments

Become the Writer's Follower
Send the Writer a Message