如何將 JavaScript 陣列轉換為逗號分隔的列表?
在本教程中,我們將學習如何將 JavaScript 陣列的元素更改為逗號分隔的列表。有時,我們需要 JavaScript 陣列的元素以預設情況下陣列本身未返回的格式顯示,因此我們需要編寫一些額外的程式碼來實現此任務。幸運的是,JavaScript 允許我們使用一些內建方法來做到這一點。我們將詳細討論這些方法。
以下是 JavaScript 提供的用於將陣列轉換為逗號分隔列表的內建方法:
Array join() 方法
Array toString 方法
讓我們藉助程式碼示例詳細討論這兩種方法:
使用 Array join() 方法
join() 方法連線陣列的所有元素並形成一個字串,然後透過用傳遞給方法的字串形式的指定分隔符分隔每個元素來返回該字串。
語法
以下語法顯示瞭如何使用 join() 方法獲取所有陣列元素的逗號分隔列表:
array.join(separator);
讓我們討論 join() 方法的引數和返回值:
引數
separator - join() 方法以字串形式接受分隔符。您可以傳遞任何您選擇的分隔符,例如:點、逗號、and 或等。如果未將任何分隔符傳遞給此方法,則預設情況下它將使用逗號 (“,”) 分隔符分隔所有元素。
返回值
String - 它將返回一個字串,其中包含由傳遞給 join() 方法的分隔符分隔的所有陣列元素。
讓我們瞭解 join() 方法的實際實現,以將陣列的元素轉換為逗號分隔的列表:
演算法
步驟 1 - 作為演算法的第一步,我們將定義一個 JavaScript 陣列,稍後我們將將其轉換為逗號分隔的列表。
步驟 2 - 在下一步中,我們將定義一個 JavaScript 函式,該函式會觸發按鈕的點選事件。
步驟 3 - 在第三步中,我們將在前一步中宣告的函式內部使用 join() 方法,並在使用者點選按鈕時在使用者螢幕上顯示結果。
示例
以下示例說明了如何使用 join() 方法將 JavaScript 陣列轉換為逗號分隔的列表:
<html> <head> <title>JavaScript Array join Method</title> </head> <body> <script> var arr = new Array("Java","PHP","Ruby"); var str = arr.join(); document.write("str : " + str ); var str = arr.join(", "); document.write("<br />str : " + str ); </script> </body> </html>
使用 Array toString() 方法
toString() 方法簡單地將陣列的所有元素轉換為字串,然後以逗號分隔列表的形式返回該字串,該列表包含原始陣列包含的所有元素。toString() 方法不接受任何分隔符引數來分隔元素,它預設返回陣列所有元素的逗號分隔列表。
語法
以下語法將用於使用 toString() 方法將陣列轉換為逗號分隔列表:
array.toString();
讓我們討論 toString() 方法的實際實現,以將陣列轉換為逗號分隔的列表:
演算法
此示例和上一個示例的演算法幾乎相同,演算法中有一個細微的差別,您只需要將上一個演算法中的 join() 方法替換為 toString() 方法,而無需向其傳遞任何引數。
示例
以下示例將把 JavaScript 陣列轉換為逗號分隔列表:
<html> <body> <h2>Turn JavaScript array into the comma-separated list</h2> <p id="result">Original array : ["Tutorialspoint", "Content writting", "Online learning platform"]<br></p> <button onclick="turn()">Click to turn</button> <script> var myElement = document.getElementById("result"); var arr = ["Tutorialspoint", "Content writting", "Online learning platform"]; function turn() { var turnedArr = arr.toString(); myElement.innerHTML += "<br>The comma-separated list of above array is: " + turnedArr; } </script> </body> </html>
如您所見,我們使用了相同的陣列和函式來實現此方法。我們只是用 toString() 方法替換了 join() 方法。但兩種方法的結果沒有變化,最終,我們得到了陣列所有元素的逗號分隔列表,這是我們執行所有操作的主要目的。
在本教程中,我們看到了兩種不同的方法、途徑,或者我們可以說 JavaScript 的兩種不同的方法來實現將 JavaScript 陣列轉換為逗號分隔列表的相同目標。我們通過了解使用與每種方法關聯的程式碼示例的實際實現,詳細討論了這兩種方法。每當您需要將陣列轉換為逗號分隔列表時,都可以使用這些方法中的任何一種。