如何在 JavaScript 中连接多个字符串变量?
在本教程中，我们将学习如何在 JavaScript 中连接多个字符串变量。很多时候我们需要将两个字符串连接到一个变量中并使用它。连接的简单含义是合并两个或多个字符串。
此外，字符串连接可用于在父字符串中插入一些子字符串。例如，在开发应用程序时，作为程序员，您需要通过向字符串中添加一些其他额外字符串来更新字符串。用户可以先拆分字符串，然后使用连接操作插入子字符串。
有多种合并字符串的方法；我们在本教程中解释了三种方法。
使用 + 或 $(模板文字)运算符
使用字符串 concat() 方法
使用数组 join() 方法
使用 + 或 $(模板文字)运算符
连接两个字符串的最简单方法是使用模板文字。通常，程序员使用 + 运算符 来添加两个或多个数字，但是当我们将 + 运算符与字符串变量一起使用时，它只会合并两个字符串。
此外，用户可以使用模板文字，表示为 $ 符号。用户需要使用带有 $ 运算符的花括号
语法
按照以下语法使用 + 和 $ 运算符连接字符串。
let str1 = "welcome"; let str2 = "To"; let str3 = "The"; let result = str1 + str2 + str3; // 使用 + 运算符; let result = ` ${str1} ${str2} ` // 使用带有花括号的 $ 运算符
示例
在下面的示例中，我们使用 + 和 $ 运算符将多个字符串变量与普通字符串连接起来。
<html> <head> </head> <body> <h2>Concatenate multiple string variables in JavaScript.</h2> <h4>Concatenating the "Welcome " "To " "The " "TutorialsPoint ", using the <i> + </i> operator.</h4> <div id = "string1"> </div> <h4>Concatenate the strings "Hello " "Programmers! " using the <i> $ </i> operator.</h4> <div id = "string2"> </div> </body> <script> var string1 = document.getElementById("string1"); var string2 = document.getElementById("string2"); let str1 = "Welcome "; let str2 = "To "; let str3 = "The "; let finalString = str1 + str2 + str3 + "TutorialsPoint. "; string1.innerHTML = finalString; str1 = "Hello "; str2 = "Programmers! "; string2.innerHTML = `${str1} ${str2}`; </script> </html>
使用字符串 concat() 方法
string.concat() 方法是内置的 JavaScript 字符串库方法，我们可以使用它来合并两个或多个字符串。concat() 方法在将现有字符串与其他字符串合并后返回新字符串，而不会影响现有字符串。
使用起来也更简单，程序员可以按照以下语法对多个字符串使用 concat() 方法。
语法
string1.concat( string2, string3, string4 );
参数
string1 − 它是我们需要合并多个字符串的现有字符串。
string2, … − 将多个字符串作为参数传递，以将它们与现有字符串合并。
示例
在下面的示例中，我们将两个字符串作为 concat() 方法的参数传递，以将其与现有的第三个字符串合并。它将返回一个新字符串，用户可以在输出中观察到它。
<html> <head> </head> <body> <h2> Concatenate multiple string variables in JavaScript. </h2> <h4> Concatenating the "is a " "computer science portal " with the "TutorialsPoint " string, using the <i> concat() </i> method. </h4> <div id = "string1"> </div> </body> <script> var string1 = document.getElementById("string1"); let str1 = "TutorialPoints "; let str2 = "is a "; let str3 = "computer science portal "; let resultantString = str1.concat(str2, str3); string1.innerHTML = resultantString; </script> </html>
使用数组 join() 方法
Array.join() 也是 JavaScript 中的内置库方法，可用于将所有数组值连接到单个变量中。我们将创建一个字符串数组，并按照我们想要合并的顺序添加字符串。
语法
用户可以按照以下语法使用 array.join() 方法
let strArray = [string1, string2 , string3, … ];
let resultantString = strArray.join(" "); // 用空格连接字符串
示例
在下面的示例中，我们使用 array.join() 方法连接数组的所有字符串。array.join() 方法遍历数组的所有字符串，将它们逐个合并为一个新字符串，并返回新的字符串变量。
<html> <head> </head> <body> <h2> Concatenate multiple string variables in JavaScript. </h2> <h4> Concatenating all strings of array ["abc", "def", "ghi"] , using the <i> array.join() </i> method. </h4> <div id = "string1"> </div> </body> <script> var string1 = document.getElementById("string1"); let strArray = ['abc', 'def', 'ghi']; let resultantString = strArray.join(" "); string1.innerHTML = resultantString; </script> </html>
在上面的输出中，用户可以看到所有数组字符串都与空格字符合并。但是，我们可以更改分隔符来连接字符串，用户可以将其作为 array.join() 方法的参数传递。
我们学习了连接字符串的三种不同方法。每种方法在不同场景中都有用。第一种方法用于需要合并变量时，第二种方法也同样有用。当我们需要合并字符串数组时，array.join() 方法很有用。
