includes() en JavaScript : savoir si une valeur ou un texte est présent

includes répond par vrai ou faux à la question de la présence, dans un tableau comme dans une chaîne, en tenant compte de la casse.
3 min de lecture
Believemy logo

Vérifier qu'un rôle figure dans une liste de permissions, qu'un mot apparaît dans un titre, qu'une extension fait partie des formats acceptés : la question de la présence revient partout, et elle mérite une réponse en une ligne.

includes rend un booléen, rien d'autre. C'est ce qui le rend lisible là où indexOf() obligeait à comparer un nombre.


Définition

includes existe à la fois sur Array (tableau) et sur String (chaîne de caractères). Sur un tableau, il cherche une valeur parmi les éléments. Sur une chaîne, il cherche une suite de caractères n'importe où dans le texte.

JAVASCRIPT
const roles = ["ROLE_USER", "ROLE_ADMIN"];

console.log(roles.includes("ROLE_ADMIN"));  // true
console.log(roles.includes("ROLE_MENTOR")); // false

const phrase = "Le glossaire JavaScript de Believemy";
console.log(phrase.includes("JavaScript"));  // true
console.log(phrase.includes("javascript"));  // false, la casse compte

Un second argument facultatif indique la position à partir de laquelle chercher : roles.includes("ROLE_USER", 1) rend false, puisque la recherche démarre après cet élément.


La casse, et comment l'ignorer

La comparaison est exacte, majuscules comprises. Pour une recherche insensible à la casse, mettez les deux côtés dans la même forme avant de comparer.

JAVASCRIPT
const titre = "Formation JavaScript";
const recherche = "javascript";

console.log(titre.includes(recherche));  // false
console.log(titre.toLowerCase().includes(recherche.toLowerCase()));  // true
Bon à savoir

Sur du texte saisi par un visiteur, ajoutez String.trim() avant la comparaison. Un espace collé par un copier-coller suffit à faire échouer une recherche pourtant correcte, et personne ne le voit à l'écran.


Ce qu'il trouve, et ce qu'il ne trouve pas

La comparaison suit les règles de l'Égalité stricte (===), avec une exception utile : contrairement à ===, includes reconnaît NaN.

JAVASCRIPT
console.log([NaN].includes(NaN));  // true
console.log([NaN].indexOf(NaN));   // -1

const utilisateurs = [{ id: 7 }];
console.log(utilisateurs.includes({ id: 7 }));  // false
console.log(utilisateurs.some((u) => u.id === 7));  // true

Deux objets écrits pareil restent deux objets différents, chacun avec sa propre adresse en mémoire : c'est la distinction entre Référence et valeur. Pour chercher un objet sur un critère, Array.some() ou Array.find() sont les bonnes méthodes.


Questions fréquentes

Question

includes ou indexOf() ?

includes quand seule la présence compte, indexOf() quand la position est nécessaire. Le premier évite la comparaison à -1, source d'inversions de logique. Le second reste utile pour découper une chaîne à partir d'un repère.


Question

Est-ce coûteux sur une grande liste ?

Le tableau est parcouru élément par élément, donc le coût grandit avec sa taille. Sur quelques centaines de valeurs, la question ne se pose pas. Sur des dizaines de milliers, et surtout dans une boucle, chargez les valeurs dans un Set : sa méthode has répond sans parcourir.


Question

Comment vérifier plusieurs valeurs d'un coup ?

En retournant la question avec Array.some() : formats.some((f) => nomFichier.endsWith(f)) teste une liste d'extensions contre un seul nom. La même écriture sert à vérifier qu'un utilisateur possède au moins un rôle parmi plusieurs.

Termes connexes

Découvrez notre glossaire JavaScript

Tous les mots de JavaScript expliqués simplement : mots-clés, objets natifs, méthodes, erreurs et concepts. Définitions claires et exemples qui tournent, pour apprendre et pour se dépanner.

Partager cet article

Tu veux nous aider ? Fais un lien vers cet article sur tes réseaux ou encore mieux : sur ton site, dans un article ou dans ta newsletter.