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

front end technologyjavascriptweb development

在本教程中，我们将了解如何在 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 split = " ";
for(var i=1;i<arr.length;i++){
    ans+=separate+arr[i];
}
document.getElementById('writeHere').innerHTML=ans

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

我们检查用户是否未输入任何分隔符，然后默认情况下，我们将分隔符显示为空格。

示例

我们已将 ans 变量与数组的第 0 个元素一起使用，因为对于第一个元素，将没有任何分隔符，然后使用从第一个索引(即数组的第二个值)开始的循环，我们开始迭代并将所有数组元素并行连接到 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>