将字符串转换成数字 之 +符号和~~

402 阅读3分钟

假如后端返回一个字段 : res.data.num = '2', 为了使用方便我们会把这个字符串的值改为数字 一般使用 Number 或者 parseInt 将字符串转成数字。

观察以下表达式输入什么结果:

    console.log(1+ "2"+"2");  //122
    console.log(1+ +"2"+"2"); //32
    console.log("A"- "B"+"2"); //NaN2
    console.log("A"- "B"+2); //NaN

第一个很好理解,字符串加上数字返回字符串, 加号不像-,* ,/,<, > 具有隐式转换。

第二个的意思是1加上 +'2' 这个操作,为什么1后面有两个加号,1后面的第二个加号是针对字符串'2'的,在浏览器运行可以看到 +'2' 会转换成数字 2, 那么就是1+2=3 然后再加上字符串'2' , 所以就是'32'。

第三个,js中的'-'号具有隐式转换效果,会尝试将两边的字符转成数字进行减法操作,因为'A''B'转换成数字都是NaN,即属于字符,没办法进行加减操作,所以,NaN+'2' 等于 'NaN2'。

第四个,和第三个有些区别,其中的2是一个数字,那么NaN加上数字,返回NaN。

那我们来说一下这个——一元加操作符 (+)

一元加操作符放在数值前面,对数值不会产生任何影响:

    console.log(+2) //2
    console.log(+(-2)) // -2

在控制台运行可以看到结果。

但是在非数值的前面使用+操作符,那么就会进行类似Number()的类型转换,会尝试把这个值转成Number型。

    console.log(+'0.1') //0.1
    console.log(+'01')	//1
    console.log(+'a')	//NaN
    console.log(+false)	//0
    console.log(+true)	//1

可以在控制台尝试上面的操作,有趣的是布尔值中的false和true 会被转成0和1。

如果是对象进行+操作符,那么会尝试调用对象的valueOf方法返回函数的处理结果,如果对象没有valueOf操作,那么就会返回NaN。

    const a = {
        b: 2,
        valueOf: function(){
            return -1
        }
    }
    console.log(+a) //-1

在控制台里面操作可以得到结果 -1, 这是因为在执行+操作符时调用了对象内部的valueOf函数。一元减操作符和一元加操作符类似,不过一元减操作符一般是给数值转为负数。

那么我们再来说一下位操作符中的 ‘按位非’

在js中用一个波浪线(esc下面的那个按键)~ 来去表示按位非操作符,执行按位非的结果就是得到数值的反码。

    let a = 2;
    let b = ~a;
    console.log(b) //-3

运行上面代码可得结果-3,数值型。

也说明了按位非操作符就是把操作数的负值减一。

我们接着看


    console.log(~(-2))//1
    console.log(~'2')//-3
    console.log(~~'2')//2
    console.log(~NaN) //-1
    console.log(~'a') //-1
    

第一个操作数的负值减一,已经说过了。

第二个我们把字符型2转换成了数值型的-3,先尝试把字符转成数字,得到2,按位非执行后得到-2-1 等于 -3。

第三个有两个按位非操作符,意思是-(-3)得到正三,3-1等于2,那么我们就可以利用这个操作快速的把字符型的数字转成数值型。

第四个返回-1

第五个因为字符串a无法转成数值型,会得到NaN, NaN做按位非操作得-1。

以后大家可以使用这两个操作符快速将字符转成数字哟。