Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to concatenate two strings so that the second string must concatenate at the end of first string in JavaScript?
String concatenation is the process of joining two or more strings together to create a new string. In JavaScript, there are several methods to concatenate strings, with the second string being appended at the end of the first string.
Using concat() Method
The concat() method joins the calling string with the provided string arguments to create a new string. The original strings remain unchanged since strings in JavaScript are immutable.
Syntax
concat(str1) concat(str1, str2) concat(str1, str2, ... , strN)
Parameters
| Parameter | Description |
|---|---|
| strN | One or more strings to concatenate with the original string |
Example: Basic String Concatenation
<!DOCTYPE html>
<html>
<head>
<title>String Concatenation with concat()</title>
</head>
<body>
<div id="result"></div>
<script>
let string1 = "Tutorialspoint is the best ";
let string2 = "website available ";
let string3 = "for online education.";
let concatRes = string1.concat(string2, string3);
document.getElementById("result").innerHTML = concatRes;
</script>
</body>
</html>
Tutorialspoint is the best website available for online education.
Example: Concatenating with Empty String
<!DOCTYPE html>
<html>
<head>
<title>Empty String Concatenation</title>
</head>
<body>
<div id="result"></div>
<script>
let tutpoint_string = '';
let result = tutpoint_string.concat('Visit ', 'Tut', 'orials', 'point!');
document.getElementById("result").innerHTML = result;
</script>
</body>
</html>
Visit Tutorialspoint!
Using Plus (+) Operator
The plus operator is the most common and straightforward way to concatenate strings in JavaScript. It can join multiple strings together easily.
Example: String Concatenation with + Operator
<!DOCTYPE html>
<html>
<head>
<title>String Concatenation with + Operator</title>
</head>
<body>
<div id="result"></div>
<script>
let firstStr = 'Tutorials Point is a ';
let secondStr = ' ';
let thirdStr = 'leading Ed Tech company';
let result = firstStr + secondStr + thirdStr;
document.getElementById("result").innerHTML = result;
</script>
</body>
</html>
Tutorials Point is a leading Ed Tech company
Using padEnd() Method
The padEnd() method pads a string with another string at the end until it reaches a specified length. This provides more control over the final string length.
Syntax
padEnd(targetLength) padEnd(targetLength, padString)
Parameters
| Parameter | Description |
|---|---|
| targetLength | The desired length of the final string after padding |
| padString | Optional. The string to pad with (defaults to space if omitted) |
Example: Basic padEnd() Usage
<!DOCTYPE html>
<html>
<head>
<title>String Padding with padEnd()</title>
</head>
<body>
<div id="result"></div>
<script>
let firstString = "Tutorialspoint";
let paddedStr = firstString.padEnd(20, "$");
document.getElementById("result").innerHTML = paddedStr;
</script>
</body>
</html>
Tutorialspoint$$$$$$
Example: Multiple Character Padding
<!DOCTYPE html>
<html>
<head>
<title>Multiple Character Padding</title>
</head>
<body>
<div id="result"></div>
<script>
let firstString = "Tutorialspoint";
let paddedStr = firstString.padEnd(26, 'is online tutorials');
document.getElementById("result").innerHTML = paddedStr;
</script>
</body>
</html>
Tutorialspointis online tu
Comparison of Methods
| Method | Use Case | Length Control | Performance |
|---|---|---|---|
concat() |
Multiple strings | No | Moderate |
+ operator |
Simple concatenation | No | Fast |
padEnd() |
Fixed-length strings | Yes | Specialized |
Conclusion
JavaScript offers multiple ways to concatenate strings. The + operator is most commonly used for simple concatenation, while concat() handles multiple strings efficiently, and padEnd() provides length control for specialized formatting needs.
