Heim > Artikel > Web-Frontend > Eigenschaften des JavaScript-String-Prototyps

Eigenschaften des JavaScript-String-Prototyps

WBOYnach vorne: 2023-09-01 10:49:02989Durchsuche

JavaScript 字符串原型属性

In JavaScript hat jedes Objekt seine eigenen Eigenschaften und jedes Objekt enthält das Prototypattribut. Ein String ist auch ein Objekt in JavaScript. Daher enthält es auch Prototypeigenschaften.

Prototyp-Eigenschaften sind in Objekten verschachtelt, was bedeutet, dass jede Prototyp-Eigenschaft eine andere Prototyp-Eigenschaft enthält. Die Prototypeigenschaften eines String-Objekts enthalten Standardmethoden und -eigenschaften. Entwickler können jedoch Prototypeigenschaften anpassen und dem String-Prototyp Methoden und Eigenschaften hinzufügen.

In diesem Tutorial erfahren Sie, wie Sie String-Prototypeigenschaften verwenden und anpassen können.

Grammatik

Benutzer können der String-Prototyp-Eigenschaft eine beliebige Methode hinzufügen, indem sie der folgenden Syntax folgen.

String.prototype.method_name = function () {
   // function code
};

In der obigen Syntax sollte method_name der Name der Methode sein, die wir dem String-Prototyp hinzufügen möchten.

Beispiel 1 (mit den Methoden toUpperCase() und toLowerCase())

Im folgenden Beispiel verwenden wir die Methoden toUpperCase() und toLowerCase() der String-Prototyp-Eigenschaft, um den String in Groß- bzw. Kleinbuchstaben umzuwandeln.

In der Ausgabe kann der Benutzer die resultierende Zeichenfolge beobachten.

<html>
<body>
   <h3> Using the <i> toUpperCase() and toLowerCase() </i> methods of string prototype property to customize the strings </h3>
   <div id = "output"> </div>
   <script>
      let output = document.getElementById("output");
      var str = "Hello readers! This string contains uppercase and lowerCase letters.";
      var res = str.toUpperCase();
      var res1 = str.toLowerCase();
      output.innerHTML = "Original string: " + str + "<br>" + "Uppercase string: " + res + "<br>" + "Lowercase string: " +
      res1;
   </script>
</body>
</html>

Beispiel 2 (unter Verwendung der Längeneigenschaft)

Im folgenden Beispiel zeigen wir, wie die Standardeigenschaften einer String-Prototyp-Eigenschaft verwendet werden. Hier verwenden wir die Eigenschaft „length“, um die Gesamtzahl der Zeichen in der Zeichenfolge zu zählen.

In der Ausgabe können wir die Gesamtzahl der Zeichen oder die Länge der Zeichenfolge sehen, die wir mithilfe der Längeneigenschaft berechnet haben.

<html>
<body>
   <h3> Using the <i> length </i> property of the string prototype property to get the length of the string </h3>
   <div id = "output"> </div>
   <script>
      let output = document.getElementById("output");
      let string = "JavaScript string contains prototype property.";
      let len = string.length;;
      output.innerHTML = "The original string is: " + string + "<br><br>";
      output.innerHTML += "The length of the string is: " + len;
   </script>
</body>
</html>

Beispiel 3 (Methode zum String-Prototyp hinzufügen)

Wir können auch benutzerdefinierte Methoden zu String-Prototypeigenschaften hinzufügen. Hier haben wir dem String-Prototyp die Eigenschaft countWords() hinzugefügt, die die Gesamtzahl der Wörter im String zählt und ihren Wert zurückgibt.

Hier teilen wir die Zeichenfolge mit „“ als Trennzeichen auf und berechnen die Länge des resultierenden Arrays, um die Gesamtzahl der Wörter in der Zeichenfolge zu zählen. Im Code können wir sehen, dass wir die countWords()-Methode genau wie andere String-Methoden mit einem beliebigen String als Referenz ausführen können.

<html>
<body>
   <h3> Adding the <i> countWords() method to the </i> string prototype property </h3>
   <div id = "output"> </div>
   <script>
      let output = document.getElementById("output");
      // adding countWords() method to string prototype property.
      String.prototype.countWords = function () {
      return this.split(" ").length;
      };
      let string1 = "This is a string";
      let string2 = "Hey, do you know how many words are there in this string?";

      output.innerHTML = "The number of words in the string '" + string1 + "' is " + string1.countWords() + "<br>";
      output.innerHTML += "The number of words in the string '" + string2 + "' is " + string2.countWords();
   </script>
</body>
</html>

Beispiel 4 (Standardmethode des benutzerdefinierten String-Prototyps)

In diesem Beispiel zeigen wir, wie die Standardmethode des String-Prototyps angepasst wird. Hier haben wir die Methode toUpperCase() angepasst. Im Allgemeinen gibt die Methode toUpperCase() eine Zeichenfolge zurück, nachdem alle Zeichenfolgenzeichen in Großbuchstaben konvertiert wurden.

Wir haben es so angepasst, dass die Zeichenfolge erst zurückgegeben wird, nachdem das erste Zeichen in Großbuchstaben umgewandelt wurde. Hier geben wir dieselbe Zeichenfolge zurück, wenn das erste Zeichen bereits ein Großbuchstabe ist. Andernfalls wandeln wir das erste Zeichen mithilfe des ASCII-Werts in Großbuchstaben um.

In der Ausgabe können wir sehen, dass die Methode toUpperCase() nur das erste Zeichen der Zeichenfolge in Großbuchstaben umwandelt und nicht die gesamte Zeichenfolge.

<html>
<body>
   <h3> Customizing the <i> toUpperCase() method of the </i> string prototype property </h3>
   <div id = "output"> </div>
   <script>
      let output = document.getElementById("output");
      
      //  Customizing the toUpperCase() method of the string prototype property to capitalize only the first character
      String.prototype.toUpperCase = function () {
         if (this.charCodeAt(0) >= 97 && this.charCodeAt(0) <= 122) {
         
            // convert to uppercase
            let ascii = this.charCodeAt(0) - 32;
            return String.fromCharCode(ascii) + this.slice(1);
         } else {
            return this;
         }
      }
      let str = "first letter of this string should be capitalized";
      output.innerHTML = "Original string: " + str + "<br>" + "Capitalized string: " + str.toUpperCase();
   </script>
</body>
</html>

Benutzer haben gelernt, String-Prototyp-Eigenschaften zu verwenden. Wir können es verwenden, um Methoden und Eigenschaften zu String-Objekten hinzuzufügen. Darüber hinaus können wir damit String-Eigenschaften und -Methoden anpassen. Nachdem wir die Methode zum String-Prototyp hinzugefügt haben, können wir die Methode aufrufen, indem wir den String als Referenz verwenden.

Das obige ist der detaillierte Inhalt vonEigenschaften des JavaScript-String-Prototyps. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Der ultimative Leitfaden zum Erstellen eines personalisierten jQuery-AkkordeonsNächster Artikel：Der ultimative Leitfaden zum Erstellen eines personalisierten jQuery-Akkordeons

In Verbindung stehende Artikel

Mehr sehen