JavaScript and JQuery Essentials Trainin... (56 Blogs) Become a Certified Professional
AWS Global Infrastructure

Front End Web Development

Topics Covered
  • AngularJS (28 Blogs)
  • jQuery UI Development (2 Blogs)
  • The Complete WebDeveloper (38 Blogs)
  • ReactJS (7 Blogs)
SEE MORE

MI-new-launch

myMock Interview Service for Real Tech Jobs

myMock-widget-banner-bg

String Concatenation In JavaScript: All you need to know about String concat()

Published on Jul 12,2019 688 Views
26 / 29 Blog from JavaScript

MI-new-launch

myMock Interview Service for Real Tech Jobs

myMock-mobile-banner-bg

myMock Interview Service for Real Tech Jobs

  • Mock interview in latest tech domains i.e JAVA, AI, DEVOPS,etc
  • Get interviewed by leading tech experts
  • Real time assessment report and video recording

The growth of web development and applications have seen a rise in the demand for JavaScript. It is one of the most important languages for designing the web. This article on String concatenation in JavaScript will explain how strings are manipulated in the following sequence:

Fundamentals of String Concatenation in JavaScript

Concatenation is the operation that forms the basis of joining two strings. Merging strings is an inevitable aspect of programming. Before getting into “String Concatenation in JavaScript”, we need to clear out the basics first. When an interpreter executes the operation, a new string is created. Every programming language has different syntax for concatenation operation.

edu.reka : Perl, PHP
edu & reka: Visual Basic, Visual Basic.NET and Ada
strcat(edu,reka): C, C++
edu+reka: Java
edu || reka: FORTRAN

 

Also, concatenation is applicable for other data types like binary, floating, character, integer, etc. But for this to happen, the data types are first converted into strings. Also, when we deal with objects, the string concatenation is only possible if either or both the objects belong to the same class.

 

Analogy with Microsoft Excel

Let’s understand concatenation on our most basic platform: Microsoft Excel. The CONCATENATE/CONCAT function joins two or more strings together. It is used as a Worksheet Function and can be entered as part of a formula in a cell.

Syntax:


CONCATENATE(edu1, [edu2,….edu_n])

Return Value:

A string/Text

 

string concatenation in excel

 

Sometimes users might want to add spaces in the result. In such cases, the syntax differs slightly.

 

 

Concatenate with Spaces

 

Analogy with C Programming

As we are all familiar with the most basic language viz. C programming, let’s understand concatenation with a simple program in C.


#include <stdio.h>
int main()
{
char edu1[100], edu2[100], i, j;
printf("Enter first string: ");
scanf("%s", edu1);
printf("Enter second string: ");
scanf("%s", edu2);
// calculate the length of string edu1
// and store it in i
for(i = 0; edu1[i] != ''; ++i);
for(j = 0; edu2[j] != ''; ++j, ++i)
{
edu1[i] = edu2[j];
}
edu1[i] = '';
printf("After concatenation: %s", edu1);
return 0;
}

 

Output:

Enter first string: edu
Enter second string: reka
After concatenation: edureka

How Strings are Manipulated in JavaScript?

 

Let us first understand the string objects in JavaScript. We can define strings as data types which are used in programming for the purpose of storing a sequence of characters. Integers and floating point units can also be encoded as strings, but mostly in the form of text, rather than numbers. Before going further with string manipulation, we need to understand the properties of string objects.

  1. Constructor: Returns a reference which is created by JavaScript instance’s prototype.

Syntax:


array.constructor

Code:


<html>
<head>
<title>JavaScript Array constructor | Edureka</title>
</head>
<body>
<script type = "text/javascript">
var edu = new Array( 10, 20, 30 );
document.write("edu.constructor is:" + edu.constructor);
</script>
</body>
</html>

 

Output:

edu.constructor is:function Array() { [native code] }

 

  1. Length: It tells us about the no. of elements in an array

Syntax:


array.length

 

Code:


<html>
<head>
<title>JavaScript Array length | Edureka</title>
</head>
<body>
<script type = "text/javascript">
var edu = new Array( 10, 20, 30 );
document.write("edu.length is : " + edu.length);
</script>
</body>
</html>

 

Output:

edu.length is : 3

 

  1. Prototype: The prototype property allows us to add methods and properties to any object (Number, Boolean, String, and Date, etc). It is a global property

Syntax:


object.prototype.name = value

Code:


<html>
<head>
<title>Edureka Objects</title>
<script type = "text/javascript">
function Online(course, platform) {
this.course = course;
this.platform&nbsp; = platform;
}
</script>
</head>
<body>
<script type = "text/javascript">
var myOnline = new Online("R programming", "Edureka");
Online.prototype.price = null;
myOnline.price = 2400;
document.write("Online course is : " + myOnline.course + "<br>");
document.write("Online platform is : " + myOnline.platform + "<br>");
document.write("Online price is : " + myOnline.price + "<br>");
</script>
</body>
</html>

 

Output:

Online course is: R programming
Online platform is : Edureka
Online price is : 2400

 

String Manipulation Methods

 

S.noMethod
1indexOf()

Returns the index value of any string object’s first occurrence.

2slice()

This method is used for extracting a particular section from a given string

3split()

For separating a string into two separate strings, this method is used

4concat()

This method is used for merging two different strings and return a merged string

5valueOf()

For returning a primary value of a string, this method is used

 

From the table, we are only going to focus on concat() method. As we are aware that the concatenation method takes multiple strings, merges them and returns a new single string. The syntax, argument, and example is given below:

  • Syntax:

String.concat(edu1, edu2[, …, eduN]);

  • Arguments in the method:

edu1, edu2, … eduN are the strings which are passed for concatenation.

  • Code:

<html>
<head>
<title>String Concatenation | Edureka</title>
</head>
<body>
<script type = "text/javascript">
var edu1 = new String( "If it's about learning, " );
var edu2 = new String( "Edureka is the right platform" );
var edu3 = edu1.concat( edu2 );
document.write("Result: " + edu3);
</script>
</body>
</html>

 

Output:

If it's about learning, Edureka is the right platform

 

Also, as a programmer, sometimes there is a need to join multiple strings together viz. more than two. Let’s have a look over a simple piece of code which emphasizes the use of string concatenation in JavaScript:

 


<!DOCTYPE html>
<html>
<body>
<p>Let's join three strings</p>
<button onclick="myFunction()">Edureka Button</button>
<p id="edu"></p>
<script>
function myFunction() {
var edu1 = "Hello ";
var edu2 = "Edureka, " ;
var edu3 = "Let's code today !";
var con = edu1.concat(edu2, edu3);
document.getElementById("edu").innerHTML = con;
}
</script>
</body>
</html>

 

Output:

 

Join multiple strings

 

So, we’ve discussed everything related to string concatenation in JavaScript, now we are in a position to write codes and see if we can actually implement the concatenation method. So here is what you can do before writing the piece:

  1. Visualize the flow of your program
  2. Decide for the variable declarations
  3. Jot down few strings
  4. Follow the examples written here
  5. You’re good to test it on your local server.

With this, we have come to the end of our String Concatenation in JavaScript blog. I hope you understood the different ways to concatenate or join strings.

Now that you know about JavaScript, check out the Web Development Certification Training by Edureka. Web Development Certification Training will help you Learn how to create impressive websites using HTML5, CSS3, Twitter Bootstrap 3, jQuery and Google APIs and deploy it to Amazon Simple Storage Service(S3). 

Got a question for us? Please mention it in the comments section of “String Concatenation in JavaScript” and we will get back to you.

Comments
0 Comments

Browse Categories

webinar REGISTER FOR FREE WEBINAR
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP

Subscribe to our Newsletter, and get personalized recommendations.