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
- Analogy with Microsoft Excel
- Analogy with C Programming
- How strings are manipulated in JavaScript?
- String Manipulation Methods
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. For more, check out this web developer course online.
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
Sometimes users might want to add spaces in the result. In such cases, the syntax differs slightly.
Make your mark on the design world with our UI Design Course.
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;
}
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.
- 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] }
- 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
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 = 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>
Online course is: R programming Online platform is : Edureka Online price is : 2400
String Manipulation Methods
| S.no | Method |
| 1 | indexOf() Returns the index value of any string object’s first occurrence. |
| 2 | slice() This method is used for extracting a particular section from a given string |
| 3 | split() For separating a string into two separate strings, this method is used |
| 4 | concat() This method is used for merging two different strings and return a merged string |
| 5 | valueOf() 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:
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:
- Visualize the flow of your program
- Decide for the variable declarations
- Jot down few strings
- Follow the examples written here
- 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.