Quelqu'un peut-il expliquer cette astuce du "double négatif" ?

Question

Je ne suis en aucun cas un expert en Javascript, mais j'ai lu l'ouvrage de Mark Pilgrim "Plongez dans le HTML5" et il a mentionné quelque chose que j'aimerais mieux comprendre.

Il déclare :

Enfin, vous utilisez l'astuce du double négatif pour forcer le résultat à prendre une valeur booléenne (vrai ou faux).

function supports_canvas() {
  return !!document.createElement('canvas').getContext;
}

Si quelqu'un peut expliquer cela un peu mieux, je l'apprécierais !

Answer 1

Un opérateur logique NOT ! convertit une valeur en un booléen qui est l'opposé de sa valeur logique.

Le deuxième ! convertit le résultat booléen précédent en la représentation booléenne de sa valeur logique d'origine.

À partir de ces documents pour l'opérateur logique NOT :

Renvoie false si son unique opérande peut être converti en true ; sinon, renvoie true.

Donc si getContext vous donne une valeur "fausse", l'option !! lui fera retourner la valeur booléenne false . Sinon, il retournera true .

Les valeurs "fausses" sont :

• false
• NaN
• undefined
• null
• "" (chaîne vide)
• 0

Answer 2

Javascript a un ensemble de règles confuses pour ce qui est considéré comme "vrai" et "faux" lorsqu'il est placé dans un contexte où un booléen est attendu. Mais l'opérateur logique-NOT, ! produit toujours une valeur booléenne correcte (une des constantes true y false ). En enchaînant deux d'entre eux, l'idiome !!expression produit un booléen propre avec la même véracité que l'expression originale.

Pourquoi s'en préoccuper ? Parce que cela rend les fonctions comme celle que vous montrez plus prévisibles. S'il n'y avait pas le double négatif, elle pourrait retourner undefined , a Function ou quelque chose qui n'est pas entièrement différent d'un Function objet. Si l'appelant de cette fonction fait quelque chose de bizarre avec la valeur de retour, l'ensemble du code pourrait mal se comporter ("bizarre" signifie ici "tout sauf une opération qui applique le contexte booléen"). L'idiome double-négatif permet d'éviter cela.

Answer 3

En javascript, l'utilisation de l'opérateur "bang" ( !) renverra vrai si la valeur donnée est vraie, 1, non nulle, etc. Il renverra faux si la valeur est indéfinie, nulle, 0 ou une chaîne vide.

Ainsi, l'opérateur bang retournera toujours une valeur booléenne, mais elle représentera la valeur opposée de celle avec laquelle vous avez commencé. Si vous prenez le résultat de cette opération et le "bang" à nouveau, vous pouvez l'inverser à nouveau, mais vous obtiendrez toujours un booléen (et non pas indéfini, nul, etc.).

En utilisant deux fois la touche "bang", une valeur qui aurait pu être indéfinie, nulle, etc. false . Il prendra une valeur qui aurait pu être 1, "true", etc. et la transformera en une valeur simple. true .

Le code aurait pu être écrit :

var context = document.createElement('canvas').getContext;
var contextDoesNotExist = !context;
var contextExists = !contextDoesNotExist;
return contextExists;

Answer 4

L'utilisation de !!variable vous donne une garantie de typage en booléen.

Pour vous donner un exemple simple :

"" == false (is true)
"" === false (is false)

!!"" == false (is true)
!!"" === false (is true)

Mais ça n'a pas de sens de l'utiliser si vous faites quelque chose comme :

var a = ""; // or a = null; or a = undefined ...
if(!!a){
...

Le if le convertira en booléen et il n'y aura pas besoin de faire le double négatif implicite.

Answer 5

! transforme "quelque chose"/"n'importe quoi" en une boolean .

!! redonne la valeur booléenne originale (et garantit que l'expression est maintenant un booléen, indépendamment de ce qu'elle était auparavant).