How to concatenate two strings in JavaScript so that the second string must be concatenated at the end of the first string?-JS Tutorial-php.cn

如何在 JavaScript 中连接两个字符串，以便第二个字符串必须连接在第一个字符串的末尾？

concat() method

The basic operation to combine two strings is concatenation. String composition is an essential part of programming. Before discussing “String Concatenation in JavaScript”, we need to get the basics clear first. A new string is generated when the interpreter performs operations.

To create a new string, the concat() method concatenates the calling string and the string parameters. Neither the initial string nor the returned string will be affected by any changes.

When connecting, the string value is first converted from the non-string type parameter.

grammar

The following is the syntax of the concat() method

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

Copy after login

gentlemen. no	Parameters and description
1	strN String concatenation of one or more strings

return

The concat() method generates a new string by concatenating the initial string and the string value passed as argument.

Example 1

This method returns a new string combining the two input strings; it does not change the given or input strings in any way. The given argument must definitely be a string, which is the disadvantage of the concat() method.

This method accepts non-string parameters, but if the given string is equal to null, a TypeError will be raised. Additionally, since strings in JavaScript are immutable, the concat() method does not 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>

Copy after login

Example 2

In this example, let us understand how to concatenate empty string variables. We will concatenate a simple string value with an empty string variable using the concat() method.

<!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>

Copy after login

Example 3

To add two numbers, we use the operator. JavaScript can also implement string concatenation. Operators have a unique property when combining strings. You can append to an existing string to change it, or just 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>

Copy after login

string.padEnd() method

The string.concat() method can be used for concatenation. However, it does not provide any information such as the length of the string after concatenation or the precise number that must be added.

Javascript therefore provides the string.padEnd() method to help solve this problem. This process requires two parameters. The first is the length and the second is the additional string that must be appended to the initial string.

Use the padEnd() function to pad a string with other strings. It does this in order for a string to be padded to a specific length.

At the end of the string, padding is applied to the right. Therefore, it is also called right padding.

grammar

padEnd(targetLength)
padEnd(targetLength, padString)

Copy after login

gentlemen. no	Parameters and description
1	Target length The required length of the final string after padding.
2	pad_string Optional. The provided string will be padded at the end of the string. If this option is omitted, the padEnd() method replaces pad characters with spaces.

gentlemen. no

Parameters and description

Target length

The required length of the final string after padding.

pad_string

Optional. The provided string will be padded at the end of the string. If this option is omitted, the padEnd() method replaces pad characters with spaces.

padEnd 方法的返回值是一个在结尾处按给定字符串加长的字符串。

示例 4

在示例中让我们了解如何使用 padEnd() 方法。我们给firstString 字符串值“TutorialsPoint”，并使用padEnd() 方法在其末尾添加了一个“$”符号。此外，我们在方法内给出 20 作为 targetLength。

因此，该方法返回 20 个字符长的最终字符串 " 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>

Copy after login

示例 5

在这个例子中，让我们了解在 padEnd() 中使用多字符 padString。在下面的示例中，我们调用了 padEnd() 并给它一个字符串，“是在线教程”，我们给了 paddSecondStr结果。

该过程通过附加“是在线教程”来扩展“Tutorialspoint”，直到最终字符串的长度为 26 个字符。 paddSecondStr 返回的最终字符串“Tutorialspointis online tu”长度为 26。

<!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>

Copy after login

示例 6

在此示例中，让我们了解在 padEnd() 中使用 Long padString。

在下面的示例中，“带有教程点的 JavaScript”已作为 padString 传递。通过 padEnd() 方法对指定的 padString 进行修剪，使填充后的字符串长度等于 targetLength (21)。

因此，firstString.padEnd(21, "JavaScript withtutorialspoint") 返回长度为 21 的最终字符串“Learn JavaScript with”。

<!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>

Copy after login

The above is the detailed content of How to concatenate two strings in JavaScript so that the second string must be concatenated at the end of the first string?. For more information, please follow other related articles on the PHP Chinese website!