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

更新于: 2022-11-25

11K+ 浏览量

开启你的 职业生涯

通过完成课程获得认证

开始学习
广告