Maison > Article > interface Web > Exemple de fonctionnement de "text+=""" en JavaScript

Exemple de fonctionnement de "text+=""" en JavaScript

WBOYavant: 2023-09-06 11:21:111192parcourir

JavaScript 中“text+=

Dans ce tutoriel, nous expliquerons pourquoi vous devez utiliser l'indicateur "text += " " " en Javascript.

L'instruction ici est d'attribuer un morceau de code à une variable. La variable ici est 'text', '+' est l'opérateur de concaténation de chaîne, '=' est l'opérateur d'affectation, "'" contient une ligne de code et '""' contient la chaîne à ajouter.

Les programmeurs doivent écrire de longs blocs de code tels que l'ajout de blocs HTML, l'ajout de chaînes, etc. La variable stocke toutes les valeurs dans l'ordre et affiche toutes les données dans le dom. Échapper aux guillemets simples dans le contenu.

En JavaScript, l'opérateur += est utilisé pour ajouter une valeur à une variable. La valeur du côté droit de l'opérateur += est ajoutée à la variable du côté gauche et le résultat est stocké dans la variable.

Voici quelques exemples d'utilisation du texte += "" en JavaScript -

let text = "Hello";
text += ""; // text is now "Hello"

let num = 1;
num += 1; // num is now 2

let arr = [1, 2, 3];
arr += [4, 5, 6]; // arr is now [1, 2, 3, 4, 5, 6]

Dans le premier exemple, l'opérateur += est utilisé pour concaténer une chaîne vide à une variable texte. Cela ne change pas la valeur de la variable texte car la chaîne vide ne contient aucun caractère.

Dans le deuxième exemple, l'opérateur += est utilisé pour incrémenter la variable num de 1. Cela augmentera la valeur de num de 1.

Dans le troisième exemple, l'opérateur += est utilisé pour concaténer deux tableaux. Cela combine les éléments des deux tableaux en un seul tableau.

Le but de l'indicateur 'text +=" " ' en Javascript

Grammaire 1

var dataStr = 'content 1';
dataStr += 'content 2'+'content 3';
document.getElementById('id').innerHTML = dataStr;

La syntaxe ci-dessus attribue des données concaténées à innerHTML.

Exemple 1

Dans ce programme, la variable 'htmlStr' enregistre le bloc de code HTML et l'assigne à cette variable pour définir innerHTML. Après le premier bloc HTML, il y a un point-virgule pour terminer le bloc. Le programme utilise l'opérateur de concaténation et l'opérateur d'affectation pour ajouter le bloc de code restant à la fin du code.

<html>
<body>
   <h2> Javascript program that illustrates <i>variable += 'content' </i> </h2>
   <div id="htmlWrap"> </div>
   <script>
      
      //Save HTML code block in a variable
      var htmlStr = '<div class="div1">';
      htmlStr += '<h3>H3 tag</h1>' + '<p>P tag</p>' +
         '<strong>Escaping quotes' to avoid syntax error</strong>' +
         '</div>';
      
      //Set the code block to wrapper dom
      document.getElementById("htmlWrap").innerHTML = htmlStr;
   </script>
</body>
</html>

Grammaire 2

var dataStr = 'content';
document.getElementId('id').innerHTML += dataStr;

La syntaxe ci-dessus concatène les données et les attribue à innerHTML lui-même.

Exemple 2

Vous pouvez également ajouter plusieurs lignes directement dans innerHTML. Consultez le code ci-dessous. L'écriture de innerHTML += 'content' fera l'affaire.

<html>
<body>
   <h2>Javascript program that illustrates <i>innerHTML += 'content'</i></h2>
   <div id="wrap">
      <p> A default text. </p>
   </div>
   <button onclick="moreData();">Add More</button>
   <script>
      function moreData() {
         document.getElementById("wrap").innerHTML +=
            "<h3>This is the text by user.</h3>";
      }
   </script>
</body>
</html>

Conclusion

Ce tutoriel nous parle de la nécessité de concaténation et d'affectation en cas de plusieurs lignes de code en Javascript. Cette approche garantit que le code est propre et réutilisable. Cette façon d'écrire est utile lorsque vous avez besoin du même contenu HTML à plusieurs endroits d'une page Web. Cela évite également la possibilité d’erreurs de formatage de syntaxe lorsque vous écrivez du code plus long sur une seule ligne.

Nous avons vu deux façons de procéder. Chacun peut choisir une méthode en fonction des besoins de son propre programme.

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!

Déclaration：

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

Article précédent：Programme JavaScript pour imprimer tous les triplets formant AP dans un tableau triéArticle suivant：Programme JavaScript pour imprimer tous les triplets formant AP dans un tableau trié

Articles Liés

Voir plus