JS类型转换(最新详解版)

JavaScript 中有五种基本数据类型(其中包括 String、Number、Boolean、Function、Symbol)、三种对象类型(其中包括 Object、Date、Array)和两种特殊类型(其中包括 Null、Undefined)。不同的类型之间运算需要先对数据的类型进行转换,类型转换是将一种数据类型转换为另一种数据类型的过程

在 JavaScript 有两种类型转换的方式,分别是隐式类型转换和强制类型转换(也叫显式类型转换)


JS 隐式类型转换

隐式转换就是自动转换,通常发生在一些数学运算中。因为 JavaScript 是一种弱类型的语言,在一个表达式中,运算符两边的类型可以不同(比如一个字符串和一个数字相加),JavaScript 解释器会在运算之前将它们的类型进行转换

var str = "https://www.jianshu.com/u/32841c0369fb#js";
var num = 123;
var res = str + num;
document.write(typeof res);  // 输出:string
document.write(res);         // 输出:https://www.jianshu.com/u/32841c0369fb#js123

通过运行结果可以看出,将一个字符串与一个数字相加,会得到一个字符串类型的值。如果是在 C语言或者 Java 语言中的话,上面的运算会因为运算符两边的数据类型不一致而导致报错,但在 JavaScript 中则不会,因为在运算之前 JavaScript 解释器会将上面的 num 变量隐式的转换为字符串类型,之后再进行运算。
JavaScript 中,表达式中包含以下运算符时,会发生隐式类型转换:

  • 算术运算符:加(+)、减(-)、乘(*)、除(/)、取模(%);
  • 逻辑运算符:逻辑与(&&)、逻辑或(||)、逻辑非(!);
  • 字符串运算符:+、+=。
document.write("3" - 2);           // 输出:1
document.write("3" + 2);           // 输出:"32"
document.write(3 + "2");           // 输出:"32"
document.write("3" * "2");         // 输出:6
document.write("10" / "2");        // 输出:5
document.write(1 + true);          // 输出:2
document.write(1 + false);         // 输出:1
document.write(1 + undefined);     // 输出:NaN
document.write(3 + null);          // 输出:3
document.write("3" + null);        // 输出:"3null"
document.write(true + null);       // 输出:1
document.write(true + undefined);  // 输出:NaN

通过运行结果可以得出:

  • 字符串加数字,数字会转换为字符串;
  • 数字减字符串,字符串会转换为数字,如果字符串无法转换为数字(例如"abc"、"JavaScript"),则会转换为 NaN;
  • 字符串减数字,字符串会转换为数字,如果字符串无法转换为数字,则会转换为 NaN;
  • 乘、除运算时,也会先将字符串转换为数字。

JS 强制类型转换

与隐式类型转换相反,强制类型转换需要手动进行,在 JavaScript 中,强制类型转换主要是通过调用全局函数来实现的,例如 Number()、Boolean()、parseInt()、parseFloat() 等。

使用 Number() 函数

Number() 函数的语法格式如下:

Number(value);
document.write(Number("10.5"));  // 输出:10.5
document.write(Number(true));    // 输出:1
document.write(Number(false));   // 输出:0
document.write(Number(null));    // 输出:0

在使用 Number() 函数时,有以下几点需要注意:

  • 如果参数中只包含数字,将转换为十进制数字,忽略前导 0 以及前导空格,如果数字前面有负(-)号,那么-会保留在* 转换结果中,如果数字前面有加(+)号,转换后会删掉+号;
  • 如果参数中包含有效浮点数字,将转换为对应的浮点数字,忽略前导 0 以及前导空格,同样对于数字前的正负号,会保留负号忽略正号;
  • 如果参数中包含有效的十六进制数字,将转换为对应大小的十进制数字;
  • 如果参数为空字符串,将转换为 0;
  • 如果参数为布尔值,则将 true 转换为 1,将 false 转换为 0;
  • 如果参数为 null,将转换为 0;
  • 如果参数为 undefined,将转换为 NaN;
  • 如果参数为 Date 对象,将转换为从 1970 年 1 月 1 日到执行转换时的毫秒数;
  • 如果参数为函数、包含两个元素以上的数组对象以及除 Date 对象以外的其他对象,将转换为 NaN;
  • 如果在参数前面包含了除空格、+和-以外的其他特殊符号或非数字字符,或在参数中间包含了包括空格、+和-的特殊符号或非数字字符,将转换为 NaN。
使用 parseInt() 函数

parseInt() 函数的语法格式如下:

parseInt(string, radix);

其中 string 为要转换的值,如果参数不是一个字符串,则会先将其转换为字符串,字符串开头的空白将会忽略;radix 为一个可选参数,表示字符串的基数,取值范围在 2 到 36 之间,例如将 radix 参数设置为 16,则表示将 string 转换为一个十六进制数。
在使用 parseInt() 函数时,有以下几点需要注意:

  • 解析字符串时,会忽略字符串前后的空格,如果字符串第一个字符为负号(-),那么负号会保留在转换结果中,如果字符串第一个字符为正号(+),那么转换后将忽略正号;
  • 如果字符串前面为除空格、正号(+)、负号(-)以外的特殊符号或者除 a~f(或 A~F)之外的非数字字符,那么字符串将不会被解析,返回结果为 NaN;
  • 在字符串中包含空格、小数点(.)等特殊符号或非数字的字符时,解析将在遇到这些字符时停止,并返回已解析的结果;
  • 如果字符串是空字符串,返回结果为 NaN。
document.write(parseInt("1101",2));   // 输出:13
document.write(parseInt("a37f",16));  // 输出:41855
document.write(parseInt("123"));      // 输出:123
document.write(parseInt("  123"));    // 输出:123
使用 parseFloat() 函数

parseFloat() 函数的语法格式如下:

parseFloat(string);

其中 string 为要被转换为浮点数的值,如果转换失败,则会返回 NaN。

在使用 parseFloat() 函数时,有以下几点需要注意:

  • 如果在解析的过程中遇到了正号(+)、负号(-)、数字(0-9)、小数点(.)、或科学计数法中的指数(e 或 E)以外的字符,则会忽略该字符以及之后的所有字符,并返回解析到的浮点数;
  • 解析过程中若遇到多个小数点,则会在解析到第二个小数点时停止,并返回第二个小数点之前的解析结果;
  • 解析过程中会忽略参数开头或末尾的空白字符;
  • 如果参数的第一个字符不能被解析为数字,则会返回 NaN。
document.write(parseFloat("312.456"));  // 输出:312.456
document.write(parseFloat("-3.12"));    // 输出:-3.12
document.write(parseFloat("+3.12"));    // 输出:3.12
document.write(parseFloat(".12"));      // 输出:0.12

读后有收获可以请作者喝咖啡

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

推荐阅读更多精彩内容