如何将 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>

如您所见,我们使用了相同的数组和函数来实现此方法。我们只是将 join() 方法替换为toString() 方法。但两种方法的结果没有变化,最终我们得到数组所有元素的逗号分隔列表,这是我们进行所有操作的主要目的。

在本教程中,我们看到了两种不同的方法、途径,或者我们可以说 JavaScript 的两种不同的方法来实现将 JavaScript 数组转换为逗号分隔列表的相同目标。我们通过了解使用与每种方法相关联的代码示例的实际实现来详细讨论了这两种方法。每当您需要将数组转换为逗号分隔列表时,都可以使用这些方法中的任何一种。

更新于: 2022-11-25

11K+ 次浏览

开启你的 职业生涯

通过完成课程获得认证

开始学习
广告

© . All rights reserved.