Laksanakan kaedah polyfill untuk String.prototype.trim() dalam JavaScript-tutorial js-php.cn

Laksanakan kaedah polyfill untuk String.prototype.trim() dalam JavaScript

PHPz

Lepaskan： 2023-08-24 11:49:13

ke hadapan

971 orang telah melayarinya

在 JavaScript 中为 String.prototype.trim() 方法实现 polyfill

Sesetengah pelayar versi lama atau pelayar lama sendiri tidak menyokong fungsi JavaScript yang baru dibangunkan. Contohnya, jika anda menggunakan versi penyemak imbas yang sangat lama, ia tidak menyokong kefungsian JavaScript versi ES10. Sebagai contoh, sesetengah versi penyemak imbas tidak menyokong kaedah Array.falt() yang diperkenalkan dalam versi ES10 JavaScript untuk meratakan tatasusunan.

Dalam kes ini, kami perlu melaksanakan kaedah yang ditentukan pengguna untuk menyokong kefungsian versi penyemak imbas yang lebih lama. Di sini kita akan melaksanakan polyfill untuk kaedah trim() objek String.

Tatabahasa

Pengguna boleh mengikut sintaks di bawah untuk melaksanakan polyfill bagi kaedah string.prototype.trim() menggunakan ungkapan biasa.

String.prototype.trim = function (string) {
   return str.replace(/^\s+|\s+$/g, "");
}

Salin selepas log masuk

Dalam sintaks di atas, kami menggunakan ungkapan biasa untuk menggantikan ruang pada permulaan dan penghujung rentetan.

Ekspresi biasa dijelaskan

^ - Ini adalah permulaan rentetan.
s+ - mewakili satu atau lebih ruang.
| - Ia bermaksud operator "ATAU".
s+$ - Ia mewakili ruang di hujung rentetan.
g - Ia memberitahu kami untuk mengalih keluar semua padanan.

Contoh (menggunakan kaedah rentetan.trim() terbina dalam)

Dalam contoh di bawah, kami telah menggunakan kaedah trim() terbina dalam objek String untuk mengalih keluar ruang pada permulaan dan penghujung rentetan.

<html>
<body>
   <h2>Using the trim() method without polyfill in JavaScript</h2> 
   <div id = "content"> </div>
   <script>
      let content = document.getElementById('content');
      let str = " This is string with white spaces! ";
      content.innerHTML += "The original string is :-" + str + ".<br>";
      let trimmed = str.trim();
      content.innerHTML += "The trimmed string using trim() method is :-" + str + ".<br>";
   </script>
</body>
</html>

Salin selepas log masuk

Contoh (dilaksanakan polyfill untuk kaedah string.trim())

Dalam contoh di bawah, kami telah melaksanakan polyfill untuk memangkas rentetan menggunakan ungkapan biasa. Kami menulis ungkapan biasa untuk menggantikan ruang hadapan dan belakang dengan rentetan kosong.

<html>
<body>
   <h2>Using the <i> trim() method with polyfill </i> in JavaScript</h2>
   <div id = "content"> </div>
   <script>
      let content = document.getElementById('content');
      String.prototype.trim = function (string) {
         let regex = /^\s+|\s+$/g;
         return str.replace(regex, "");
      }
      let str = "Hi, How are you? ";
      content.innerHTML += "The original string is :-" + str + ".<br>";
      let trimmed = str.trim();
      content.innerHTML += "The trimmed string using trim() method is :-" + str + "<br>";
   </script>
</body>
</html>

Salin selepas log masuk

Contoh

Dalam contoh di bawah, kami menggunakan gelung for untuk mencari indeks aksara sah pertama dan terakhir rentetan. Kami mencipta tatasusunan yang mengandungi aksara berbeza yang mewakili ruang putih. Selepas itu, yang pertama untuk gelung berulang melalui aksara rentetan, menyemak aksara pertama yang tiada dalam tatasusunan "ruang", dan menyimpan indeks itu dalam pembolehubah mula. Selain itu, ia mencari aksara sah pertama daripada aksara terakhir dengan cara yang sama.

Akhir sekali, kami menggunakan kaedah slice() untuk mendapatkan subrentetan bermula dari kedudukan "mula" dan berakhir pada kedudukan "akhir".

<html>
<body>
   <h2>Using the <i> trim() method with polyfill </i> in JavaScript</h2>
   <div id = "content"> </div>
   <script>
      let content = document.getElementById('content');
      String.prototype.trim = function () {
         const spaces = ["\s", "\t", "", " ", "", "\u3000"];
         let start = 0;
         let end = this.length - 1;
      
         // get the first index of the valid character from the start
         for (let m = 0; m < this.length; m++) {
            if (!spaces.includes(this[m])) {
               start = m;
               break;
            }
         }
      
         // get the first index of valid characters from the last
         for (let n = this.length - 1; n > -1; n--) {
            if (!spaces.includes(this[n])) {
               end = n;
               break;
            }
         }
      
         // slice the string
         return this.slice(start, end + 1);
      }
      let str = " Hi, How are you? ";
      content.innerHTML += "The original string is :-" + str + ".<br>";
      let trimmed = str.trim();
      content.innerHTML += "The trimmed string using trim() method is :-" + str + "<br>";
   </script>
</body>
</html>

Salin selepas log masuk

Pengguna mempelajari cara melaksanakan polyfill untuk kaedah string.trim() dalam tutorial ini. Kami telah melihat dua cara untuk melaksanakan polyfill untuk kaedah trim(). Kaedah pertama menggunakan ungkapan biasa dan kaedah replace(). Kaedah kedua ialah kaedah mudah, menggunakan kaedah gelung for, slice() dan includes().

Atas ialah kandungan terperinci Laksanakan kaedah polyfill untuk String.prototype.trim() dalam JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!