如何在 JavaScript 中连接多个字符串变量？

在本教程中，我们将学习如何在 JavaScript 中连接多个字符串变量。很多时候，我们需要将两个字符串连接到单个变量中并使用它。连接的简单含义是合并两个或多个字符串。

此外，字符串连接对于在父字符串中插入一些子字符串很有用。例如，在开发应用程序时，作为程序员，您需要通过向其中添加一些额外的字符串来更新字符串。用户可以先分割字符串，然后使用连接操作插入子字符串。

有多种方法可以合并字符串；在本教程中，我们解释了三种方法。

  • 使用 + 或 $（模板字面量）运算符

  • 使用 String concat() 方法

  • 使用 Array join() 方法

使用 + 或 $（模板字面量）运算符

连接两个字符串最简单的方法是使用模板字面量。通常，程序员使用+ 运算符来添加两个或多个数字，但是当我们将 + 运算符与字符串变量一起使用时，它只是简单地合并这两个字符串。

此外，用户可以使用模板字面量，表示为 $ 符号。用户需要将大括号与 $ 运算符一起使用

语法

请遵循以下 + 和 $ 运算符的语法来连接字符串。

let str1 = "welcome";
let str2 = "To";
let str3 = "The";
let result = str1 + str2 + str3; // using + operator;
let result = ` ${str1} ${str2} ` // using $ operator with curly braces

示例

在下面的示例中，我们使用了 + 和 $ 运算符将多个字符串变量与普通字符串连接起来。

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

使用 String 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>

使用 Array join() 方法

Array.join() 也是 JavaScript 中的内置库方法，可用于将所有数组值连接到单个变量中。我们将创建一个字符串数组，按照我们想要合并的顺序添加字符串。

语法

用户可以按照以下语法使用 array.join() 方法

let strArray = [string1, string2 , string3, … ];
let resultantString = strArray.join(" "); // join strings with space

示例

在下面的示例中，我们使用了 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() 方法很有用。

更新于：2022年8月8日

18K+ 浏览量

启动你的 职业生涯

通过完成课程获得认证

开始学习
广告