How to concatenate two strings so that the second string must concatenate at the end of first string in JavaScript?

Front End TechnologyJavascriptObject Oriented Programming

concat() method

The fundamental operation for combining two strings is concatenation. String combining is a necessary part of programming. We need to first clear out the fundamentals before we can discuss "String Concatenation in JavaScript." A new string is produced when an interpreter performs the operation.

In order to create a new string, the concat() method joins the calling string and the string arguments. The initial string and the string that was returned are unaffected by changes to either.

When concatenating, string values are first transformed from parameters that are not of the type string.

Syntax

Following is the syntax of concat() method

concat(str1)
concat(str1, str2)
concat(str1, str2, ... , strN)


Sr.No
 Parameter & Description
1
strN
String concatenation with one or more strings

Returns

The concat() method produces a new string by joining the initial string and the string values which have been passed as parameters.

Example

This method returns a new string that combines the two input strings; it does not change the given or input strings in any way. The given parameter must absolutely be a string, which is a drawback of the concat() method.

This method accepts non-string parameters, however if the given string equals null, a TypeError is thrown. In addition, since strings in JavaScript are immutable, concat() method doesn't actually change the string.

<!DOCTYPE html>
<html>
   <title>How to concatenate two strings so that the second string must concatenate at the end of first string in JavaScript - TutorialsPoint</title>
   <head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   </head>
   <div id="result"></div>
   <body>
   <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>

Example

In this example let us understand Concatenating with an Empty String Variable. We will concatenate simple string values by using the concat() method with just an empty string variable.

<!DOCTYPE html>
<html>
   <title>How to concatenate two strings so that the second string must concatenate at the end of first string in JavaScript - TutorialsPoint</title>
   <head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   </head>
   <div id="result"></div>
   <body>
   <script>
      let tutpoint_string = '';
      document.getElementById("result").innerHTML =tutpoint_string.concat('Visit ','Tut','orials','point!');
   </script>
</body>
</html>

Example

In order to add two numbers, we use the + operator. String concatenation is also possible with JavaScript. The + operator has a unique property when string combination. You can append to an existing string to change it or you could just use to create a new string.

<!DOCTYPE html>
<html>
   <title>How to concatenate two strings so that the second string must concatenate at the end of first string in JavaScript - TutorialsPoint</title>
   <head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   </head>
   <div id="result"></div>
   <body>
   <script>
      let firstStr = 'Tutorials Point is a ';
      let secondStr = ' ';
      let thirdStr = 'leading Ed Tech company';
      document.getElementById("result").innerHTML =firstStr+secondStr+thirdStr;
   </script>
</body>
</html>

string.padEnd() method

The string.concat() method can be used to concatenate. However, it won't offer any information, such as the string's length after concatenation or the precise numbers that must be added, etc.

Javascript has therefore supplied the string.padEnd() method to help solve this issue. This process requires two parameters. The first is the length, and the second is the additional string that must be attached to the initial string.

A string is padded with some other string using the padEnd() function. In order for the string to be padded to reach a specific length, it performs this.

At the end of the string, the padding is applied to the right side. Because of this, it is also known as right padding.

Syntax

padEnd(targetLength)
padEnd(targetLength, padString)


Sr.No
Parameter & Description
1
targetLength
The desired length of the final string after padding.
2
pad_string
Optional. The supplied string is what will be padded at the end of the string. If this option is ignored, the padEnd() method will substitute a space for the pad character.

Returns

The return value of the padEnd method is a string which has been lengthened by the given string at the ending.

Example

In the example let us understand using padEnd() Method. we've given firstString the string value " TutorialsPoint" and added a "$" sign at the end of it using the padEnd() method. Additionally, we gave 20 as the targetLength inside the method.

As a result, the method returns the 20-character long final string " Tutorialspoint$$$$$$."

<!DOCTYPE html>
<html>
   <title>How to concatenate two strings so that the second string must concatenate at the end of first string in JavaScript - TutorialsPoint</title>
   <head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   </head>
   <div id="result"></div>
   <body>
   <script>
      let firstString = "Tutorialspoint";
      let paddfirstStr= firstString.padEnd(20, "$");
      document.getElementById("result").innerHTML =paddfirstStr;
   </script>
</body>
</html>

Example

In this example let us understand using Multiple Character padString in padEnd().In the example below, we've called padEnd() and gave it a string of characters, "is online tutorials," and we've given paddSecondStr the result.

The process extends "Tutorialspoint" by appending" is online tutorials" until the final string is 26 characters long. The final string "Tutorialspointis online tu," which has a length of 26, is what paddSecondStr returns.

<!DOCTYPE html>
<html>
   <title>How to concatenate two strings so that the second string must concatenate at the end of first string in JavaScript - TutorialsPoint</title>
   <head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   </head>
   <div id="result"></div>
   <body>
   <script>
      let firstString = "Tutorialspoint";
      let paddSecondStr= firstString.padEnd(26, 'is online tutorials');
      document.getElementById("result").innerHTML =paddSecondStr;
   </script>
</body>
</html>

Example

In this example let us understand using a Long padString in padEnd().

In the example below, " JavaScript with tutorialspoint" has been passed as padString. The specified padString is trimmed by the padEnd() method so that the length of the string after padding is equal to the targetLength (21).

As a result, the final string "Learn JavaScript with," with a length of 21, is returned by firstString.padEnd(21, "JavaScript with tutorialspoint").

<!DOCTYPE html>
<html>
   <title>How to concatenate two strings so that the second string must concatenate at the end of first string in JavaScript - TutorialsPoint</title>
   <head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   </head>
   <div id="result"></div>
   <body>
   <script>
      let firstString = "Learn ";
      let paddThirdStr= firstString.padEnd(21, 'JavaScript with tutorialspoint');
      document.getElementById("result").innerHTML =paddThirdStr;
   </script>
</body>
</html>
raja
Updated on 27-Jul-2022 07:58:42

Advertisements