JavaScript基础06—Nubmer类型(下)

NaN

NaN是Not a Number的缩写,意即不是一个数字,但是仍然是Number类型。
在JS中求值运算、类型转换等情况下如果遇到无法执行的代码,就会抛出NaN,例如

console.log(0 / 0); // NaN

NaN的特点:

  • 任何与NaN有关的运算都会返回NaN
  • NaN和任何值都不相等,包括NaN,即
    console.log(NaN === NaN); // false
    

isNaN()和Number.isNaN()

JavaScript提供了isNaN()全局函数来检测NaN,该函数会对传入的非数值参数尝试进行数值转换,如果可以成功转换则返回false,否则返回true。

console.log(isNaN(124)); // false
console.log(isNaN(false)); // false
console.log(isNaN('345')); // false
console.log(isNaN('hello')); // true
console.log(isNaN({})); // true
console.log(isNaN([])); // false
console.log(isNaN(NaN)); // true

而ES6更新的Number.isNaN()则更稳妥:该方法不会隐式转换参数,只有当传入的表达式或变量为NaN时才会返回true。

console.log(Number.isNaN(124)); // false
console.log(Number.isNaN(false)); // false
console.log(Number.isNaN('345')); // false
console.log(Number.isNaN('hello')); // false
console.log(Number.isNaN({})); // false
console.log(Number.isNaN([])); // false
console.log(Number.isNaN(NaN)); // true

使用isNaN还是Number.isNaN取决于你的开发环境,在不兼容ES6的环境下也可以使用以下模拟Number.isNaN的polyfill:

Number.isNaN = Number.isNaN || function(val){
        return  typeof val === "number" && isNaN(val); 
}

转换为数值的4种方式

JavaScript提供了4种将其他类型转换为数值的方法,分别是:

  • Number()
  • parseInt()
  • parseFloat()
  • +号操作符

Number()转型函数

Number()转型函数可以将JavaScript中的任意数据类型转换为数值类型。

  • 数值类型原样返回
  • 布尔类型true会转换为1,false会转换为0
  • null会转换为0
  • undefined会转换为NaN
  • 对象会首先调用valueOf()方法,如果返回的结果仍是对象,则再调用toString()方法。
  • 字符串的情况最为特殊,我们详细总结下:
    • 如果字符串为空,则会转换为0;
    • 如果字符串只包含有效整数或浮点数,则会转化为对应的数值类型,但是会忽略前置0
    • 如果字符串包含有效的二进制、八进制或十六进制格式,则会转换为与之对应的十进制整数
    • 如果字符串中还有上述情况之外的其他字符,则会返回NaN

来看几个例子:

console.log(Number(124));  // 124
console.log(Number(false));  // 0
console.log(Number('345'));  // 345
console.log(Number("")); // 0
console.log(Number('hello')); // NaN
console.log(Number({})); // NaN
console.log(Number([]));  // 0 
console.log(Number("0b101")); // 5

+号操作符的转换规则和Number()一样,因此不再赘述。
Number()适用于任何数据类型,但是在转换字符串时稍显不足,因此JavaScript提供了专门用于转换字符串的函数:parseInt()和parseFloat(),前者主要用于转换成整数,后者主要用于转换成浮点数。

parseInt()

parseInt()函数用于解析一个字符串,并返回指定基数对应的整数值。其语法格式如下:

parseInt(string, radix);

string 表示要被解析的值,如果该参数不是一个字符串,则会调用toString()方法转换为字符串,而字符串会忽略前面的空白符

radix 表示的是进制转换的基数,数值范围在2-36之间,当不传递该参数时可能会出现意向不到的结果,因此建议始终传入第二个表示基数的参数。

返回值

整数或NaN

parseInt()函数将字符串转换为整数需要注意以下几点:

  1. 非字符串类型转换为字符串
    尽管parseInt()是用于转换字符串的,但是依然可以传入非字符串类型。当传入的值类型不是字符串时会先调用toString()方法或String()函数转换为字符串后再进行转换
console.log(parseInt(0x16, 16));  // 34
console.log(parseInt('0x16', 16));  //22

上面的例子中当我们传入0x16时,因为0x16是Number类型,因此会先调用toString()方法转换为"22",而十六进制的"22"转换成十进制后会变成34。
因此要特别注意传入非字符串时的转换规则。

  1. 有效的浮点数值格式
    parseInt()主要用来转换为整数,因此该函数不能识别字符串中的表示浮点数的e或.(小数点)
console.log(parseInt('2e4'));  // 2
console.log(parseInt(5e3)); //  5000
console.log(parseInt('12.7')); // 12
  1. 空字符串
    parseInt()转换时主要看字符串中的有效数字,同时会忽略开头的空白字符,因此空字符串中没有有效数字字符,会返回NaN
console.log(parseInt('')); // NaN

4.普通字符串
对于普通字符串,会从第一位开始寻找有效数值(也可以识别开头的+和-号),直至遇到非有效数值时停止,截取前面的有效数字转为数字。

console.log(parseInt('32blue')); // 32
console.log(parseInt('  -70.1')); // -70 
console.log(parseInt('01010')); // 1010,会忽略前面的零

5.可以设置进制转换的基数
如果明确要转换的字符串是有效的二进制、八进制或十六进制,那么可以省略其前缀并设置对应的基数,parseInt会将其转换为对应的十进制形式。

console.log(parseInt('1010', 2)); // 10
console.log(parseInt('1010', 8)); // 520
console.log(parseInt('1010', 10)); // 1010
console.log(parseInt('1010', 16)); // 4112

parseFloat()

parseFloat()主要用来将字符串尽可能转换为浮点数。
parseFloat()没有第二个可选的基数参数,因此相对规则简单点。
parseFloat()也是从字符串的第一位开始寻找有效的浮点数值字符(包括第一个e以及第一个.(小数点)),直至遇到非有效数值时停止,并截取有效字符返回对应的浮点数格式。

console.log(parseFloat("2e2"));
console.log(parseFloat("12.7.1"));
console.log(parseFloat("12blue"));
console.log(parseFloat("false"));

注意:parseFloat()不认识其他进制的前缀,会始终认为其是十进制格式,因此如果传入的值为其他进制的字符串形式,则会返回0

console.log(parseFloat("0b101")); // 0
console.log(parseFloat("0o101")); // 0
console.log(parseFloat("0x101")); // 0
console.log(parseFloat("101"));  // 101 

Number.parseInt()和Number.parseFloat()

ES6将转换字符串的这两个全局函数挂载到Number对象上作为Number的静态方法来使用,其效果等同于ES5下的全局方法。

console.log(Number.parseInt === parseInt); // true
console.log(Number.parseFloat === parseFloat); // true 
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 215,539评论 6 497
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,911评论 3 391
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 161,337评论 0 351
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,723评论 1 290
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,795评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,762评论 1 294
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,742评论 3 416
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,508评论 0 271
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,954评论 1 308
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,247评论 2 331
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,404评论 1 345
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,104评论 5 340
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,736评论 3 324
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,352评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,557评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,371评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,292评论 2 352

推荐阅读更多精彩内容