首頁 > 文章 > web前端 > 在 JavaScript 中為 String.prototype.trim() 方法實作 polyfill

在 JavaScript 中為 String.prototype.trim() 方法實作 polyfill

PHPz轉載: 2023-08-24 11:49:131007瀏覽

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

一些舊版的瀏覽器或舊瀏覽器本身不支援JavaScript新發展的功能。例如，如果您使用的是非常舊的瀏覽器版本，它不支援 ES10 版本 JavaScript 的功能。例如，某些版本的瀏覽器不支援 ES10 版本的 JavaScript 中引入的 Array.falt() 方法來展平數組。

在這種情況下，我們需要實作使用者定義的方法來支援舊瀏覽器版本的功能。在這裡，我們將為 String 物件的trim()方法實作polyfill。

文法

使用者可以依照下面的語法使用正規表示式為 string.prototype.trim() 方法實作polyfill。

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

在上面的語法中，我們使用正規表示式來取代字串開頭和結尾的空格。

正規表示式解釋

^ - 這是字串的開頭。
\s - 代表一個或多個空格。
| - 它代表「OR」運算子。
\s $ - 它表示字串末端的空格。
g - 它告訴我們刪除所有符合項目。

範例（使用內建 string.trim() 方法）

在下面的範例中，我們使用了 String 物件內建的 trim() 方法來刪除字串開頭和結尾的空格。

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

範例（為 string.trim() 方法實作了 polyfill）

在下面的範例中，我們實作了polyfill，以使用正規表示式修剪字串。我們編寫了正規表示式，用空字串取代開頭和結尾的空格。

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

範例

在下面的範例中，我們使用 for 迴圈來尋找字串的第一個和最後一個有效字元的索引。我們建立了一個包含代表空白的不同字元的陣列。之後，第一個 for 循環遍歷字串的字符，檢查不在「spaces」數組中的第一個字符，並將該索引儲存在 start 變數中。此外，它以相同的方式從最後一個字元中找到第一個有效字元。

最後，我們使用了 slice() 方法來取得從「start」位置開始到「end」位置結束的子字串。

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

使用者在本教學中學習如何實作 string.trim() 方法的 polyfill。我們已經看到了兩種為trim()方法實作polyfill的方法。第一種方法使用正規表示式和replace()方法。第二種方法是簡單的方法，使用 for 迴圈、slice() 和includes() 方法。

以上是在 JavaScript 中為 String.prototype.trim() 方法實作 polyfill的詳細內容。更多資訊請關注PHP中文網其他相關文章！

JavaScript 正则表达式 String Array 运算符 for 字符串循环对象 prototype

陳述：

本文轉載於：tutorialspoint.com。如有侵權，請聯絡admin@php.cn刪除

上一篇：如何使用 FabricJS 設定 IText 物件的 URL 字串的品質等級？下一篇：如何使用 FabricJS 設定 IText 物件的 URL 字串的品質等級？

看更多