JS中的Number数据类型详解

Number数据类型

Number类型使用IEEE754格式来表示整数和浮点值,这也是0.2 + 0.3不等于0.5的原因,

最基本的数值类型字面量格式是十进制整数

var a = 10;

1. 浮点数值

整理中。。。

2. NaN

Not a Number:不是一个数,但它属于数值类型

NaN的特点

  • NaN和任何值进行操作都会返回NaN
  • NaN与任何值都不相等,包括NaN本身
console.log(NaN == NaN)

3. isNaN函数

用于检测一个变量不是数值(Number)类型。isNaN()接收一个参数,这个参数可以是任何类型。这个函数会尝试把传入的参数转换为数值,某些不是数值的值会直接转换成数值,例如字符串"10"Boolean值,不能转换为数值的值返回true,能转换的返回false

console.log( isNaN(NaN ) // true 
console.log( isNaN(10 ) // false
console.log( isNaN('10') // false
console.log( isNaN('blue') // true
console.log(isNaN( true )) // false (true会被转换成1)

总结:

  • isNaN意思是:是不是非数值,是的话返回true,所有能被该函数转换能Number类型的值,都返回false
  • 在使用isNaN进行检测的时候,首先会验证检测的值是否为数字类型,如果不是,先基于Number()这个方法,把值转换成数字类型,然后再检测。
  • 空字符串、空数组、布尔值、null会转成数值,所以isNaN函数返回false
  • 空对象、函数、undefined不能转换成数值,返回true

4. 数值转换

把非数值值转换为数值:

  • Number()
  • parseInt() 取整
  • parseFloat() 浮点数

`Number()转换规则

  • 如果是布尔值,truefalse会被转换为10
Number(true) // 1
Number(false) // 0
  • 如果是数字,只是简单的传入和返回。
Number(1) // 1
Number(100) // 100
  • 如果是null值,返回0
Number(null) // 0

  • 如果是undefined,返回NaN
Number(undefined) // NaN

  • 如果是字符串:
    • 字符串中只包含数字(包括前面带正/负号的情况),则将其转换为十进制数值,数字前面有0的会被忽略(不管前面有几个0,全部忽略),例如"010"会转换成10
    • 字符串中包含有效的浮点格式,如"1.1",则将其转换为对应的浮点数值。
    • 字符串中包含有效的十六进制格式(一般用数字09和字母AF(或a~f)表示,其中:A~F表示10~15,这些称作十六进制数字),如"0xf",将其转换成相同大小的十进制整数值。
    • 字符串为空,转换成0
    • 字符串中包含除了以上格式之外的字符,则转换为NaN,如字符串中既有数字又有字母的情况。

// 规则一
Number("1") // 1
Number("123") // 123
Number("010") // 10 (前导的0会被忽略)
Number("-10") // -10

// 规则2
Number("1.1") // 1.1
Number("0.1") // 0.1
Number("0000.1") // 0.1 (前导的0会被忽略)

// 规则3
Number(0xf) // 15

// 规则4
Number("") // 0
Number(" ") // 0
Number('') // 0

// 规则5
Number("Hello Wolrd") // NaN
Number("0ff6600") // NaN
Number("ff6600") // NaN
Number("0.1a") // NaN
Number("10a") // NaN
Number("a10.1") // NaN

var goodsList = {
    'pop':
}

var arr = [1,2,3,4]
Number(arr)
  • 如果对象,调用对象的valueOf(),空数组返回0,空对象返回NaN。

parseInt(string,radix)

将一个字符串转换成x进制的整数。

传入的第一个参数为字符串,如果参数不是字符串,则将其转换为字符串(使用 ToString 抽象操作)。字符串开头的空白符将会被忽略。

第二个参数为整数,表示按照xx进制转换,如传入参数10表示按十进制规则转换,

从左到右依次查找有效数字字符,直到遇到非有效数字字符,停止查找(不管后面是否好友数字),把找到的当做数字返回。

如果字符串中以0x开头且后跟数字字符,就会将其当做一个十六进制整数。

如果字符串以"0"开头且后跟数字字符,则会被当做一个八进制数来解析。

如果不传第二个参数,会按照八进制解析。在大多数情况下,我们要解析的都是十进制数值,因此始终将10作为第二个参数是非常必要的。

parseInt("123abc") // 123
parseInt("") // NaN
parseInt("12.5px") // 12
parseInt("0xA") // 10 (16进制)
parseInt("0xf") // 15 (16进制)
parseInt("070") // 70
parseInt("70") // 70

parseFloat(string)

解析一个参数(必要时先转换为字符串)并返回一个浮点数。默认解析十进制值。

function circumference(r) {
  return parseFloat(r) * 2.0 * Math.PI;
}

console.log(circumference(4.567));
// expected output: 28.695307297889173

console.log(circumference('4.567abcdefgh'));
// expected output: 28.695307297889173

  • 从左到右依次解析字符,一直解析到字符串末尾,遇到非数字字符会或遇到第二个浮点数(在这之前的字符串都会被解析)会使解析停止,如"3.14"解析成3.14"3.14.1234"解析成3.14

  • 忽略参数首尾空白符


parseFloat("3.14") // 3.14
parseFloat("-3.14") //-3.14
parseFloat("+3.14") //3.14
parseFloat("0003.14") // 3.14
parseFloat(" 3.14 ") // 3.14
parseFloat("3.14abc") // 3.14
parseFloat("3.14.5678") // 3.14
parseFloat("abc3.14") // NaN
parseFloat("abc123") // NaN
parseFloat("123abc") // 123


总结:

为什么NumberparseInt/parseFloat计算结果不一样呢?

  • Number转换规则是浏览器底层渲染规则,是浏览器的一个非常重要的方法,parseInt/parseFloat是一个单独方法的规则,就是用来处理字符串的。

  • Number走的是最底层的机制,遇到其他类型,底层机制会告诉我们哪个类型跟哪个类型应该怎么转换,这是底层机制已经规定好的,比如遇到布尔值,true转为1false转为0
    parseIntparseFloat是额外提供的方法,就是浏览器提供的方法,它们的源码处理机制很简单,会先把传入的参数转换为字符串,然后在从左到右查找数字有效字符。

posted @ 2019-10-03 09:23  dobeco  阅读(15552)  评论(1编辑  收藏  举报