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.

Updated on: 2026-03-15T23:18:59+05:30

1K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements