Propriétés du prototype de chaîne JavaScript-js tutoriel-php.cn

Propriétés du prototype de chaîne JavaScript

WBOY

Libérer： 2023-09-01 10:49:02

avant

908 Les gens l'ont consulté

JavaScript 字符串原型属性

En JavaScript, chaque objet a ses propres propriétés et chaque objet contient l'attribut prototype. Une chaîne est également un objet en JavaScript. Par conséquent, il contient également des propriétés prototypes.

Les propriétés du prototype sont imbriquées dans les objets, ce qui signifie que chaque propriété du prototype contient une autre propriété du prototype. Les propriétés prototypes d'un objet chaîne contiennent des méthodes et des propriétés par défaut. Cependant, les développeurs peuvent personnaliser les propriétés du prototype et ajouter des méthodes et des propriétés au prototype de chaîne.

Dans ce didacticiel, nous apprendrons comment utiliser les propriétés du prototype de chaîne et les personnaliser.

Grammaire

Les utilisateurs peuvent ajouter n'importe quelle méthode à la propriété du prototype de chaîne en suivant la syntaxe suivante.

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

Copier après la connexion

Dans la syntaxe ci-dessus, method_name doit être le nom de la méthode que nous souhaitons ajouter au prototype de chaîne.

Exemple 1 (en utilisant les méthodes toUpperCase() et toLowerCase())

Dans l'exemple ci-dessous, nous utilisons les méthodes toUpperCase() et toLowerCase() de la propriété prototype de chaîne pour convertir la chaîne en majuscules et en minuscules respectivement.

Dans la sortie, l'utilisateur peut observer la chaîne résultante.

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

Copier après la connexion

Exemple 2 (en utilisant la propriété Longueur)

Dans l'exemple ci-dessous, nous montrons comment utiliser les propriétés par défaut d'une propriété de prototype de chaîne. Ici, nous utilisons la propriété "length" pour compter le nombre total de caractères dans la chaîne.

Dans le résultat, nous pouvons voir le nombre total de caractères ou la longueur de la chaîne que nous avons calculé à l'aide de la propriété length.

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

Copier après la connexion

Exemple 3 (Ajouter une méthode au prototype de chaîne)

Nous pouvons également ajouter des méthodes personnalisées aux propriétés du prototype de chaîne. Ici, nous avons ajouté la propriété countWords() dans le prototype de chaîne, qui compte le nombre total de mots dans la chaîne et renvoie sa valeur.

Ici, nous divisons la chaîne en utilisant "" comme délimiteur et calculons la longueur du tableau résultant pour compter le nombre total de mots dans la chaîne. Dans le code, nous pouvons voir que nous pouvons exécuter la méthode countWords() avec n’importe quelle chaîne comme référence, tout comme les autres méthodes de chaîne.

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

Copier après la connexion

Exemple 4 (méthode par défaut du prototype de chaîne personnalisée)

Dans cet exemple, nous montrons comment personnaliser la méthode par défaut du prototype de chaîne. Ici, nous avons personnalisé la méthode toUpperCase(). Généralement, la méthode toUpperCase() renvoie une chaîne avec tous les caractères de chaîne convertis en majuscules.

Nous l'avons personnalisé pour renvoyer la chaîne uniquement après avoir converti le premier caractère en majuscule. Ici, nous renverrons la même chaîne si le premier caractère est déjà en majuscule. Sinon, nous convertissons le premier caractère en majuscule en utilisant la valeur ASCII.

Dans le résultat, nous pouvons voir que la méthode toUpperCase() convertit uniquement le premier caractère de la chaîne en majuscule au lieu de la chaîne entière.

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

Copier après la connexion

Les utilisateurs ont appris à utiliser les propriétés du prototype de chaîne. Nous pouvons l'utiliser pour ajouter des méthodes et des propriétés aux objets chaîne. De plus, nous pouvons l'utiliser pour personnaliser les propriétés et les méthodes des chaînes. Après avoir ajouté la méthode au prototype de chaîne, nous pouvons appeler la méthode en utilisant la chaîne comme référence.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!