Techniques d'utilisation avancées pour les fonctions Split et Join en JavaScript

JavaScript possède deux fonctions assez puissantes et populaires parmi les développeurs: Split and Rewing. Ces deux fonctions peuvent échanger les types de chaînes et de tableaux, c'est-à-dire que les tableaux peuvent être sérialisés en chaînes, et vice versa. Nous pouvons jouer complètement ces deux fonctions. Explorons ici quelques applications intéressantes. Tout d'abord, présentons ces deux fonctions:

String.prototype.split (séparateur, limite)

Le séparateur divise la chaîne en un tableau et la limite de paramètre facultative définit la longueur maximale du tableau généré.

 "85 @@ 86 @@ 53" .split ('@@'); // ['85', '86', '53']; "banane" .split (); //["banane"]; // (merci Peter (-:) "président, Sénat, maison" .split (',', 2); // ["président", "Sénat"] array.prototype.join (séparateur)

Le séparateur de paramètres facultatif convertit le tableau en une chaîne. Si le séparateur n'est pas fourni, la virgule sera utilisée comme valeur de paramètre (tout comme la fonction de tostring du tableau).

 ["Slugs", "escargots", "Tails de Puppy Dogs"]. JOIN ('et'); // "Slugs and Snails and Puppy Dog's Tails" ['Giants', 4, 'Rangers', 1] .join (''); // "Giants 4 Rangers 1" [1962,1989,2002.2010] .join ();

Voici quelques-unes des applications:

remplacer

Cette fonction simple n'est pas comme la fonction de remplacement native, elle peut être remplacée comme une sous-chaîne globale sans utiliser d'expressions régulières.

 String.prototype.replaceALL = fonction (find, remplacewith) {return this.split (find) .join (remplaceWith); } "L'homme et le plan" .replaceALL ('The', 'A'); // "Un homme et un plan"

Pour les petites chaînes, il est un peu plus faible que les fonctions natives remplacées par un seul caractère (se réfère ici à deux fonctions supplémentaires d'une expression régulière), mais sous Mozilla, si le caractère dépasse 2 ou 3 caractères, cette fonction d'utilisation s'exécute plus rapidement que l'expression régulière.

Événements

Cette fonction peut faire correspondre le nombre de sous-chaînes. De plus, ce type de fonction est très direct et ne nécessite pas de régularité.

 String.prototype.occurences = function (find, matchcase) {var text = this; Matchcase || (find = find.tolowerCase (), text = text.tolowercase ()); return text.split (find) .length-1; } document.body.innerhtml.occurences ("div"); // La page d'accueil de Google a 114Document.body.innerhtml.occurences ("/ div"); // La page d'accueil de Google a 57 "Angleterre engage ses ingénieurs" .occurrences ("Eng", true); // 2repeat

Cette fonction est empruntée à Prototype.js:

 String.prototype.repeat = function (times) {return nouveau tableau (fois + 1) .join (this); } "Go" .repeat (3) + "Giants!"; // "va aller géants!"

La beauté de celui-ci réside dans l'utilisation de la fonction de jointure. L'accent est mis sur cette valeur de paramètre de séparateur, puis ce tableau de base ne contient que des valeurs de valeur non définies. Pour illustrer cela plus clairement, recréons l'exemple ci-dessus:

 [non défini, indéfini, indéfini, indéfini] .join ("go") + "Giants

N'oubliez pas qu'avant de joindre, chaque élément de tableau sera converti en chaîne (voici une chaîne vide). L'application de cette fonction de répétition est l'une des rares applications injustifiées qui définissent les tableaux via des littéraux de tableau.

Utiliser le paramètre limite

J'utilise rarement la limite des paramètres facultatifs de la fonction divisée. Voici un exemple utilisant cette limite:

 var getDomain = fonction (url) {return url.split ('/', 3) .join ('/');} getDomain ("http://www.aneventapart.com/2010/seattle/slides/"); // "http: //www.anev entapart.com "GetDomain (" https://addons.mozilla.org/en-us/firefox/bookmarks/ "); //" https://addons.mozilla.org "

Modifier les membres numériques

Si nous mélangeons les habitués ensemble, rejoindre et se séparer peut facilement modifier les membres du tableau. Cependant, cette fonction n'est pas aussi difficile que l'imaginaire. Sa fonction principale est de supprimer la chaîne spécifiée devant chaque membre du tableau donné.

 var beffeadMembers = function (arr, removestr) {var regex = regexp ("[,]?" + removestr); return arr.join (). Split (regex) .slice (1);} // faire un tableau contenant uniquement la partie numérique des numéros de vol BeheadMembers (["BA015", "BA129", "BA130"]; // ["015", "129", "130"]

Malheureusement, cette fonction échoue dans IE car ils suppriment par erreur le premier membre vide de Split. Maintenant, corrigeons cette fonction:

 var beffeadMembers = function (arr, removestr) {var regex = regexp ("[,]?" + removestr); var result = arr.join (). Split (regex); RETOUR RÉSULTAT [0] && Résultat || résultat.slice (1); // ie solution}

Pourquoi utilisons-nous cette technique au lieu de la fonction de carte du tableau dans EMaScript 5?

 ["BA015", "BA129", "BA130"]. Map (fonction (e) {return e.replace ('ba', '')}); // ["015", "129", "130"]

Dans une utilisation réelle, lorsqu'elle est possible, j'utilise généralement la fonction de carte native (non disponible ci-dessous, c'est-à-dire <9). L'exemple suivant n'est utilisé que comme outil d'apprentissage, mais il convient de noter que la syntaxe d'appel de jointure et de division est plus concise et directe. Plus intéressant, il est également très efficace, en particulier pour les petits tableaux, ce qui est plus efficace en FF et Safari. Pour les grands tableaux, les fonctions de carte conviennent plus. (Dans tous les navigateurs), il y aura moins d'appels de fonctions pour joindre et diviser les fonctions.

 // Test 1 - Utilisation de jointure / splitvar arr = [], x = 1000; while (x--) {arr.push ("ba" + x);} var beffembers = function (arr, regex) {return arr.join (). Split (regex) .slice (1);} var regex = regexp ("[,]?" + 'ba'); 1000; while (y--) {MeadMembers (arr, regex);}; + nouvelle date - temporisateur; // ff 3,6 733ms // ch 7 464ms // sa 5 701ms // c'est-à-dire 8 1256m Date, y = 1000; while (y--) {arr.map (fonction (e) {return e.replace ('ba', '')});} + nouvelle date - tempore

Correspondance de motifs

Les tableaux doivent constamment effectuer une correspondance de motifs, mais pas les chaînes. Des expressions régulières peuvent être utilisées dans les chaînes, mais pas dans les tableaux. La puissance de convertir les tableaux en chaînes pour l'appariement des motifs est bien au-delà de la portée de cet article. Jetons un coup d'œil à une application simple.

Supposons que les résultats de la course de la course doivent être enregistrés dans le tableau. Le but est de placer les candidats et leur temps d'enregistrement alternativement dans un tableau. Nous pouvons utiliser des expressions de jointure et régulières pour vérifier si ce modèle de stockage est correct. Le code suivant est de découvrir le temps d'enregistrement manqué en recherchant deux noms consécutifs.

 Var Results = ['Sunil', '23: 09 ',' Bob ', '22: 09', 'Carlos', 'Mary', '22: 59 ']; var baddata = result.join (', '). Match (/ [a-za-z] +, [a-za-z] + / g); baddata; // ["Carlos, Mary"]