Vérification de chaîne vide, null et undefined en JavaScript : guide complet

Formateur Python en ligne pour débutants

Apprenez Python facilement sans surcharge théorique. Résolvez des tâches pratiques avec vérification automatique et écrivez du code directement dans le navigateur.

Start Course

Introduction : pourquoi cette tâche est plus simple qu'il n'y paraît

\n\n

Chaque développeur qui a écrit ne serait-ce qu'une fois en JavaScript a été confronté à une situation où il faut vérifier si une chaîne est vide, ou peut-être s'il s'agit de null ou undefined. Cela semble simple, non ? Mais soyons honnêtes : combien de fois avez-vous écrit if (str == "") et obtenu un bug lorsque la variable s'avérait être null ? Et combien de fois avez-vous essayé d'appeler .trim() sur undefined et attrapé une erreur rouge dans la console ?

\n\n

Ce sujet est l'une des questions les plus populaires sur Stack Overflow avec des dizaines de milliers de vues. Et ce n'est pas pour rien. JavaScript comporte de nombreuses nuances qui transforment une simple vérification en un champ de mines. Dans cet article, nous allons analyser toutes les façons possibles, des plus évidentes aux plus professionnelles, et déterminer laquelle est la meilleure à utiliser dans votre projet.

\n\n

Nous parlerons de ce que sont les valeurs falsy, comment fonctionnent les opérateurs == et ===, et pourquoi "" et 0 ne sont pas la même chose que false. À la fin de cet article, vous saurez exactement comment écrire une vérification universelle qui ne vous laissera pas tomber.

\n\n

Le problème : qu'est-ce qu'une chaîne "vide" ?

\n\n

Avant d'écrire du code, il faut définir clairement ce que nous vérifions. Dans le contexte de la question "How do I check for an empty/undefined/null string in JavaScript?", nous entendons généralement trois états :

\n\n
    \n
  • Chaîne vide ("" ou '') — une chaîne de longueur nulle.
  • \n
  • null — absence intentionnelle de valeur.
  • \n
  • undefined — variable déclarée mais non initialisée.
  • \n
\n\n

Mais il existe un quatrième cas implicite : une chaîne composée uniquement d'espaces (" "). Souvent, celle-ci est également considérée comme "vide" du point de vue de la logique métier. Nous analyserons toutes les variantes.

\n\n

Méthode 1 : Conversion logique (la plus simple)

\n\n

La façon la plus populaire et concise est d'utiliser le fait que JavaScript convertit automatiquement les valeurs en true ou false dans un contexte logique.

\n\n
let str = "";\n\nif (!str) {\n    console.log("La chaîne est vide, null ou undefined");\n} else {\n    console.log("La chaîne n'est pas vide");\n}\n
\n\n

Ce code fonctionnera pour "", null, undefined, 0, NaN et false. Pourquoi ? Parce que toutes ces valeurs sont considérées comme falsy en JavaScript. Si vous êtes sûr que la variable est une chaîne (ou peut être null/undefined), cette méthode est suffisante.

\n\n

Mais il y a un piège : si la variable est égale à 0 (un nombre), la vérification dira aussi "vide". Si cela est critique, cette méthode ne convient pas.

\n\n

Méthode 2 : Comparaison stricte (contrôle explicite)

\n\n

Si vous voulez être le plus précis possible et ne vérifier que les trois états mentionnés, utilisez la comparaison stricte (===).

\n\n
function isEmptyOrNull(str) {\n    return str === "" || str === null || str === undefined;\n}\n\nconsole.log(isEmptyOrNull(""));      // true\nconsole.log(isEmptyOrNull(null));    // true\nconsole.log(isEmptyOrNull(undefined)); // true\nconsole.log(isEmptyOrNull("hello")); // false\nconsole.log(isEmptyOrNull(0));       // false (le nombre ne passe pas)\n
\n\n

Ce code fonctionne sans surprises. Il ne confond pas 0 ou false avec une chaîne vide. Mais il ne traite pas les chaînes composées d'espaces.

\n\n

Méthode 3 : Trim + vérification (pour le "vide" réel)

\n\n

Souvent, les utilisateurs saisissent des espaces dans un formulaire, et la chaîne " " semble visuellement vide. Pour détecter également ces cas, il faut supprimer les espaces à l'aide de la méthode .trim().

\n\n
function isBlank(str) {\n    return !str || str.trim() === "";\n}\n\nconsole                

Blogs

Book Recommendations