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().
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.
É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.
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<数组的sup>è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>
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.
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!
Le Metaverse reconnaît les dix principales pièces potentielles
Comment configurer la redirection de nom de domaine
Comment connecter PHP à la base de données mssql
Comment configurer la fonction antiblocage de WeChat
Requête de temps Internet
Analyse coût-efficacité de l'apprentissage de Python et C++
Quels sont les outils d'attaque DDoS ?
expression lambda
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
