如何在 JavaScript 中透過連接陣列的元素來建立字串？-js教程-PHP中文網

方法 1：使用加法運算子 ( )

演算法

範例

方法 2：使用 join() 方法

首頁

web前端

js教程

如何在 JavaScript 中透過連接陣列的元素來建立字串？

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Aug 24, 2023 pm 10:25 PM

如何在 JavaScript 中通过连接数组的元素来创建字符串？

在本教程中，我們將了解如何透過在 JavaScript 中連接陣列的元素來建立字串。我們將看到兩種不同的方法來完成這項任務。第一種方法是使用簡單的加法運算子 ( ) 來新增陣列元素和分隔符號。第二種方法是使用 join() 方法。

方法 1：使用加法運算子 ( )

在這種方法中，我們將向函數傳遞兩個參數，即我們必須加入的元素的數組，第二個參數將是用戶必須給出的分隔符，基本上，分隔符是一個中間元素，它將連接字串時數組值的每個元素之間可以是空格、逗號或任何單字。

演算法

第 1 步 - 建立一個名為 arr 的數組，其中包含元素。使用innerHTML 屬性顯示陣列。
STEP 2 - 建立一個名為 ans 的變數來儲存結果字串。使用數組的第一個元素對其進行初始化。
第 3 步 - 定義分隔符號。我們將其定義為帶有空格的變數。
第4 步驟 - 從索引值1 開始循環遍歷陣列元素，因為我們已將第0^th 元素初始化為字串ans.使用「」運算子將陣列元素加入到字串ans。
第 5 步 - 最後使用innerHTML 屬性顯示最終字串。

上述演算法的偽代碼看起來像這樣 -

var arr=["first", "second", "third", "fourth", "fifth"];
var ans=arr[0];
var separate = " ";
for(var i=1;i<arr.length;i++){
   ans+=separate+arr[i];
}
document.getElementById('writeHere').innerHTML=ans

登入後複製

我們有一個具有某些值的數組，單獨的變數將採用分隔符號作為使用者的輸入。

我們檢查了使用者是否沒有輸入任何分隔符，然後預設情況下，我們會將分隔符號作為空格給出。

範例

我們採用了帶有第0^th 數組元素的ans 變量，因為第一個元素不會有任何分隔符，然後使用從第一個索引開始的循環，即2<数组的sup>nd值我們開始迭代並將所有數組元素並行連接到ans變數中。讓我們將函數程式碼嵌入到 HTML 中。

<html>
<body>
   <p>arr=["Tutorials", "Point", "Simply", "Easy", "Learning"]</p>
   <input type="text" placeholder="Seperator" id="separate" />
   <input type="button" value="Join" onclick="joinTheArr()" id="JoinBtn"/>
   <p id="writeHere">After joning array is:..</p>
   <script>
      function joinTheArr(){
         var arr=["Tutorials", "Point", "Simply", "Easy", "Learning"];
         var separate=document.getElementById("separate").value
         if(!separate)separate=" "
         console.log(separate)
         var ans=arr[0];
         for(var i=1;i<arr.length;i++){
            ans+=separate+arr[i];
         }
         document.getElementById('writeHere').innerHTML=ans
      }
   </script>
</body>
</html>

登入後複製

方法 2：使用 join() 方法

join() 方法將陣列的每個元素轉換為字串，然後使用使用者必須定義的分隔符號連接所有字串，並且它將出現在每個陣列元素之間已經轉換為字串了，畢竟它會以字串的形式傳回一個陣列。 join() 不會修改原始陣列。

範例

在下面的範例中，我們使用 join() 方法將陣列元素與分隔符號連接起來。

<!DOCTYPE html>
<html>
<body>
   <p>arr=["first", "second", "third", "fourth", "fifth"]</p>
   <input type="text" placeholder="Seperator" id="separate" />
   <input type="button" value="Join" onclick="joinTheArr()" id="JoinBtn"/>
   <p id="writeHere">After joning array is:<br><br></p>
   <script>
      function joinTheArr(){
         var arr=["first", "second", "third", "fourth", "fifth"];
         var separate=document.getElementById("separate").value
         if(!separate)
         separate=" ";
         arr=arr.join(separate);
         document.getElementById('writeHere').innerHTML+=arr
      }
   </script>
</body>
</html>

登入後複製

這裡的想法是我們使用 join arr.join(separate) 並將其分配回數組，因為 join 將數組作為字串傳回。

因此，這就是我們透過連接陣列元素來創建字串的方法。

以上是如何在 JavaScript 中透過連接陣列的元素來建立字串？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

免費脫衣圖片

Clothoff.io

AI脫衣器

Video Face Swap

使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！

熱工具

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

中文版，非常好用

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

gmail信箱登陸入口在哪裡

7786

Java教學

1644

CakePHP 教程

1401

Laravel 教程

1297

PHP教程

1234

Related knowledge

前端熱敏紙小票打印遇到亂碼問題怎麼辦？ Apr 04, 2025 pm 02:42 PM

前端熱敏紙小票打印的常見問題與解決方案在前端開發中，小票打印是一個常見的需求。然而，很多開發者在實...

神秘的JavaScript：它的作用以及為什麼重要 Apr 09, 2025 am 12:07 AM

JavaScript是現代Web開發的基石，它的主要功能包括事件驅動編程、動態內容生成和異步編程。 1)事件驅動編程允許網頁根據用戶操作動態變化。 2)動態內容生成使得頁面內容可以根據條件調整。 3)異步編程確保用戶界面不被阻塞。 JavaScript廣泛應用於網頁交互、單頁面應用和服務器端開發，極大地提升了用戶體驗和跨平台開發的靈活性。