If you find yourself using the
.indexOf() function on many variables to test whether or not a string existings in another string, then this little handy tip can help write a comparative statement quicker.
What does the
~ (tilde) actually do to a variable?
Let’s have a quick look:
var n = -1; console.log( ~n ); // => 0 console.log( ~~n ); // => -1 console.log( ~~~n ); // => 0
Can you see a pattern?
The impact of placing the tilde in front of a number is that it applies the following formula:
console.log( ~n === -(n + 1) ); // => true
Therefore, one great way of using this is with
Let’s have a look at how I would normally write an
indexOf() if statement:
var e = “some text”; e.indexOf( “x” ) > -1 ? true : false; // => true e.indexOf( “?” ) > -1 ? true : false; // => false
See, what’s a little annoying about the
.indexOf() function is that if the search string (needle) is found at the very beginning of the string being searched (haystack) then the result is
0, as seen here:
var e = "hello world"; console.log( e.indexOf( "hello" ) ); // => 0
With that being the case we can’t just write an
if statement with:
if ( e.indexOf( "hello" ) ) ...
0 in Javscript is “falsey” and therefore doesn’t satisfy the
if condition, even though the comparison was
So with the ninja tilde operator, you can write a more simplified
if statement like so:
var e = "hello world"; ~e.indexOf( “hello” ) ? true : false; // => true
As the tilde turns the initial
0 value now into
-1 making it truthy!
Nice and neat!