Fermer

avril 6, 2018

Nouvelles méthodes de chaîne – String.prototype. *


Dans mon article précédent sur les méthodes de tableau ES6 j'ai présenté les nouvelles méthodes disponibles dans ECMAScript 6 qui fonctionnent avec le type Array . Dans ce tutoriel, vous découvrirez les nouvelles méthodes ES6 qui fonctionnent avec les chaînes: String.prototype. *

Nous allons développer plusieurs exemples, et mentionner les polyfills disponibles pour eux. Rappelez-vous que si vous voulez les polyfiler en utilisant une seule bibliothèque, vous pouvez utiliser es6-shim par Paul Miller .

String.prototype.startsWith ()

One des fonctions les plus utilisées dans chaque langage de programmation moderne est celle qui vérifie si une chaîne commence avec une sous-chaîne donnée. Avant ES6, JavaScript n'avait pas cette fonction, ce qui signifie que vous deviez l'écrire vous-même. Le code suivant montre comment les développeurs l'ont généralement polyfilled:

 if (typeof String.prototype.startsWith! == 'function') {
  String.prototype.startsWith = function (str) {
    renvoie this.indexOf (str) === 0;
  }
}

Ou, alternativement:

 if (typeof String.prototype.startsWith! == 'function') {
  String.prototype.startsWith = function (str) {
    renvoie this.substring (0, str.length) === str;
  }
}

Ces extraits sont toujours valides, mais ils ne reproduisent pas exactement ce que fait la méthode String.prototype.startsWith () nouvellement disponible. La nouvelle méthode a la syntaxe suivante:

 String.prototype.startsWith (searchString [, position]);

Vous pouvez voir que, en plus d'une sous-chaîne, il accepte un second argument. Le paramètre searchString spécifie la sous-chaîne que vous voulez vérifier est le début de la chaîne. position indique la position à partir de laquelle commencer la recherche. La valeur par défaut de la position est 0. Les méthodes renvoie true si la chaîne commence avec la sous-chaîne fournie et false sinon. Souvenez-vous que la méthode est sensible à la casse, donc "Hello" est différent de "bonjour".

Voici un exemple d'utilisation de cette méthode:

 const str = 'hello!';
Laisser result = str.startsWith ('he');

// imprime "vrai"
console.log (résultat);

// vérifie à partir du troisième caractère
résultat = str.startsWith ('ll', 2);

// imprime "vrai"
console.log (résultat);

Une démo en direct du code précédent est montrée ci-dessous et également disponible chez JSBin .

ES6 en action: Nouvelles méthodes de chaîne sur jsbin.com

La méthode est supporté dans Node et tous les navigateurs modernes, à l'exception d'Internet Explorer. Si vous avez besoin de supporter des navigateurs plus anciens, un polyfill pour cette méthode peut être trouvé dans la page de la méthode sur MDN . Un autre polyfill a également été développé par Mathias Bynens.

String.prototype.endsWith ()

En plus de String.prototype.startsWith () ECMAScript 6 introduit le Méthode String.prototype.endsWith () . Il vérifie qu'une chaîne se termine avec une sous-chaîne donnée. La syntaxe de cette méthode, illustrée ci-dessous, est très similaire à String.prototype.startsWith () :

 String.prototype.endsWith (searchString [, position]);

Comme vous pouvez le voir, cette méthode accepte les mêmes paramètres que String.prototype.startsWith () et renvoie également le même type de valeurs.

Une différence est que la position Le paramètre vous permet de rechercher dans la chaîne comme si la chaîne n'était que longue. En d'autres termes, si nous avons la chaîne maison et nous appelons la méthode avec 'house'.endsWith (' us ', 4) nous obtenons true , parce que c'est comme si nous avions la chaîne hous (notez le "e" manquant).

Voici un exemple d'utilisation de cette méthode:

 const str = 'hello!';
const result = str.endsWith ('lo!');

// imprime "vrai"
console.log (résultat);

// vérifie comme si la chaîne était "enfer"
résultat = str.endsWith ('lo!', 5);

// imprime "faux"
console.log (résultat);

Une démo en direct de l'extrait précédent est montrée ci-dessous et est également disponible chez JSBin .

ES6 en action: Nouvelles méthodes de chaîne sur jsbin.com

La méthode est supportée dans Node et tous les navigateurs modernes, à l'exception d'Internet Explorer. Si vous avez besoin de supporter des navigateurs plus anciens, un polyfill pour cette méthode peut être trouvé dans la page de la méthode sur MDN . Un autre polyfill a été développé par Mathias Bynens

String.prototype.includes ()

Alors que nous parlons de vérifier si une chaîne est contenue dans une autre, permettez-moi de vous présenter le String.prototype.includes () méthode. Elle renvoie true si une chaîne est contenue dans une autre, peu importe où, et false sinon

Sa syntaxe est indiquée ci-dessous:

 String.prototype.includes (searchString [, position]);

La signification des paramètres est la même que pour String.prototype.startsWith () donc je ne les répéterai pas. Voici un exemple d'utilisation de cette méthode:

 const str = 'Bonjour à tous, je m'appelle Aurelio De Rosa.';
let result = str.include ('Aurelio');

// imprime "vrai"
console.log (résultat);

résultat = str.includes ('Bonjour', 10);

// imprime "faux"
console.log (résultat);

Vous pouvez trouver une démo en direct ci-dessous et aussi comme à JSBin .

ES6 en Action: Nouvelles Méthodes de Chaîne sur jsbin.com

String. prototype.includes () est supporté par Node et tous les navigateurs modernes, à l'exception d'Internet Explorer. Si vous avez besoin de supporter des navigateurs plus anciens, comme avec les autres méthodes discutées dans ce tutoriel, vous pouvez trouver un polyfill fourni par Mathias Bynens (ce mec sait comment faire son travail!) Et un autre sur le réseau des développeurs Mozilla .

Note: jusqu'à la version 48, Firefox utilise le nom non-standard contient .

String.prototype.repeat ()

Voyons maintenant passer à un autre type de méthode. String.prototype.repeat () est une méthode qui renvoie une nouvelle chaîne contenant la même chaîne que celle à laquelle elle a été appelée mais répétée un nombre de fois spécifié. La syntaxe de cette méthode est la suivante:

 String.prototype.repeat (times);

Le paramètre fois indique le nombre de fois que la chaîne doit être répétée. Si vous passez zéro, vous obtiendrez une chaîne vide, tandis que si vous passez un nombre négatif ou un infini, vous obtiendrez un RangeError .

Voici un exemple d'utilisation de cette méthode:

 const str = 'bonjour';
Laisser result = str.repeat (3);

// affiche "hellohellohello"
console.log (résultat);

résultat = str.repeat (0);

// imprime ""
console.log (résultat);

Une démo en direct du code précédent est montrée ci-dessous et est également disponible chez JSBin .

ES6 en action: Nouvelles méthodes de chaîne sur jsbin.com

La méthode est supportée dans Node et tous les navigateurs modernes, à l'exception d'Internet Explorer. Si vous avez besoin de supporter des navigateurs plus anciens, deux polyfills sont disponibles pour cette méthode: celui développé par Mathias Bynens et un autre sur le réseau de développeurs Mozilla .

String.raw ()

La dernière méthode que je veux aborder dans ce tutoriel est String.raw () . Il est défini comme une fonction d'étiquette de chaînes de modèle . C'est intéressant, parce que c'est un peu un remplacement pour les bibliothèques de modèles, bien que je ne sois pas sûr à 100% qu'il peut suffisamment évoluer pour remplacer ces bibliothèques. Cependant, l'idée est fondamentalement la même que nous verrons bientôt. Ce qu'il fait est de compiler une chaîne et de remplacer chaque espace réservé par une valeur fournie.

Sa syntaxe est la suivante (notez les guillemets):

 String.raw`templateString`

Le paramètre templateString représente la chaîne contenant le modèle à traiter

Pour mieux comprendre ce concept, voyons un exemple concret:

 const name = 'Aurelio De Rosa';
const result = String.raw`Hello, mon nom est $ {name} `;

// affiche "Bonjour, je m'appelle Aurelio De Rosa" parce que $ {name}
// a été remplacé par la valeur de la variable name
console.log (résultat);

Une démo en direct du code précédent est montrée ci-dessous et est également disponible chez JSBin .

ES6 en action: Nouvelles méthodes de chaîne sur jsbin.com

La méthode est supportée dans Node et tous les navigateurs modernes, à l'exception d'Opera et d'Internet Explorer. Si vous avez besoin de supporter des navigateurs plus anciens, vous pouvez utiliser un polyfill, tel que celui disponible sur npm .

Conclusion

Dans ce tutoriel, vous avez appris plusieurs nouvelles méthodes introduites dans ECMAScript 6 qui fonctionnent avec des cordes. D'autres méthodes que nous n'avons pas couvert sont String.fromCodePoint () String.prototype.codePointAt () et String.prototype.normalize () . J'espère que vous avez apprécié l'article et que vous continuerez à suivre notre chaîne pour en savoir plus sur ECMAScript 6.