JS数值

作者: 转身一世铅华尽 | 来源:发表于2020-02-18 11:04 被阅读0次

    JS数值

    一、JS内部的数值形式和精度

    1. 在JS内部,所有的数值都是以64位的浮点数的形式存在的。即使是整数也是如此,所以在JS中 1和1.0是同一个数。
      这就是说,JavaScript 语言的底层根本没有整数,所有数字都是小数(64位浮点数)。容易造成混淆的是,某些运算只有整数才能完成,此时 JavaScript 会自动把64位浮点数,转成32位整数,然后再进行运算。
      2.根据国际标准 IEEE 754,JavaScript 浮点数的64个二进制位,从最左边开始,是这样组成的。

      第1位:符号位,0表示正数,1表示负数
      第2位到第12位(共11位):指数部分
      第13位到第64位(共52位):小数部分(即有效数字)

    符号位决定了一个数的正负,指数部分决定了数值的大小,小数部分决定了数值的精度。

    指数部分一共有11个二进制位,因此大小范围就是0到2047。IEEE 754 规定,如果指数部分的值在0到2047之间(不含两个端点),那么有效数字的第一位默认总是1,不保存在64位浮点数之中。也就是说,有效数字这时总是1.xx...xx的形式,其中xx..xx的部分保存在64位浮点数之中,最长可能为52位。因此,JavaScript 提供的有效数字最长为53个二进制位。
    前面说过,JavaScript 的64位浮点数之中,有一个二进制位是符号位。这意味着,任何一个数都有一个对应的负值,就连0也不例外。

    JavaScript 内部实际上存在2个0:一个是+0,一个是-0,区别就是64位浮点数表示法的符号位不同。它们是等价的。

    -0 === +0 // true
    0 === -0 // true
    0 === +0 // true
    

    几乎所有场合,正零和负零都会被当作正常的0。

    +0 // 0
    -0 // 0
    (-0).toString() // '0'
    (+0).toString() // '0'
    

    唯一有区别的场合是,+0或-0当作分母,返回的值是不相等的。

    (1 / +0) === (1 / -0) // false
    

    上面的代码之所以出现这样结果,是因为除以正零得到+Infinity,除以负零得到-Infinity,这两者是不相等的(关于Infinity详见下文)。
    3.NaN值
    (1)含义

    NaN是 JavaScript 的特殊值,表示“非数字”(Not a Number),主要出现在将字符串解析成数字出错的场合。

    5 - 'x' // NaN
    

    上面代码运行时,会自动将字符串x转为数值,但是由于x不是数值,所以最后得到结果为NaN,表示它是“非数字”(NaN)。

    另外,一些数学函数的运算结果会出现NaN。

    Math.acos(2) // NaN
    Math.log(-1) // NaN
    Math.sqrt(-1) // NaN
    

    0除以0也会得到NaN。

    0 / 0 // NaN
    

    需要注意的是,NaN不是独立的数据类型,而是一个特殊数值,它的数据类型依然属于Number,使用typeof运算符可以看得很清楚。

    typeof NaN // 'number'
    

    (2)运算规则

    NaN不等于任何值,包括它本身。

    NaN === NaN // false
    

    数组的indexOf方法内部使用的是严格相等运算符,所以该方法对NaN不成立。

    [NaN].indexOf(NaN) // -1
    

    NaN在布尔运算时被当作false。

    Boolean(NaN) // false
    

    NaN与任何数(包括它自己)的运算,得到的都是NaN。

    NaN + 32 // NaN
    NaN - 32 // NaN
    NaN * 32 // NaN
    NaN / 32 // NaN
    

    4.Infinity
    (1)含义

    Infinity表示“无穷”,用来表示两种场景。一种是一个正的数值太大,或一个负的数值太小,无法表示;另一种是非0数值除以0,得到Infinity。

    // 场景一
    Math.pow(2, 1024)
    // Infinity
    
    // 场景二
    0 / 0 // NaN
    1 / 0 // Infinity
    

    上面代码中,第一个场景是一个表达式的计算结果太大,超出了能够表示的范围,因此返回Infinity。第二个场景是0除以0会得到NaN,而非0数值除以0,会返回Infinity。

    Infinity有正负之分,Infinity表示正的无穷,-Infinity表示负的无穷。

    Infinity === -Infinity // false
    
    1 / -0 // -Infinity
    -1 / -0 // Infinity
    

    上面代码中,非零正数除以-0,会得到-Infinity,负数除以-0,会得到Infinity。

    由于数值正向溢出(overflow)、负向溢出(underflow)和被0除,JavaScript 都不报错,所以单纯的数学运算几乎没有可能抛出错误。

    Infinity大于一切数值(除了NaN),-Infinity小于一切数值(除了NaN)。

    Infinity > 1000 // true
    -Infinity < -1000 // true
    

    Infinity与NaN比较,总是返回false。

    Infinity > NaN // false
    -Infinity > NaN // false
    
    Infinity < NaN // false
    -Infinity < NaN // false
    

    (2)运算规则

    Infinity的四则运算,符合无穷的数学计算规则。

    5 * Infinity // Infinity
    5 - Infinity // -Infinity
    Infinity / 5 // Infinity
    5 / Infinity // 0
    

    0乘以Infinity,返回NaN;0除以Infinity,返回0;Infinity除以0,返回Infinity。

    0 * Infinity // NaN
    0 / Infinity // 0
    Infinity / 0 // Infinity
    

    Infinity加上或乘以Infinity,返回的还是Infinity。

    Infinity + Infinity // Infinity
    Infinity * Infinity // Infinity
    

    Infinity减去或除以Infinity,得到NaN。

    Infinity - Infinity // NaN
    Infinity / Infinity // NaN
    

    Infinity与null计算时,null会转成0,等同于与0的计算。

    null * Infinity // NaN
    null / Infinity // 0
    Infinity / null // Infinity
    

    Infinity与undefined计算,返回的都是NaN。

    undefined + Infinity // NaN
    undefined - Infinity // NaN
    undefined * Infinity // NaN
    undefined / Infinity // NaN
    Infinity / undefined // NaN
    

    5.数据转换方法

    parseInt()

    (1)基本用法

    parseInt方法用于将字符串转为整数。

    parseInt('123') // 123
    

    如果字符串头部有空格,空格会被自动去除。

    parseInt('   81') // 81
    

    如果parseInt的参数不是字符串,则会先转为字符串再转换。

    parseInt(1.23) // 1
    // 等同于
    parseInt('1.23') // 1
    

    字符串转为整数的时候,是一个个字符依次转换,如果遇到不能转为数字的字符,就不再进行下去,返回已经转好的部分。

    parseInt('8a') // 8
    parseInt('12**') // 12
    parseInt('12.34') // 12
    parseInt('15e2') // 15
    parseInt('15px') // 15
    

    上面代码中,parseInt的参数都是字符串,结果只返回字符串头部可以转为数字的部分。

    如果字符串的第一个字符不能转化为数字(后面跟着数字的正负号除外),返回NaN。

    parseInt('abc') // NaN
    parseInt('.3') // NaN
    parseInt('') // NaN
    parseInt('+') // NaN
    parseInt('+1') // 1
    

    所以,parseInt的返回值只有两种可能,要么是一个十进制整数,要么是NaN。

    如果字符串以0x或0X开头,parseInt会将其按照十六进制数解析。

    parseInt('0x10') // 16
    

    如果字符串以0开头,将其按照10进制解析。

    parseInt('011') // 11
    

    对于那些会自动转为科学计数法的数字,parseInt会将科学计数法的表示方法视为字符串,因此导致一些奇怪的结果。

    parseInt(1000000000000000000000.5) // 1
    // 等同于
    parseInt('1e+21') // 1
    
    parseInt(0.0000008) // 8
    // 等同于
    parseInt('8e-7') // 8
    

    (2)进制转换

    parseInt方法还可以接受第二个参数(2到36之间),表示被解析的值的进制,返回该值对应的十进制数。默认情况下,parseInt的第二个参数为10,即默认是十进制转十进制。

    parseInt('1000') // 1000
    // 等同于
    parseInt('1000', 10) // 1000
    

    下面是转换指定进制的数的例子。

    parseInt('1000', 2) // 8
    parseInt('1000', 6) // 216
    parseInt('1000', 8) // 512
    

    上面代码中,二进制、六进制、八进制的1000,分别等于十进制的8、216和512。这意味着,可以用parseInt方法进行进制的转换。

    如果第二个参数不是数值,会被自动转为一个整数。这个整数只有在2到36之间,才能得到有意义的结果,超出这个范围,则返回NaN。如果第二个参数是0、undefined和null,则直接忽略。

    parseInt('10', 37) // NaN
    parseInt('10', 1) // NaN
    parseInt('10', 0) // 10
    parseInt('10', null) // 10
    parseInt('10', undefined) // 10
    

    如果字符串包含对于指定进制无意义的字符,则从最高位开始,只返回可以转换的数值。如果最高位无法转换,则直接返回NaN。

    parseInt('1546', 2) // 1
    parseInt('546', 2) // NaN
    

    上面代码中,对于二进制来说,1是有意义的字符,5、4、6都是无意义的字符,所以第一行返回1,第二行返回NaN。

    前面说过,如果parseInt的第一个参数不是字符串,会被先转为字符串。这会导致一些令人意外的结果。

    parseInt(0x11, 36) // 43
    parseInt(0x11, 2) // 1
    
    // 等同于
    parseInt(String(0x11), 36)
    parseInt(String(0x11), 2)
    
    // 等同于
    parseInt('17', 36)
    parseInt('17', 2)
    

    上面代码中,十六进制的0x11会被先转为十进制的17,再转为字符串。然后,再用36进制或二进制解读字符串17,最后返回结果43和1。

    这种处理方式,对于八进制的前缀0,尤其需要注意。

    parseInt(011, 2) // NaN
    
    // 等同于
    parseInt(String(011), 2)
    
    // 等同于
    parseInt(String(9), 2)
    

    上面代码中,第一行的011会被先转为字符串9,因为9不是二进制的有效字符,所以返回NaN。如果直接计算parseInt('011', 2),011则是会被当作二进制处理,返回3。

    JavaScript 不再允许将带有前缀0的数字视为八进制数,而是要求忽略这个0。但是,为了保证兼容性,大部分浏览器并没有部署这一条规定。
    parseFloat()

    parseFloat方法用于将一个字符串转为浮点数。

    parseFloat('3.14') // 3.14

    如果字符串符合科学计数法,则会进行相应的转换。

    parseFloat('314e-2') // 3.14
    parseFloat('0.0314E+2') // 3.14
    

    如果字符串包含不能转为浮点数的字符,则不再进行往后转换,返回已经转好的部分。

    parseFloat('3.14more non-digit characters') // 3.14
    

    parseFloat方法会自动过滤字符串前导的空格。

    parseFloat('\t\v\r12.34\n ') // 12.34
    

    如果参数不是字符串,或者字符串的第一个字符不能转化为浮点数,则返回NaN。

    parseFloat([]) // NaN
    parseFloat('FF2') // NaN
    parseFloat('') // NaN
    

    上面代码中,尤其值得注意,parseFloat会将空字符串转为NaN。

    这些特点使得parseFloat的转换结果不同于Number函数。

    parseFloat(true)  // NaN
    Number(true) // 1
    
    parseFloat(null) // NaN
    Number(null) // 0
    
    parseFloat('') // NaN
    Number('') // 0
    
    parseFloat('123.45#') // 123.45
    Number('123.45#') // NaN
    

    isNaN()

    isNaN方法可以用来判断一个值是否为NaN。

    isNaN(NaN) // true
    isNaN(123) // false
    

    但是,isNaN只对数值有效,如果传入其他值,会被先转成数值。比如,传入字符串的时候,字符串会被先转成NaN,所以最后返回true,这一点要特别引起注意。也就是说,isNaN为true的值,有可能不是NaN,而是一个字符串。

    isNaN('Hello') // true
    // 相当于
    isNaN(Number('Hello')) // true
    

    出于同样的原因,对于对象和数组,isNaN也返回true。

    isNaN({}) // true
    // 等同于
    isNaN(Number({})) // true
    
    isNaN(['xzy']) // true
    // 等同于
    isNaN(Number(['xzy'])) // true
    

    但是,对于空数组和只有一个数值成员的数组,isNaN返回false。

    isNaN([]) // false
    isNaN([123]) // false
    isNaN(['123']) // false
    

    上面代码之所以返回false,原因是这些数组能被Number函数转成数值,请参见《数据类型转换》一章。

    因此,使用isNaN之前,最好判断一下数据类型。

    function myIsNaN(value) {
      return typeof value === 'number' && isNaN(value);
    }
    

    判断NaN更可靠的方法是,利用NaN为唯一不等于自身的值的这个特点,进行判断。

    function myIsNaN(value) {
      return value !== value;
    }
    
    isFinite()
    

    isFinite方法返回一个布尔值,表示某个值是否为正常的数值。

    isFinite(Infinity) // false
    isFinite(-Infinity) // false
    isFinite(NaN) // false
    isFinite(undefined) // false
    isFinite(null) // true
    isFinite(-1) // true
    

    除了Infinity、-Infinity、NaN和undefined这几个值会返回false,isFinite对于其他的数值都会返回true。

    JS中原生的BASE64转码方法

    btoa():任意值转为 Base64 编码
    atob():Base64 编码转为原来的值
    
    var string = 'Hello World!';
    btoa(string) // "SGVsbG8gV29ybGQh"
    atob('SGVsbG8gV29ybGQh') // "Hello World!"
    

    注意,这两个方法不适合非 ASCII 码的字符,会报错。

    btoa('你好') // 报错
    

    要将非 ASCII 码字符转为 Base64 编码,必须中间插入一个转码环节,再使用这两个方法。

    function b64Encode(str) {
      return btoa(encodeURIComponent(str));
    }
    
    function b64Decode(str) {
      return decodeURIComponent(atob(str));
    }
    
    b64Encode('你好') // "JUU0JUJEJUEwJUU1JUE1JUJE"
    b64Decode('JUU0JUJEJUEwJUU1JUE1JUJE') // "你好"
    

    相关文章

      网友评论

          本文标题:JS数值

          本文链接:https://www.haomeiwen.com/subject/ngwwfhtx.html