Rumah > Artikel > hujung hadapan web > Contoh cara "text+=""" berfungsi dalam JavaScript

Contoh cara "text+=""" berfungsi dalam JavaScript

WBOYke hadapan: 2023-09-06 11:21:111194semak imbas

JavaScript 中“text+=

Dalam tutorial ini, kami akan membincangkan mengapa anda perlu menggunakan penunjuk "text += " " " dalam Javascript.

Arahan di sini adalah untuk memberikan sekeping kod kepada pembolehubah. Pembolehubah di sini ialah 'teks', '+' ialah pengendali penggabungan rentetan, '=' ialah pengendali tugasan, "'" memegang baris kod dan '""' mengandungi rentetan yang akan ditambah.

Pengaturcara perlu menulis blok kod yang panjang seperti menambahkan blok HTML, menambahkan rentetan, dsb. Pembolehubah menyimpan semua nilai dalam urutan dan memaparkan keseluruhan data dalam dom. Melarikan diri petikan tunggal dalam kandungan.

Dalam JavaScript, operator += digunakan untuk menambah nilai pada pembolehubah. Nilai di sebelah kanan operator += ditambah pada pembolehubah di sebelah kiri dan hasilnya disimpan dalam pembolehubah.

Berikut ialah beberapa contoh cara menggunakan teks += "" dalam 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]

Dalam contoh pertama, operator += digunakan untuk menggabungkan rentetan kosong kepada pembolehubah teks. Ini tidak mengubah nilai pembolehubah teks kerana rentetan kosong tidak mempunyai sebarang aksara.

Dalam contoh kedua, operator += digunakan untuk menambah pembolehubah nombor sebanyak 1. Ini akan meningkatkan nilai num sebanyak 1.

Dalam contoh ketiga, operator += digunakan untuk menggabungkan dua tatasusunan. Ini menggabungkan elemen kedua-dua tatasusunan menjadi satu tatasusunan.

Tujuan penunjuk 'text +=" " ' dalam Javascript

Tatabahasa 1

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

Sintaks di atas memberikan data bercantum kepada innerHTML.

Contoh 1

Dalam atur cara ini, pembolehubah 'htmlStr' menyimpan blok kod HTML dan memberikannya kepada pembolehubah ini untuk menetapkan innerHTML. Selepas blok HTML pertama, terdapat koma bertitik untuk menamatkan blok. Program ini menggunakan operator penggabungan dan operator penugasan untuk menambahkan baki blok kod ke penghujung kod.

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

Tatabahasa 2

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

Sintaks di atas menggabungkan data dan menetapkannya kepada innerHTML itu sendiri.

Contoh 2

Sebagai alternatif, anda boleh menambah berbilang baris terus dalam innerHTML. Semak kod di bawah. Menulis innerHTML += 'kandungan' akan melakukan kerja.

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

Kesimpulan

Tutorial ini memberitahu kami tentang keperluan untuk penggabungan dan penugasan sekiranya terdapat berbilang baris kod dalam Javascript. Pendekatan ini memastikan bahawa kod itu bersih dan boleh digunakan semula. Cara penulisan ini membantu apabila anda memerlukan kandungan html yang sama di berbilang tempat pada halaman web. Ia juga mengelakkan kemungkinan ralat pemformatan sintaks apabila anda menulis kod yang lebih panjang dalam satu baris.

Kami telah melihat dua cara untuk melakukan ini. Setiap orang boleh memilih kaedah mengikut keperluan program mereka sendiri.

Atas ialah kandungan terperinci Contoh cara "text+=""" berfungsi dalam JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam

Artikel sebelumnya：Program JavaScript untuk mencetak semua tiga kali ganda membentuk AP dalam tatasusunan yang disusunArtikel seterusnya：Program JavaScript untuk mencetak semua tiga kali ganda membentuk AP dalam tatasusunan yang disusun

Artikel berkaitan

Lihat lagi