Maison > Article > interface Web > Implémenter polyfill pour la méthode String.prototype.trim() en JavaScript

Implémenter polyfill pour la méthode String.prototype.trim() en JavaScript

PHPzavant: 2023-08-24 11:49:13954parcourir

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

Certaines anciennes versions de navigateurs ou anciens navigateurs eux-mêmes ne prennent pas en charge les fonctions nouvellement développées de JavaScript. Par exemple, si vous utilisez une très ancienne version du navigateur, celle-ci ne prend pas en charge les fonctionnalités de la version ES10 de JavaScript. Par exemple, certaines versions de navigateurs ne prennent pas en charge la méthode Array.falt() introduite dans la version ES10 de JavaScript pour aplatir les tableaux.

Dans ce cas, nous devons implémenter des méthodes définies par l'utilisateur pour prendre en charge les fonctionnalités des anciennes versions du navigateur. Ici, nous allons implémenter un polyfill pour la méthode trim() de l'objet String.

Grammaire

Les utilisateurs peuvent suivre la syntaxe ci-dessous pour utiliser des expressions régulières afin d'implémenter polyfill pour la méthode string.prototype.trim().

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

Dans la syntaxe ci-dessus, nous utilisons des expressions régulières pour remplacer les espaces au début et à la fin de la chaîne.

Expression régulière expliquée

^ - C'est le début de la chaîne.
s+ - représente un ou plusieurs espaces.
| - Cela signifie opérateur "OU".
s+$ - Il représente un espace au bout de la chaîne.
g - Il nous dit de supprimer toutes les correspondances.

Exemple (en utilisant la méthode string.trim() intégrée)

Dans l'exemple ci-dessous, nous avons utilisé la méthode trim() intégrée de l'objet String pour supprimer les espaces au début et à la fin de la chaîne.

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

Exemple (polyfill implémenté pour la méthode string.trim())

Dans l'exemple ci-dessous, nous avons implémenté un polyfill pour couper les chaînes à l'aide d'expressions régulières. Nous avons écrit une expression régulière pour remplacer les espaces de début et de fin par des chaînes vides.

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

Exemple

Dans l'exemple ci-dessous, nous utilisons une boucle for pour trouver l'index du premier et du dernier caractère valide d'une chaîne. Nous créons un tableau contenant différents caractères représentant des espaces. Après cela, la première boucle for parcourt les caractères de la chaîne, vérifie le premier caractère qui ne se trouve pas dans le tableau "espaces" et stocke cet index dans la variable de démarrage. De plus, il recherche le premier caractère valide du dernier caractère de la même manière.

Enfin, nous avons utilisé la méthode slice() pour obtenir la sous-chaîne commençant à la position "start" et se terminant à la position "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>

Les utilisateurs ont appris à implémenter un polyfill pour la méthode string.trim() dans ce tutoriel. Nous avons vu deux façons d'implémenter un polyfill pour la méthode trim(). La première méthode utilise des expressions régulières et la méthode replace(). La deuxième méthode est la méthode simple, utilisant les méthodes for loop, slice() et include().

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!

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

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Comment définir le niveau de qualité de la chaîne URL d'un objet IText à l'aide de FabricJS ?Article suivant：Comment définir le niveau de qualité de la chaîne URL d'un objet IText à l'aide de FabricJS ?

Articles Liés

Voir plus