Comment vérifier les valeurs nulles en JavaScript?


576

Comment puis-je vérifier les valeurs nulles en JavaScript? J'ai écrit le code ci-dessous mais cela n'a pas fonctionné.

if (pass == null || cpass == null || email == null || cemail == null || user == null) {      

    alert("fill all columns");
    return false;  

}   

Et comment puis-je trouver des erreurs dans mes programmes JavaScript?


Êtes-vous sûr que les valeurs que vous testez sont réellement nulles et pas seulement une chaîne vide?
Jan-Peter Vos

72
les tests nullen js doivent être effectués avec l'opérateur strict===
davin

3
@davin - vrai, mais pas le problème ici car si c'était le cas, l'instruction fonctionnerait toujours.
Mark Kahn

3
@cwolves, si je pensais que c'était le problème, j'aurais fait de ce commentaire une réponse. Vérifiez ma formulation, je fais clairement une déclaration générale sur la langue en référence à la pratique du PO, et ne propose pas que cela résout son problème.
davin

2
@TRiG les changements proposés modifient fondamentalement la nature de la question au point où les réponses (pas seulement les miennes) perdent leur contexte et n'ont plus de sens. L'édition ne devrait être qu'un commentaire.
ic3b3rg

Réponses:


744

Javascript est très flexible en ce qui concerne la vérification des valeurs "nulles". Je suppose que vous recherchez en fait des chaînes vides, auquel cas ce code plus simple fonctionnera:

if(!pass || !cpass || !email || !cemail || !user){

Qui vérifie la présence des chaînes vides ( ""), null, undefined, falseet les numéros 0etNaN

Veuillez noter que si vous vérifiez spécifiquement les nombres, c'est une erreur courante de manquer 0avec cette méthode, et num !== 0est préférée (ou num !== -1ou ~num(code hacky qui vérifie également -1)) pour les fonctions qui retournent -1, par exemple indexOf)


4
Il serait très utile de savoir quelles parties de ce test pour quelles valeurs. Parfois, vous en recherchez un en particulier.
inorganik

2
Un peu tard, mais oui, vous pouvez effectuer un test contre chacun @inorganik, voir ma réponse ci
WebWanderer

28
Lecteurs, soyez prudent lorsque vous utilisez ce type de test sur des données numériques. N'utilisez pas !ou !!pour tester nullou undefinedsur des données typiquement numériques à moins que vous ne souhaitiez également supprimer des valeurs de 0.
NickS

4
La réponse elle-même dit ceci: "... et les chiffres 0...". Je crois que cette réponse est parfaitement appropriée à la question, étant donné le contexte (que j'infère "nom d'utilisateur, mot de passe, e-mail"), ils ne vérifient pas les 0valeurs. Compte tenu de la popularité de cette question et de sa réponse, je conviens cependant qu'il convient de le mentionner dans la réponse elle-même.
Mark Kahn

4
@Hendeca - roule les yeux Allez lire le code dans la vraie question. Il s'agit clairement de demander des noms d'utilisateur et des mots de passe. Je ne devine rien, j'étais juste poli. Vous êtes gêné par le fait que j'ai répondu à ce dont ils avaient besoin et non à ce qu'ils ont demandé, ce qui est absurde. C'est SO, la plupart du temps les gens ne savent pas ce qu'ils devraient demander. Dans le contexte de la question initiale, cette réponse est correcte. Arrêtez maintenant d'ajouter du bruit.
Mark Kahn

420

Pour vérifier NUL SPÉCIFIQUEMENT, vous utiliseriez ceci:

if (variable === null)

Ce test seulement passer pour nullet ne passera pas pour "", undefined, false, 0ou NaN.

De plus, j'ai fourni des vérifications absolues pour chaque valeur "false-like" (celle qui retournerait true pour !variable).

Notez que pour certaines des vérifications absolues, vous devrez implémenter l'utilisation de absolutely equals: ===et typeof.

J'ai créé un JSFiddle ici pour montrer tous les tests individuels qui fonctionnent

Voici la sortie de chaque contrôle:

Null Test:

if (variable === null)

- variable = ""; (false) typeof variable = string

- variable = null; (true) typeof variable = object

- variable = undefined; (false) typeof variable = undefined

- variable = false; (false) typeof variable = boolean

- variable = 0; (false) typeof variable = number

- variable = NaN; (false) typeof variable = number



Empty String Test:

if (variable === '')

- variable = ''; (true) typeof variable = string

- variable = null; (false) typeof variable = object

- variable = undefined; (false) typeof variable = undefined

- variable = false; (false) typeof variable = boolean

- variable = 0; (false) typeof variable = number

- variable = NaN; (false) typeof variable = number




Undefined Test:

if (typeof variable == "undefined")

-- or --

if (variable === undefined)

- variable = ''; (false) typeof variable = string

- variable = null; (false) typeof variable = object

- variable = undefined; (true) typeof variable = undefined

- variable = false; (false) typeof variable = boolean

- variable = 0; (false) typeof variable = number

- variable = NaN; (false) typeof variable = number



False Test:

if (variable === false)

- variable = ''; (false) typeof variable = string

- variable = null; (false) typeof variable = object

- variable = undefined; (false) typeof variable = undefined

- variable = false; (true) typeof variable = boolean

- variable = 0; (false) typeof variable = number

- variable = NaN; (false) typeof variable = number



Zero Test:

if (variable === 0)

- variable = ''; (false) typeof variable = string

- variable = null; (false) typeof variable = object

- variable = undefined; (false) typeof variable = undefined

- variable = false; (false) typeof variable = boolean

- variable = 0; (true) typeof variable = number

- variable = NaN; (false) typeof variable = number



NaN Test:

if (typeof variable == 'number' && !parseFloat(variable) && variable !== 0)

-- or --

if (isNaN(variable))

- variable = ''; (false) typeof variable = string

- variable = null; (false) typeof variable = object

- variable = undefined; (false) typeof variable = undefined

- variable = false; (false) typeof variable = boolean

- variable = 0; (false) typeof variable = number

- variable = NaN; (true) typeof variable = number

Comme vous pouvez le voir, c'est un peu plus difficile à tester NaN;


9
À quoi sert la vérification de type si vous utilisez ===une égalité stricte? Merci. De plus, pour le test NaN, vous pouvez utiliser isNaN(value)ce résultat trueuniquement si la variable est égale à NaN.
Michael Malinovskij

16
Existe-t-il un cas où variable === nullmais n'est pas de type "objet"? S'il n'y en a pas, pourquoi ne pas simplifier le chèque en variable === nulljetant le deuxième joint? Merci.
Hunan Rostomyan

7
@HunanRostomyan Bonne question, et honnêtement, non, je ne pense pas qu'il y en ait. Vous êtes très probablement assez en sécurité en utilisant variable === nullce que je viens de tester ici dans ce JSFiddle . La raison pour laquelle j'ai également utilisé `&& typeof variable === 'object' 'n'était pas seulement pour illustrer le fait intéressant qu'une nullvaleur est un typeof object, mais aussi pour suivre le flux des autres vérifications. Mais oui, en conclusion, vous êtes sûr d'utiliser simplement variable === null.
WebWanderer du

1
jsfiddle.net/neoaptt/avt1cgem/1 Voici cette réponse divisée en fonctions. Pas très utile, mais je l'ai quand même fait.
Neoaptt

1
Je vais faire quelque chose qui n'est presque jamais une bonne idée: changer le code dans cette réponse. Plus précisément, supprimez le test totalement inutile pour l'objet type lors de la vérification de null. Il s'agit d'un extrait de code fondamental : ce n'est pas une bonne idée que même un seul débutant apprenne mal qu'il doit faire ce test détaillé.
ToolmakerSteve

59

remplacez simplement le ==par ===dans tous les endroits.

== est une comparaison d'égalité lâche ou abstraite

=== est une comparaison stricte d'égalité

Voir l'article de MDN sur les comparaisons d'égalité et la similitude pour plus de détails.


2
Cela ne fonctionne que si vous estimez undefinedque non null. Sinon, cela entraînera de nombreux comportements inattendus. En général , si vous êtes intéressé à la fois null/ undefinedmais pas les valeurs falsy, puis utilisez ==( l' un des rares cas où vous devriez le faire).
Andrew Mao

2
@AndrewMao undefined n'est pas null : stackoverflow.com/a/5076962/753237
ic3b3rg

2
Je crois que c'est vraiment ce que @AndrewMao disait. Sa première phrase pourrait être réécrite "Cela ne fonctionne que dans les situations où undefined et null ne sont pas des équivalents pratiques."
BobRodes

1
@BobRodes Merci d'avoir clarifié ma mauvaise écriture, je l'apprécie :)
Andrew Mao

@AndrewMao Vous êtes les bienvenus. Et je n'appellerais pas votre écriture pauvre, personnellement; Je dirais que c'est beaucoup mieux que la moyenne. :)
BobRodes

30

Opérateur d'égalité stricte: -

Nous pouvons vérifier null par ===

if ( value === null ){

}

Juste en utilisant if

if( value ) {

}

sera évalué à vrai si la valeur n'est pas :

  • nul
  • indéfini
  • NaN
  • chaîne vide ("")
  • faux
  • 0

9

Amélioration de la réponse acceptée en vérifiant explicitement nullmais avec une syntaxe simplifiée:

if ([pass, cpass, email, cemail, user].every(x=>x!==null)) {
    // your code here ...
}

// Test
let pass=1, cpass=1, email=1, cemail=1, user=1; // just to test

if ([pass, cpass, email, cemail, user].every(x=>x!==null)) {
    // your code here ...
    console.log ("Yayy! None of them are null");
} else {
    console.log ("Oops! At-lease one of them is null");
}


6

Tout d'abord, vous avez une instruction return sans corps de fonction. Il y a de fortes chances que cela génère une erreur.

Une façon plus propre de faire votre vérification serait d'utiliser simplement le! opérateur:

if (!pass || !cpass || !email || !cemail || !user) {

    alert("fill all columns");

}

12
Ce code est probablement dans une fonction, il ne l'a simplement pas montré;)
Mark Kahn

4

vous pouvez enfin utiliser try catch

 try {
     document.getElementById("mydiv").innerHTML = 'Success' //assuming "mydiv" is undefined
 } catch (e) {

     if (e.name.toString() == "TypeError") //evals to true in this case
     //do something

 } finally {}   

vous pouvez également throwvos propres erreurs. Regardez ça .


1
Je pense que cela peut être qualifié de code «paranoïaque». si vous avez vraiment écrit quelque chose comme ça, ce serait avec la compréhension que "mydiv" ne pourrait pas exister. nous ne devrions pas atteindre ce code à moins que nous ne soyons convaincus que c'est le cas, et nous aurions beaucoup de moyens tels que les codes de réponse pour nous assurer que nous sommes confiants avant d'essayer une telle ligne.
calql8edkos

N'utilisez pas try and catch pour le flux de contrôle. Ce n'est pas une bonne solution.
Andrew S

4

En JavaScript, aucune chaîne n'est égale à null.

Peut-être vous attendiez-vous pass == nullà être vrai quand passest une chaîne vide parce que vous savez que l'opérateur d'égalité lâche ==effectue certains types de coercition de type.

Par exemple, cette expression est vraie:

'' == 0

En revanche, l'opérateur d'égalité stricte ===dit que c'est faux:

'' === 0

Étant donné que '' et 0sont vaguement égaux, vous pourriez raisonnablement supposer cela ''et nullsont vaguement égaux. Mais ce n'est pas le cas.

Cette expression est fausse:

'' == null

Le résultat de la comparaison d'une chaîne à nullest faux. Par conséquent, pass == nulltous vos autres tests sont toujours faux et l'utilisateur ne reçoit jamais l'alerte.

Pour corriger votre code, comparez chaque valeur à la chaîne vide:

pass === ''

Si vous êtes certain que pass s'agit d'une chaîne, pass == ''cela fonctionnera également car seule une chaîne vide est à peu près égale à la chaîne vide. D'un autre côté, certains experts disent que c'est une bonne pratique de toujours utiliser une égalité stricte dans JavaScript, sauf si vous voulez spécifiquement faire la coercition de type que l'opérateur d'égalité lâche effectue.

Si vous voulez savoir quelles paires de valeurs sont approximativement égales, consultez le tableau "Comparaisons de similitude" dans l' article de Mozilla sur ce sujet .


4

pour vérifier non défini et null en javascript, il vous suffit d'écrire ce qui suit:

if (!var) {
        console.log("var IS null or undefined");
} else {
        console.log("var is NOT null or undefined");
}

6
! var est vrai avec 0, "", NaN et false aussi.
Matt

3

Ceci est un commentaire sur la solution de WebWanderer concernant la vérification de NaN (je n'ai pas encore assez de représentant pour laisser un commentaire formel). La solution se lit comme suit:

if(!parseInt(variable) && variable != 0 && typeof variable === "number")

mais cela échouera pour les nombres rationnels qui arrondiraient à 0, tels que variable = 0.1. Un meilleur test serait:

if(isNaN(variable) && typeof variable === "number")

1
Merci d'avoir signalé le bug Gabriel, j'ai mis le correctif dans ma réponse. Mis à part cela, j'ai pu corriger le test en passant parseIntà parseFloat (ce qui aurait dû être évident pour moi en premier lieu). J'ai évité d'utiliser la isNanfonction parce que j'ai l'impression que de nombreux développeurs voient des fonctions telles qu'une isNaNsorte de "boîte magique" dans laquelle les valeurs entrent et les booléens sortent, et je voulais que le test soit un peu plus approfondi. Mais oui, votre test suggéré fonctionnera et est parfaitement adapté à l'utilisation. Désolé, je n'ai pas remarqué votre message jusqu'à présent.
WebWanderer

1
Génial, cela semble fonctionner. Merci pour le commentaire sur les raisons pour lesquelles vous avez également évité isNaN, je peux me mettre derrière cette logique. Il y a aussi la méthode Underscore.js, qui semble encore plus déroutante / blackbox, mais qui vaut quand même la peine d'être notée car elle en profite NaN !== NaN. Object.prototype.toString.call(variable) === '[object Number]' && variable !== +variable
Gabriel

2

En fait, je pense que vous devrez peut-être utiliser if (value !== null || value !== undefined) parce que si vous utilisezif (value) vous pouvez également filtrer 0 ou de fausses valeurs.

Considérez ces deux fonctions:

const firstTest = value => {
    if (value) {
        console.log('passed');
    } else {
        console.log('failed');
    }
}
const secondTest = value => {
    if (value !== null && value !== undefined) {
        console.log('passed');
    } else {
        console.log('failed');
    }
}

firstTest(0);            // result: failed
secondTest(0);           // result: passed

firstTest(false);        // result: failed
secondTest(false);       // result: passed

firstTest('');           // result: failed
secondTest('');          // result: passed

firstTest(null);         // result: failed
secondTest(null);        // result: failed

firstTest(undefined);    // result: failed
secondTest(undefined);   // result: failed

Dans ma situation, j'avais juste besoin de vérifier si la valeur était nulle et non définie et je ne voulais pas filtrer les valeurs 0ou falseou ''. J'ai donc utilisé le deuxième test, mais vous devrez peut-être également les filtrer, ce qui pourrait vous obliger à utiliser le premier test.


1

J'ai trouvé une autre façon de tester si la valeur est nulle:

if(variable >= 0 && typeof variable === "object")

nullagit comme un numberet objecten même temps. Comparaison null >= 0ou null <= 0résultats true. Comparer null === 0ounull > 0 ou null < 0entraînera un faux. Mais comme nullc'est aussi un objet, nous pouvons le détecter comme nul.

J'ai fait une fonction plus complexe, la nature de la sorcière fera mieux que le type et je peux dire quels types inclure ou garder groupés

/* function natureof(variable, [included types])
included types are 
    null - null will result in "undefined" or if included, will result in "null"
    NaN - NaN will result in "undefined" or if included, will result in "NaN"
    -infinity - will separate negative -Inifity from "Infinity"
    number - will split number into "int" or "double"
    array - will separate "array" from "object"
    empty - empty "string" will result in "empty" or
    empty=undefined - empty "string" will result in "undefined"
*/
function natureof(v, ...types){
/*null*/            if(v === null) return types.includes('null') ? "null" : "undefined";
/*NaN*/             if(typeof v == "number") return (isNaN(v)) ? types.includes('NaN') ? "NaN" : "undefined" : 
/*-infinity*/       (v+1 === v) ? (types.includes('-infinity') && v === Number.NEGATIVE_INFINITY) ? "-infinity" : "infinity" : 
/*number*/          (types.includes('number')) ? (Number.isInteger(v)) ? "int" : "double" : "number";
/*array*/           if(typeof v == "object") return (types.includes('array') && Array.isArray(v)) ? "array" : "object";
/*empty*/           if(typeof v == "string") return (v == "") ? types.includes('empty') ? "empty" : 
/*empty=undefined*/ types.includes('empty=undefined') ? "undefined" : "string" : "string";
                    else return typeof v
}

// DEMO
let types = [null, "", "string", undefined, NaN, Infinity, -Infinity, false, "false", true, "true", 0, 1, -1, 0.1, "test", {var:1}, [1,2], {0: 1, 1: 2, length: 2}]

for(i in types){
console.log("natureof ", types[i], " = ", natureof(types[i], "null", "NaN", "-infinity", "number", "array", "empty=undefined")) 
}


1

J'ai fait cette fonction très simple qui fait des merveilles:

function safeOrZero(route) {
  try {
    Function(`return (${route})`)();
  } catch (error) {
    return 0;
  }
  return Function(`return (${route})`)();
}

L'itinéraire est la chaîne de valeurs qui peut exploser. Je l'utilise pour jQuery / cheerio et des objets et autres.

Exemples 1: un objet simple comme celui-ci const testObj = {items: [{ val: 'haya' }, { val: null }, { val: 'hum!' }];};.

Mais ce pourrait être un très grand objet que nous n'avons même pas fabriqué. Je passe donc par:

let value1 = testobj.items[2].val;  // "hum!"
let value2 = testobj.items[3].val;  // Uncaught TypeError: Cannot read property 'val' of undefined

let svalue1 = safeOrZero(`testobj.items[2].val`)  // "hum!"
let svalue2 = safeOrZero(`testobj.items[3].val`)  // 0

Bien sûr, si vous préférez, vous pouvez utiliser nullou'No value' ... ce qui convient à vos besoins.

Habituellement, une requête DOM ou un sélecteur jQuery peut générer une erreur s'il n'est pas trouvé. Mais en utilisant quelque chose comme:

const bookLink = safeOrZero($('span.guidebook > a')[0].href);
if(bookLink){
  [...]
}

1

Vous pouvez utiliser le module lodash pour vérifier que la valeur est nulle ou non définie

_.isNil(value)
Example 

 country= "Abc"
    _.isNil(country)
    //false

   state= null
    _.isNil(state)
    //true

city= undefined
    _.isNil(state)
    //true

   pin= true
    _.isNil(pin)
    // false   

Lien de référence: https://lodash.com/docs/#isNil


0

Cela ne fonctionnera pas en cas de valeurs booléennes provenant de DB par exemple:

 value = false

 if(!value) {
   // it will change all false values to not available
   return "not available"
 }

0

AFAIK dans JAVASCRIPT lorsqu'une variable est déclarée mais n'a pas de valeur assignée, son type est undefined. afin que nous puissions vérifier la variable même si ce serait une objectdétention d'une instance à la place de la valeur .

créer une méthode d'assistance pour vérifier la nullité qui retourne trueet l'utiliser dans votre API.

fonction d'assistance pour vérifier si la variable est vide:

function isEmpty(item){
    if(item){
        return false;
    }else{
        return true;
    }
}

essayez d'appeler un appel d'API exceptionnel:

try {

    var pass, cpass, email, cemail, user; // only declared but contains nothing.

    // parametrs checking
    if(isEmpty(pass) || isEmpty(cpass) || isEmpty(email) || isEmpty(cemail) || isEmpty(user)){
        console.log("One or More of these parameter contains no vlaue. [pass] and-or [cpass] and-or [email] and-or [cemail] and-or [user]");
    }else{
        // do stuff
    }

} catch (e) {
    if (e instanceof ReferenceError) {
        console.log(e.message); // debugging purpose
        return true;
    } else {
        console.log(e.message); // debugging purpose
        return true;
    }
}

quelques cas de test:

var item = ""; // isEmpty? true
var item = " "; // isEmpty? false
var item; // isEmpty? true
var item = 0; // isEmpty? true
var item = 1; // isEmpty? false
var item = "AAAAA"; // isEmpty? false
var item = NaN; // isEmpty? true
var item = null; // isEmpty? true
var item = undefined; // isEmpty? true

console.log("isEmpty? "+isEmpty(item));

1
Quelle? Cette réponse n'a rien à voir avec ce post. Avez-vous posté cette réponse sur ce fil par accident?
WebWanderer

Cette isEmptyfonction se comporte exactement comme !. Pas besoin d'inventer une fonction. Faites-le if (!pass || !cpass || !email ...). (Ce qui est déjà indiqué dans la réponse acceptée.) Et selon le commentaire de WebWanderer, la partie centrale de cet article, "essayez d'appeler un appel API exceptionnel", ne semble pas être pertinente pour cette question. Veuillez expliquer votre intention - quand est-ce utile? Quel est le rapport avec la question?
ToolmakerSteve

0

Vérification des conditions d'erreur:

// Typical API response data
let data = {
  status: true,
  user: [],
  total: 0,
  activity: {sports: 1}
}

// A flag that checks whether all conditions were met or not
var passed = true;

// Boolean check
if (data['status'] === undefined || data['status'] == false){
  console.log("Undefined / no `status` data");
  passed = false;
}

// Array/dict check
if (data['user'] === undefined || !data['user'].length){
  console.log("Undefined / no `user` data");
  passed = false;
}

// Checking a key in a dictionary
if (data['activity'] === undefined || data['activity']['time'] === undefined){
   console.log("Undefined / no `time` data");
   passed = false;
}

// Other values check
if (data['total'] === undefined || !data['total']){
  console.log("Undefined / no `total` data");
  passed = false;
}

// Passed all tests?
if (passed){
  console.log("Passed all tests");
}

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.