¿Qué hace una tilde cuando precede a una expresión?

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

Lo vi en una respuesta, y nunca lo había visto antes.

Qué significa eso?

~es un operador bit a bit que voltea todos los bits en su operando.

Por ejemplo, si su número fuera 1, su representación binaria del flotador IEEE 754 (cómo trata JavaScript los números) sería ...

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

Entonces ~convierte su operando a un entero de 32 bits (los operadores bit a bit en JavaScript hacen eso) ...

0000 0000 0000 0000 0000 0000 0000 0001

^{Si fuera un número negativo, se almacenaría en el complemento de 2: invierta todos los bits y agregue 1.}

... y luego voltea todos sus bits ...

1111 1111 1111 1111 1111 1111 1111 1110

Entonces, ¿para qué sirve? ¿Cuándo podría uno usarlo?

Tiene bastantes usos. Si estás escribiendo cosas de bajo nivel, es útil. Si ha perfilado su aplicación y ha encontrado un cuello de botella, podría ser más eficaz mediante el uso de trucos bit a bit (como una posible herramienta en una bolsa mucho más grande).

También es un truco (generalmente) poco claro para convertir indexOf()el valor de retorno encontrado en verdadero (mientras que no se encuentra como falso ) y la gente lo usa a menudo por su efecto secundario de truncar números a 32 bits (y soltar su decimal al duplicarlo) efectivamente lo mismo que Math.floor()para los números positivos).

Digo que no está claro porque no es inmediatamente obvio para qué se está utilizando. En general, desea que su código se comunique claramente con otras personas que lo leen. Si bien el uso ~puede verse bien , generalmente es demasiado inteligente para su propio bien. :)

También es menos relevante ahora que JavaScript tiene Array.prototype.includes()y String.prototype.includes(). Estos devuelven un valor booleano. Si su (s) plataforma (s) de destino lo admiten, debería preferir esto para probar la existencia de un valor en una cadena o matriz.

Usarlo antes de una indexOf()expresión efectivamente le da un resultado verdadero / falso en lugar del índice numérico que se devuelve directamente.

Si el valor de retorno es -1, entonces ~-1es 0porque -1es una cadena de todos los 1 bits. Cualquier valor mayor o igual a cero dará un resultado distinto de cero. Así,

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

hará que el ifcódigo se ejecute cuando "algo" esté en "someString". Si intenta usarlo .indexOf()directamente como booleano, eso no funcionará porque a veces devuelve cero (cuando "algo" está al comienzo de la cadena).

Por supuesto, esto también funciona:

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

y es considerablemente menos misterioso

A veces también verás esto:

var i = ~~something;

Usar el ~operador dos veces así es una forma rápida de convertir una cadena a un entero de 32 bits. El primero ~realiza la conversión y el segundo ~voltea los bits. Por supuesto, si el operador se aplica a algo que no se puede convertir a un número, se obtiene NaNcomo resultado. ( editar - en realidad es el segundo ~que se aplica primero, pero se entiende la idea).

El ~es NOT en modo bit del operador , ~xes más o menos lo mismo que -(x+1). Es más fácil de entender, más o menos. Entonces:

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

Considere -(x+1). -1puede realizar esa operación para producir a 0.

En otras palabras, si se ~usa con un rango de valores numéricos, se producirá un valor falso (coacción a falsepartir de 0) solo para el -1valor de entrada; de lo contrario, cualquier otro valor verdadero.

Como sabemos, -1comúnmente se llama valor centinela . Se utiliza para muchas funciones que devuelven >= 0valores para el éxito y -1para el fracaso en lenguaje C. Que la misma regla de valor de retorno de indexOf()en JavaScript.

Es común verificar la presencia / ausencia de una subcadena en otra cadena de esta manera

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
}

Sin embargo, sería más fácil hacerlo de la ~siguiente manera

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: Tipos y gramática por Kyle Simpson

~indexOf(item) surge con bastante frecuencia, y las respuestas aquí son geniales, pero tal vez algunas personas solo necesitan saber cómo usarlo y "omitir" la teoría:

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

Para aquellos que consideran usar el truco tilde para crear un valor verdadero a partir de un indexOfresultado, es más explícito y tiene menos magia para usar el includesmétodoString .

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

Tenga en cuenta que este es un nuevo método estándar a partir de ES 2015, por lo que no funcionará en navegadores antiguos. En los casos en que eso sea importante, considere usar el String.prototype.includes polyfill .

Esta característica también está disponible para matrices que usan la misma sintaxis :

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

Aquí está el Array.prototype.incluye polyfill si necesita soporte de navegador más antiguo.