Performance JavaScript - .test() vs .search()

Question

Si j'ai besoin de voir si une certaine valeur est dans une chaîne, vaut-il mieux utiliser la méthode .test() ou la méthode .search()?

Exemple avec .search():

var myRegExp = '/Orange/', 
    myString = 'This is a string with the word "Orange."'; 

if(myString.search(myRegExp) != -1) { 
    // Do code here 
} 

Exemple avec .test():

var myRegExp = '/Orange/', 
    myString = 'This is a string with the world "Orange."'; 

if(myRegExp.test(myString)) { 
    // Do code here 
} 

En fin de compte, ce que je fais est à la recherche d'un nom de classe spécifique dans la chaîne. L'élément contiendrait plusieurs classes, donc je devrais trouver si l'une des classes est dedans.

Exemple de balisage:

<ul> 
    <li class="expandable expanded"> 
     <ul> 
      <li>Text</li> 
     </ul> 
    <li> 
    <li class="expandable collapsed"> 
     <ul> 
      <li>Text</li> 
     </ul> 
    </li> 
</ul> 

Alors, j'ajoute un événement click pour les éléments de la liste, si elles ont le nom de classe « élargi » dont ils ont besoin de se comporter d'une façon, si elles ont le nom de classe "effondrés" ils ont besoin de se comporter une autre.

Donc, essentiellement, quelque chose comme ça.

element.addEventListener('click',function(e) { 
    if(/* e.target has class name of expanded */) { 
     // Do certain code 
    } else { 
     // Do other code 
    } 
} 

J'utilise jQuery, et je suis ouvert aux suggestions, mais je me sens cette situation serait mieux servie avec le javascript natif. Alors, quelle méthode donnerait la meilleure performance? Ou y a-t-il une autre méthode qui serait encore meilleure?

Answer 1

Eh bien, si vous utilisez jQuery, vous pouvez le faire simplement avec

element.addEventListener('click',function(e) { 
    if($(e.target).hasClass('expanded') { 
     // Do certain code 
    } else { 
     // Do other code 
    } 
} 

Si vous ne voulez pas créer un objet jQuery pour une raison quelconque (par exemple la performance), vous pouvez utiliser cette fonction, adaptée de la source de $().hasClass():

function hasClass (el, selector) { 
    var className = " " + selector + " "; 

    if ((" " + el.className + " ").replace(/[\n\t]/g, " ").indexOf(className) > -1) { 
     return true; 
    } 

    return false; 
} 

Vous pouvez appeler cela comme si:

if (hasClass(e.target, 'expanded')) { 

Personnellement, je voudrais aller à l'approche jQuery si vous l'avez déjà chargé. Test() renvoie la valeur true ou false.

Answer 2

search() renvoie la position de la correspondance, ou -1 si aucune correspondance n'est trouvée. Donc, je pense que test() serait plus rapide.

Answer 3

J'ai eu la même question, après avoir fait quelques lectures, j'ai identifié que l'utilisation de la méthode de chaîne natif indexOf est la meilleure méthode sur les perspectives de performance. Ce test preuves que aussi. Donc, manière appropriée serait

var searchStr = 'Orange', 
    myString = 'This is a string with the world "Orange."'; 

if(myString.indexOf(searchStr) != -1) { 
    // Do code here 
} 

Bien que cette question est un peu vieux, il est toujours utile. J'ai trouvé que this question a aussi de bonnes explications.