如何将 JavaScript 数组转换为逗号分隔列表?

javascriptweb developmentfront end technology更新于 2024/6/18 3:38:00

在本教程中,我们将学习如何将 JavaScript 数组的元素转换为逗号分隔列表。有时,我们需要 JavaScript 数组元素的格式不是数组本身默认返回的格式,因此我们需要编写一些额外的代码来实现此任务。幸运的是,JavaScript 允许我们使用一些内置方法来做到这一点。我们将详细讨论这些方法。

以下是 JavaScript 提供的将数组转换为逗号分隔列表的内置方法 -

  • 数组 join() 方法

  • 数组 toString 方法

让我们借助代码示例详细讨论这两种方法 -

使用数组 join() 方法

join() 方法将数组的所有元素连接起来并形成一个字符串,然后通过使用传递给该方法的指定分隔符以字符串形式分隔每个元素来返回该字符串。

语法

以下语法显示了如何使用 join() 方法获取所有数组元素的逗号分隔列表 -

array.join(separator);

让我们讨论一下 join()方法的参数和返回值 −

参数

  • separator − join()方法接受字符串形式的分隔符。您可以将任何您选择的分隔符传递给它,例如:点、逗号、和或等。如果没有向此方法传递任何分隔符,则默认情况下它将使用逗号(",")分隔符分隔所有元素。

返回值

  • 字符串− 它将返回一个字符串,其中包含由传递给 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>

使用数组 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 数组转换为逗号分隔列表的相同目标。我们通过使用与每种方法相关的代码示例了解实际实现,详细讨论了这两种方法。每当您需要将数组转换为逗号分隔列表时,都可以使用这些方法中的任何一种。


相关文章