如何在 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+ 瀏覽量

啟動你的 職業生涯

透過完成課程獲得認證

開始學習
廣告
© . All rights reserved.