Préparation pour Ecmascript 6: Nouvelles méthodes de chaîne - String.prototype. *

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

Nous développerons plusieurs exemples et mentionnerons les polyfills disponibles pour eux. N'oubliez pas que si vous souhaitez les polyfillons tous en utilisant une seule bibliothèque, vous pouvez utiliser ES6-SHIM par Paul Miller.

Les plats clés

• es6 introduit plusieurs nouvelles méthodes de manipulation de chaîne, y compris string.prototype.startswith (), string.prototype.endswith (), string.prototype.incluses (), string.prototype.repeat (), et string.raw ( ). Ces méthodes fournissent des moyens plus faciles et plus efficaces de vérifier si une chaîne démarre ou se termine par une sous-chaîne donnée, si une chaîne contient une certaine sous-chaîne, pour répéter une chaîne un nombre de fois spécifié et pour traiter les chaînes de modèle.
• le string.prototype.startswith () et string.prototype.endswith () dans ES6 vous permettent de vérifier si une chaîne démarre ou se termine par une sous-chaîne donnée. Ils acceptent tous les deux une sous-chaîne et une position de paramètres, et renvoient vrai ou faux selon que la chaîne démarre ou se termine par la sous-chaîne fournie.
• La méthode string.prototype. incluse () dans ES6 Renvoie True si une chaîne est contenue dans une autre chaîne, quelle que soit la position. Il accepte les mêmes paramètres que les méthodes startWith () et Endswith ().
• La méthode string.prototype.repeat () dans ES6 renvoie une nouvelle chaîne contenant la chaîne d'origine répétée un nombre spécifié de fois. La fonction string.raw () est une fonction de balise des chaînes de modèle qui compile une chaîne et remplace les espaces réservés par des valeurs fournies.

string.prototype.startswith ()

L'une des fonctions les plus utilisées de chaque langage de programmation moderne est celle à vérifier si une chaîne commence par une sous-chaîne donnée. Avant ES6, JavaScript n'avait pas une telle 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 polyvalent:

<span>if (typeof String.prototype.startsWith !== 'function') {
</span>  <span>String.prototype.startsWith = function (str){
</span>    <span>return this.indexOf(str) === 0;
</span>  <span>};
</span><span>}
</span>

ou, alternativement:

<span>if (typeof String.prototype.startsWith !== 'function') {
</span>  <span>String.prototype.startsWith = function (str){
</span>    <span>return this.substring(0, str.length) === str;
</span>  <span>};
</span><span>}
</span>

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:

<span>String.prototype.startsWith(searchString[, position]);
</span>

Vous pouvez voir qu'en plus d'une sous-chaîne, il accepte un deuxième argument. Le paramètre SearchString spécifie la sous-chaîne que vous souhaitez vérifier est le début de la chaîne. La position indique la position pour démarrer la recherche. La valeur par défaut de la position est 0. Les méthodes renvoient True si la chaîne commence par la sous-chaîne fournie et fausse autrement. N'oubliez pas que la méthode est sensible à la casse, donc «bonjour» est différent de «bonjour».

Un exemple d'utilisation de cette méthode est illustré ci-dessous:

<span>if (typeof String.prototype.startsWith !== 'function') {
</span>  <span>String.prototype.startsWith = function (str){
</span>    <span>return this.indexOf(str) === 0;
</span>  <span>};
</span><span>}
</span>

Une démo en direct du code précédent est présentée ci-dessous et également disponible sur jsbin.

La méthode est prise en charge dans Node et tous les navigateurs modernes, à l'exception d'Internet Explorer. Si vous devez prendre en charge les 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 présente la 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 ():

<span>if (typeof String.prototype.startsWith !== 'function') {
</span>  <span>String.prototype.startsWith = function (str){
</span>    <span>return this.substring(0, str.length) === str;
</span>  <span>};
</span><span>}
</span>

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 le paramètre de position vous permet de rechercher dans la chaîne comme si la chaîne n'était que si longue. En d'autres termes, si nous avons la maison à cordes et que nous appelons la méthode avec 'house'.endswith (' us ', 4), nous obtenons vrai, car c'est comme si nous avions réellement le linge (notez le «E» manquant)) .

Un exemple d'utilisation de cette méthode est illustré ci-dessous:

<span>String.prototype.startsWith(searchString[, position]);
</span>

Une démo en direct de l'extrait précédent est illustrée ci-dessous et est également disponible sur jsbin.

La méthode est prise en charge dans Node et tous les navigateurs modernes, à l'exception d'Internet Explorer. Si vous devez prendre en charge les 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.incluses ()

Bien que nous parlons de vérifier si une chaîne est contenue dans une autre, permettez-moi de vous présenter la méthode String.prototype.cluds (). Il renvoie vrai si une chaîne est contenue dans un autre, peu importe où, et faux sinon.

sa syntaxe est illustrée ci-dessous:

<span>const str = 'hello!';
</span><span>let result = str.startsWith('he');
</span>
<span>// prints "true"
</span><span>console.log(result);
</span>
<span>// verify starting from the third character
</span>result <span>= str.startsWith('ll', 2);
</span>
<span>// prints "true"
</span><span>console.log(result);
</span>

La signification des paramètres est la même que pour string.prototype.startswith (), donc je ne les répéterai pas. Un exemple d'utilisation de cette méthode est illustré ci-dessous:

<span>String.prototype.endsWith(searchString[, position]);
</span>

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

string.prototype.includs () est pris en charge dans le nœud et tous les navigateurs modernes, à l'exception d'Internet Explorer. Si vous devez prendre en charge les navigateurs plus âgés, comme avec les autres méthodes discutées dans ce tutoriel, vous pouvez trouver un polyfill fourni par Mathias Bynens (ce gars sait faire son travail!) Et un autre sur le réseau de développeurs Mozilla.

Remarque: Jusqu'à la version 48, Firefox utilise le nom non standard contient.

string.prototype.repeat ()

Passons maintenant à 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 qu'elle a été appelée mais a répété un nombre spécifié de fois. La syntaxe de cette méthode est la suivante:

<span>if (typeof String.prototype.startsWith !== 'function') {
</span>  <span>String.prototype.startsWith = function (str){
</span>    <span>return this.indexOf(str) === 0;
</span>  <span>};
</span><span>}
</span>

Le paramètre Times 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 infinité, vous obtiendrez un RangeError.

Un exemple d'utilisation de cette méthode est illustré ci-dessous:

<span>if (typeof String.prototype.startsWith !== 'function') {
</span>  <span>String.prototype.startsWith = function (str){
</span>    <span>return this.substring(0, str.length) === str;
</span>  <span>};
</span><span>}
</span>

Une démo en direct du code précédent est présentée ci-dessous et est également disponible sur jsbin.

La méthode est prise en charge dans Node et tous les navigateurs modernes, à l'exception d'Internet Explorer. Si vous devez prendre en charge les navigateurs plus anciens, deux polyfills sont disponibles pour cette méthode: celle développée par Mathias Bynens et une autre sur le réseau de développeurs Mozilla.

string.raw ()

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

sa syntaxe est la suivante (notez les backticks):

<span>String.prototype.startsWith(searchString[, position]);
</span>

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

Pour mieux comprendre ce concept, voyons un exemple concret:

<span>const str = 'hello!';
</span><span>let result = str.startsWith('he');
</span>
<span>// prints "true"
</span><span>console.log(result);
</span>
<span>// verify starting from the third character
</span>result <span>= str.startsWith('ll', 2);
</span>
<span>// prints "true"
</span><span>console.log(result);
</span>

Une démo en direct du code précédent est présentée ci-dessous et est également disponible sur jsbin.

La méthode est prise en charge dans le nœud et tous les navigateurs modernes, à l'exception de l'opéra et de l'explorateur Internet. Si vous devez prendre en charge les navigateurs plus âgés, vous pouvez utiliser un polyfill, comme celui disponible sur NPM.

Conclusion

Dans ce tutoriel, vous avez appris plusieurs nouvelles méthodes introduites dans ECMAScript 6 qui fonctionnent avec les chaînes. D'autres méthodes que nous n'avons pas couvertes 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.

Des questions fréquemment posées sur les méthodes de chaîne ES6

Quelles sont les nouvelles méthodes de chaîne introduites dans ES6?

ES6, également connues sous le nom d'ECMascript 2015, ont introduit plusieurs nouvelles méthodes de chaîne pour rendre la manipulation de chaîne plus facile et plus efficace. Ceux-ci incluent des méthodes comme StartWith (), Endswith (), Incluls (), Repeat () et les littéraux de modèle. La méthode startSwith () vérifie si une chaîne démarre avec une chaîne spécifiée, tandis que Endswith () vérifie si une chaîne se termine par une chaîne spécifiée. La méthode incluse () vérifie si une chaîne contient une chaîne spécifiée. La méthode répétitive () répète une chaîne un nombre de fois spécifié. Les modèles littéraux vous permettent d'incorporer des expressions dans des littéraux de chaîne, en utilisant $ {} syntaxe.

Comment fonctionne la méthode startSwith () dans ES6?

La méthode startSwith () dans ES6 est utilisée pour déterminer si une chaîne commence par les caractères d'une chaîne spécifiée. Il renvoie True si la chaîne démarre avec la chaîne spécifiée et false autrement. La syntaxe est str.startswith (SearchString [, position]). Le SearchString est les personnages à rechercher au début de STR. La position, qui est facultative, est la position dans la chaîne où la recherche doit démarrer. Si elle est omise, la recherche démarre au début de la chaîne.

Quelle est la méthode Endswith () dans ES6?

La méthode Endswith () dans ES6 est utilisée pour déterminer si une chaîne se termine avec les caractères d'une chaîne spécifiée. Il renvoie True si la chaîne se termine avec la chaîne spécifiée et false autrement. La syntaxe est str.endswith (SearchString [, longueur]). Le SearchString est les personnages à rechercher à la fin de Str. La longueur, qui est facultative, est la longueur de la chaîne à rechercher. Si elle est omise, la longueur de la chaîne est utilisée.

Comment fonctionne la méthode incluse () dans ES6?

La méthode incluse () dans ES6 est utilisée pour déterminer si une chaîne peut être trouvé dans une autre chaîne. Il renvoie true si la chaîne contient la chaîne spécifiée et false autrement. La syntaxe est str.incluses (SearchString [, position]). Le SearchString est la chaîne à rechercher. La position, qui est facultative, est la position au sein de la chaîne pour commencer la recherche. En cas d'omission, la recherche commence au début de la chaîne.

Quelle est la méthode repeat () dans ES6?

La méthode repeat () dans les constructions ES6 et renvoie une nouvelle chaîne qui contient Le nombre spécifié de copies de la chaîne sur laquelle elle a été appelée, concaténée ensemble. La syntaxe est str.repeat (count), où le nombre est le nombre de fois pour répéter la chaîne. Le nombre doit être compris entre 0 et moins que l'infini et ne pas être un nombre négatif.

Comment fonctionnent les littéraux des modèles dans ES6?

Les littéraux des modèles dans ES6 sont-ils des littéraux de chaîne permettant des expressions intégrées. Vous pouvez utiliser des chaînes multi-lignes et des fonctionnalités d'interpolation de chaîne avec eux. Ils sont enfermés par le caractère backtick () au lieu de citations doubles ou simples. Les modèles littéraux peuvent contenir des espaces réservés, indiqués par le signe du dollar et les accolades bouclées ($ {expression}). Les expressions dans les espaces réservées et le texte entre elles sont transmises à une fonction.

Quelle est la différence entre incluse () et indexof () dans es6?

Les deux incluent () et l'index ( ) Les méthodes sont utilisées pour vérifier si une chaîne contient une chaîne spécifiée. Cependant, il y a une différence clé entre eux. La méthode incluse () renvoie une valeur booléenne - true si la chaîne contient la chaîne spécifiée et false autrement. D'un autre côté, la méthode indexof () renvoie l'index de la première occurrence de la chaîne spécifiée, ou -1 si la chaîne n'est pas trouvée.

Puis-je utiliser des méthodes de chaîne ES6 dans tous les navigateurs?

La plupart des navigateurs modernes prennent en charge les méthodes de chaîne ES6. Cependant, pour les navigateurs plus anciens qui ne prennent pas en charge ES6, vous devrez peut-être utiliser un transpillé comme Babel pour convertir le code ES6 en ES5, qui est plus largement pris en charge.

Comment puis-je utiliser des méthodes de chaîne ES6 avec des tableaux?

Certaines méthodes de chaîne ES6 peuvent être utilisées avec les tableaux. Par exemple, la méthode incluse () peut être utilisée pour déterminer si un tableau contient un certain élément. Cependant, toutes les méthodes de chaîne ne sont pas applicables aux tableaux. Il est important de comprendre l'utilisation et les limitations spécifiques de chaque méthode.

Que sont les littéraux de modèle tagués dans ES6?

Les littéraux de modèle tagués dans ES6 sont une forme plus avancée de littéraux de modèle. Avec des modèles marqués, vous pouvez analyser les littéraux des modèles avec une fonction. Le premier argument d'une fonction de balise contient un tableau de valeurs de chaîne. Les arguments restants sont liés aux expressions. La fonction de balise peut ensuite effectuer des opérations sur ces arguments et retourner la chaîne manipulée.

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!