Maison > Article > interface Web > Comment créer une chaîne en concaténant les éléments d'un tableau en JavaScript ?

Comment créer une chaîne en concaténant les éléments d'un tableau en JavaScript ?

WBOYavant: 2023-08-24 22:25:05925parcourir

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

Dans ce tutoriel, nous allons apprendre à créer une chaîne en concaténant les éléments d'un tableau en JavaScript. Nous verrons deux manières différentes d’accomplir cette tâche. La première méthode consiste à utiliser le simple opérateur d'addition (+) pour ajouter des éléments et des délimiteurs de tableau. La deuxième méthode consiste à utiliser la méthode join().

Méthode 1 : Utilisez l'opérateur d'addition (+)

Dans cette méthode, nous passerons deux paramètres à la fonction qui est le tableau d'éléments que nous devons joindre, le deuxième paramètre sera le délimiteur que l'utilisateur devra donner, en gros le délimiteur est un élément intermédiaire, qui concatènera les chaînes où il peut y avoir un espace, une virgule ou n'importe quel mot entre chaque élément de la valeur du tableau.

Algorithme

Étape 1 - Créez un tableau nommé arr contenant les éléments. Utilisez l'attribut innerHTML pour afficher le tableau.
ÉTAPE 2 - Créez une variable nommée ans pour stocker la chaîne résultante. Initialisez le tableau en utilisant son premier élément.
Étape 3 - Définir les séparateurs. Nous le définissons comme une variable avec des espaces.
Étape 4 - Parcourez les éléments du tableau à partir de la valeur d'index 1 puisque nous avons initialisé le 0^ème élément dans une chaîneans Utilisez l'opérateur "+" pour ajouter les éléments du tableau à la chaîneans. .
Étape 5 - Enfin, affichez la chaîne finale en utilisant l'attribut innerHTML.

Le pseudocode de l'algorithme ci-dessus ressemble à ceci -

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

Nous avons un tableau avec certaines valeurs et des variables distinctes prendront des délimiteurs en entrée de l'utilisateur.

Nous avons vérifié si l'utilisateur n'a saisi aucun délimiteur, alors par défaut nous donnerons le délimiteur sous forme d'espace.

Exemple

Nous prenons la variable ^ans avec le 0èmeème élément du tableau car le premier élément n'aura aucun délimiteur, puis en utilisant une boucle commençant par le premier index qui est la 2ème valeur, nous commençons à itérer et à concaténer tout éléments du tableau en parallèle dans la variable ans. Intégrons le code de la fonction dans 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>

Méthode 2 : utilisez la méthode join()

La méthode

join() convertit chaque élément du tableau en chaîne puis concatène toutes les chaînes à l'aide d'un délimiteur que l'utilisateur doit définir et il apparaîtra entre chaque élément du tableau qui a été converti en chaîne, après tout renvoie un tableau sous forme de chaîne. join() ne modifie pas le tableau d'origine.

Exemple

Dans l'exemple ci-dessous, nous utilisons la méthode join() pour joindre les éléments du tableau avec un délimiteur.

<!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>

L'idée ici est que nous utilisons join arr.join(separate) et que nous l'attribuons au tableau, puisque join renvoie le tableau sous forme de chaîne.

Voici donc comment nous créons une chaîne en concaténant des éléments de tableau.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

JavaScript html 运算符字符串循环 innerHTML 算法

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Comment définir la durée de l'animation dans le texte à l'aide de FabricJS ?Article suivant：Comment définir la durée de l'animation dans le texte à l'aide de FabricJS ?

Articles Liés

Voir plus