Implementieren Sie Polyfill für die String.prototype.trim()-Methode in JavaScript-js-Tutorial-php.cn

Implementieren Sie Polyfill für die String.prototype.trim()-Methode in JavaScript

PHPz

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

nach vorne

1044 Leute haben es durchsucht

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

Einige alte Browserversionen oder alte Browser selbst unterstützen die neu entwickelten Funktionen von JavaScript nicht. Wenn Sie beispielsweise eine sehr alte Browserversion verwenden, unterstützt diese nicht die Funktionalität der ES10-Version von JavaScript. Einige Browserversionen unterstützen beispielsweise nicht die in der ES10-Version von JavaScript eingeführte Methode Array.falt() zum Reduzieren von Arrays.

In diesem Fall müssen wir benutzerdefinierte Methoden implementieren, um die Funktionalität älterer Browserversionen zu unterstützen. Hier implementieren wir eine Polyfüllung für die trim()-Methode des String-Objekts.

Grammatik

Benutzer können der folgenden Syntax folgen, um reguläre Ausdrücke zum Implementieren von Polyfill für die Methode string.prototype.trim() zu verwenden.

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

Nach dem Login kopieren

In der obigen Syntax verwenden wir reguläre Ausdrücke, um die Leerzeichen am Anfang und Ende der Zeichenfolge zu ersetzen.

Regulärer Ausdruck erklärt

^ - Dies ist der Anfang der Zeichenfolge.
s+ – steht für ein oder mehrere Leerzeichen.
|. - Es steht für „OR“-Operator.
s+$ – Es stellt ein Leerzeichen am Ende der Zeichenfolge dar.
g – Es fordert uns auf, alle Übereinstimmungen zu entfernen.

Beispiel (mit der integrierten Methode string.trim())

Im folgenden Beispiel haben wir die integrierte trim()-Methode des String-Objekts verwendet, um Leerzeichen am Anfang und Ende der Zeichenfolge zu entfernen.

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

Nach dem Login kopieren

Beispiel (implementierte Polyfüllung für die string.trim()-Methode)

Im folgenden Beispiel haben wir eine Polyfüllung implementiert, um Zeichenfolgen mithilfe regulärer Ausdrücke zu kürzen. Wir haben einen regulären Ausdruck geschrieben, um führende und nachfolgende Leerzeichen durch leere Zeichenfolgen zu ersetzen.

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

Nach dem Login kopieren

Beispiel

Im folgenden Beispiel verwenden wir eine for-Schleife, um den Index des ersten und letzten gültigen Zeichens einer Zeichenfolge zu finden. Wir erstellen ein Array mit verschiedenen Zeichen, die Leerzeichen darstellen. Danach durchläuft die erste for-Schleife die Zeichen der Zeichenfolge, sucht nach dem ersten Zeichen, das sich nicht im Array „Leerzeichen“ befindet, und speichert diesen Index in der Startvariablen. Darüber hinaus wird auf die gleiche Weise das erste gültige Zeichen vom letzten Zeichen ermittelt.

Schließlich haben wir die Methode „slice()“ verwendet, um den Teilstring abzurufen, der an der „Start“-Position beginnt und an der „End“-Position endet.

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

Nach dem Login kopieren

Benutzer haben in diesem Tutorial gelernt, wie man eine Polyfüllung für die string.trim()-Methode implementiert. Wir haben zwei Möglichkeiten gesehen, eine Polyfüllung für die trim()-Methode zu implementieren. Die erste Methode verwendet reguläre Ausdrücke und die Methode replace(). Die zweite Methode ist die einfache Methode, die eine for-Schleife sowie die Methoden „slice()“ und „include()“ verwendet.

Das obige ist der detaillierte Inhalt vonImplementieren Sie Polyfill für die String.prototype.trim()-Methode in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!