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

在本教程中，我们将了解如何在 JavaScript 中通过连接数组元素来创建字符串。我们将看到两种不同的方法来完成此任务。第一种方法是使用简单的加法运算符 (+)来添加数组元素和分隔符。第二种方法是使用join()方法。

方法 1：使用加法运算符 (+)

在这种方法中，我们将向函数传递两个参数，第一个参数是要连接其元素的数组，第二个参数是用户必须提供的分隔符，基本上，分隔符是在连接字符串时位于每个数组元素之间的中间元素，它可以是空格、逗号或任何单词。

算法

  • 步骤 1 - 创建一个名为arr的数组，其中包含元素。使用 innerHTML 属性显示数组。

  • 步骤 2 - 创建一个名为ans的变量来存储结果字符串。将其初始化为数组的第一个元素。

  • 步骤 3 - 定义一个分隔符。我们将其定义为一个包含空格的变量。

  • 步骤 4 - 遍历数组元素，从索引值 1 开始，因为我们已将第 0 个元素初始化为字符串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

我们有一个包含一些值的数组，separate 是一个变量，它将从用户那里获取分隔符作为输入。

我们检查用户是否没有输入任何分隔符，如果是，则默认情况下，我们将分隔符设置为空格。

示例

我们使用ans变量存储第 0 个数组元素，因为对于第一个元素，将不会有任何分隔符，然后使用从第 1 个索引（即数组的第二个值）开始的循环，我们开始迭代，并同时将所有数组元素连接到 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 返回数组作为字符串。

因此，这就是我们如何通过连接数组元素来创建字符串。

更新于: 2022-08-23

516 次查看

启动您的 职业生涯

通过完成课程获得认证

开始
广告