Que fait un tilde quand il précède une expression?

var attr = ~'input,textarea'.indexOf( target.tagName.toLowerCase() )
           ? 'value'
           : 'innerHTML'

Je l'ai vu dans une réponse, et je ne l'ai jamais vu auparavant.

Qu'est-ce que ça veut dire?

~est un opérateur au niveau du bit qui retourne tous les bits de son opérande.

Par exemple, si votre numéro était 1, sa représentation binaire du flottant IEEE 754 (comment JavaScript traite les nombres) serait ...

0011 1111 1111 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000

~Convertit donc son opérande en un entier 32 bits (les opérateurs au niveau du bit en JavaScript le font) ...

0000 0000 0000 0000 0000 0000 0000 0001

^{S'il s'agissait d'un nombre négatif, il serait stocké dans le complément à 2: inversez tous les bits et ajoutez 1.}

... puis retourne tous ses bits ...

1111 1111 1111 1111 1111 1111 1111 1110

Alors à quoi ça sert alors? Quand pourrait-on jamais l'utiliser?

Il a plusieurs utilisations. Si vous écrivez des trucs de bas niveau, c'est pratique. Si vous avez profilé votre application et trouvé un goulot d'étranglement, il pourrait être rendu plus performant en utilisant des astuces au niveau du bit (comme un outil possible dans un sac beaucoup plus grand).

Il est aussi un (généralement) pas clair truc à tourner indexOf()est trouvé valeur de retour dans truthy (tout en faisant pas trouvé que falsy ) et les gens utilisent souvent pour son effet secondaire de tronquer nombres à 32 bits (et laissant tomber sa place décimale en le doublant, effectivement les mêmes que Math.floor()pour les nombres positifs).

Je dis pas clair, car il n'est pas immédiatement évident à quoi il sert. Généralement, vous voulez que votre code communique clairement aux autres personnes qui le lisent. Bien que l'utilisation ~puisse sembler cool , elle est généralement trop intelligente pour son propre bien. :)

C'est aussi moins pertinent maintenant que JavaScript a Array.prototype.includes()et String.prototype.includes(). Ceux-ci renvoient une valeur booléenne. Si votre ou vos plates-formes cibles le prennent en charge, vous devriez le préférer pour tester l'existence d'une valeur dans une chaîne ou un tableau.

L'utiliser avant une indexOf()expression vous donne effectivement un résultat vrai / faux au lieu de l'index numérique qui est directement renvoyé.

Si la valeur de retour est -1, alors ~-1c'est 0parce que -1c'est une chaîne de tous les 1 bits. Toute valeur supérieure ou égale à zéro donnera un résultat différent de zéro. Donc,

if (~someString.indexOf(something)) {
}

entraînera l' ifexécution du code lorsque "quelque chose" est dans "someString". Si vous essayez de l'utiliser .indexOf()directement en tant que booléen, cela ne fonctionnera pas, car il retourne parfois zéro (lorsque "quelque chose" est au début de la chaîne).

Bien sûr, cela fonctionne aussi:

if (someString.indexOf(something) >= 0) {
}

et c'est beaucoup moins mystérieux.

Parfois, vous verrez également ceci:

var i = ~~something;

L'utilisation de l' ~opérateur deux fois comme cela est un moyen rapide de convertir une chaîne en un entier 32 bits. Le premier ~effectue la conversion et le second ~retourne les bits. Bien sûr, si l'opérateur est appliqué à quelque chose qui ne peut pas être converti en nombre, vous obtenez NaNle résultat. ( modifier - en fait, c'est la seconde ~qui est appliquée en premier, mais vous avez l'idée.)

L' opérateur~ est Bitwise NOT , ~xest à peu près le même que -(x+1). C'est plus facile à comprendre, en quelque sorte. Alors:

~2;    // -(2+1) ==> -3

Considérez -(x+1). -1peut effectuer cette opération pour produire un 0.

En d'autres termes, ~utilisé avec une plage de valeurs numériques produira une valeur fausse (contraindre à falsepartir de 0) uniquement pour la -1valeur d'entrée, sinon, toute autre valeur vraie.

Comme nous le savons, -1est communément appelé une valeur sentinelle . Il est utilisé pour de nombreuses fonctions qui renvoient des >= 0valeurs de réussite et -1d' échec en langage C. Dont la même règle de valeur de retour indexOf()en JavaScript.

Il est courant de vérifier la présence / absence d'une sous-chaîne dans une autre chaîne de cette manière

var a = "Hello Baby";

if (a.indexOf("Ba") >= 0) {
    // found it
}
if (a.indexOf("Ba") != -1) { 
    // found it
}

if (a.indexOf("aB") < 0) { 
    // not found
}
if (a.indexOf( "aB" ) == -1) { 
    // not found
}

Cependant, il serait plus facile de le faire ~comme ci-dessous

var a = "Hello Baby";

~a.indexOf("Ba");         // -7   -> truthy
if (~a.indexOf("Ba")) {   // true
    // found it
}

~a.indexOf("aB");         // 0    -> falsy
!~a.indexOf("aB");        // true
if (!~a.indexOf( "aB" )) {  // true
    // not found
}

You Don't Know JS: Types & Grammar par Kyle Simpson

~indexOf(item) revient assez souvent, et les réponses ici sont excellentes, mais peut-être que certaines personnes ont juste besoin de savoir comment l'utiliser et "sauter" la théorie:

   if (~list.indexOf(item)) {
     // item in list
   } else {
     // item *not* in list
   }

Pour ceux qui envisagent d'utiliser l'astuce tilde pour créer une valeur véridique à partir d'un indexOfrésultat, il est plus explicite et a moins de magie pour utiliser la includesméthode à la placeString .

'hello world'.includes('hello') //=> true
'hello world'.includes('kittens') //=> false

Notez qu'il s'agit d'une nouvelle méthode standard à partir d'ES 2015, elle ne fonctionnera donc pas sur les anciens navigateurs. Dans les cas où cela est important, envisagez d'utiliser le polyfill String.prototype.includes .

Cette fonctionnalité est également disponible pour les tableaux utilisant la même syntaxe :

['apples', 'oranges', 'cherries'].includes('apples') //=> true
['apples', 'oranges', 'cherries'].includes('unicorns') //=> false

Voici le polyfill Array.prototype.includes si vous avez besoin d'un support de navigateur plus ancien.