进击的 JavaScript（一）之类型转换

时间 2019-11-08

标签进击 javascript 类型转换栏目 JavaScript 繁體版

原文原文链接

提及 js 类型转换，都是头疼吧，晕晕的，可是不行啊，这东西很重要滴！

基础知识

JavaScript的数据类型分为六种，分别为null, undefined, boolean, string, number, object。数组

object是引用类型，包含数组，其它的五种是基本类型或者是原始类型(原始值)。函数

咱们能够用typeof方法打印来某个是属于哪一个类型的。不一样类型的变量比较或者运算，要先转类型，叫作类型转换。this

注意，typeof null 返回 "object"，它是一个特殊的对象值，含义是“非对象”。实际上，咱们一般认为null是自有类型的惟一成员。spa

1、显式转换

parseInt()和parseFloat() 字符串转数字prototype

js提供了parseInt()和parseFloat()两个转换函数。前者把值转换成整数，后者把值转换成浮点数。只有对String类型调用这些方法，这两个函数才能正确运行；对其余类型返回的都是NaN(Not a Number)。code

parseInt()：对象

parseInt("1234blue");   //1234 
parseInt("0xA");   //10 
parseInt("22.5");   //22 
parseInt("blue");   //NaN

parseInt()方法还有第二个参数，能够把二进制、八进制、十六进制或其余任何进制的字符串转换成整数。因此要解析十六进制的值，需以下调用parseInt()方法：blog

parseInt("AF",   16);   //175

固然，对二进制、八进制，甚至十进制（默认模式），均可以这样调用parseInt()方法：继承

parseInt("10",   2);    //2 
parseInt("66",   8);    //54 
parseInt("10",   10);   //10

parseFloat字符串转浮点数字，没有第二个参数。
下面是使用parseFloat()方法的示例：索引

parseFloat("1234blue");  //1234.0 
parseFloat("0xA");       //NaN 
parseFloat("22.5");      //22.5 
parseFloat("22.34.5");   //22.34 
parseFloat("0908");      //908 
parseFloat("blue");      //NaN

toFixed() 数字转成字符串

根据参数保留小数点后几位会四舍五入，若是无参，默认为0；
例：

(66.55).toFixed();    //"67"
(66.64).toFixed(1);   //"66.6"

toExponenttial() 数字转成字符串

根据参数保留小数点后几位 指数形式 会四舍五入
这个我不就不举例了，感兴趣的，本身百度下把。

Number对象的 toString() 方法，数字转字符串

根据2 8 16 （范围2 - 36）分别转为二进制八进制十六进制字符串,，
不带参，就默认为10，转十进制。
例：

(6).toString(2);     //"110"
(66).toString(8);    //"102"
(66).toString(16);   //"42"

下面三个构造函数，当没有使用 new 时，表示类型转换函数，使用new 时，表示转对象（建立一个对应对象），即转换获得的值建立一个对应的对象。

Boolean()

它会把 “真值” 转为 true ， “假值” 转为 false。

Boolean()方法的示例：

Boolean("");               //false   “假值”
Boolean("zdx");            //true    “真值” 
Boolean(66);               //true    “真值” 
Boolean(null);             //false   “假值”
Boolean(0);                //false   “假值”
Boolean(new Object());     //true    “真值”

Number()

有如下规律：

false、null、""、[]，转为0
true ，转1
数字转数字
全是数字的字符串转数字
数组内全是数字（不能有逗号）转数字
数组内字符串全是数字（不能有逗号）转数字
其余都是 NaN

大栗子：

Number(false);            //0 
Number(null);             //0 
Number("");               //0 
Number([]);               //0
Number(true);             //1 
Number("66");             //66 
Number("66f");            //NaN 
Number(new Object());     //NaN 
Number([66]);             //66
Number(["66"]);           //66       
Number([6,6]);            //NaN
Number(["6f6"]);          //NaN

String()

String()可把任何值转换成字符串。它就是调用传进参数的 toString()方法。使用String()转换成字符串和调用toString()方法的惟一不一样之处在于，对null或undefined值转换能够生成字符串而不引发错误：

String()方法的示例：

String(null);            //"null" 

var   null   =   null; 
null.toString();        //报错

Object()

这个函数，使用和不使用 new 是同样的。

它会把原始值，根据它的类型，使用对应的构造函数，建立一个对象。null 和 undefined 和建立一个空对象。

Object(66);           //数字对象，等于  new Number(66)
Object("66");         //字符串对象，等于  new String("666")
Object(true);         //布尔对象， 等于  new Boolean(true)
Object(null);         //空对象，等于 new Object()
Object(undefined);    //空对象，等于 new Object()

2、隐式转换

（一）、全部类型转为布尔

JavaScript 的基础类型中有布尔类型，这个类型的值，只有两个值---- true 和 false

任意的JavaScript 的值均可以转换为布尔值。但只有下面这六个值会转为false：

""
0
-0
null
undefined
NaN

其余全部值，包括全部对象（数组）都会转换为 true。布尔值 false，和上面6个能转为false 的值，咱们通常称为“假值”，其余值称为“真值”。（“真值”等价true，“假值”等价false）

注意！！！在JavaScript 中，任何但愿使用布尔值的地方，都会将操做数看成 “真假” 或 “假值” 对待（即把“真值”当true，“假值”当false）。这句话你如今不懂没事，看完下面的，或许你就懂了，哈哈。

（二）、原始值转为数字

字符串转数字

当字符串里，全为数字时，转数字，其余都为NaN。空字符串就转0

+ "666";    //666
+ "66f";    //NaN
+ "";       //0

布尔转数字

这个比较简单了。
true 转 1；false 转 0；

+ true;   //1
+ false;  //

null 转数字

null 转 0。

+ null;        //0

undefined 和 NaN 转数字

undefined 和 NaN 都转 NaN。

+ undefined;   //NaN
+ NaN;         //NaN

（三）、原始值转为字符串

这个也比较简单，原始值到字符串，就原封不动的转（加个双引号）。

"zdx" + true;    //"zdxtrue"

（四）、引用类型( 对象 )转为原始值

对象转布尔

对象转布尔都为 true；等同于 Boolean()

![];     //false    这里取反了，注意，取反会把操做值转布尔
!{};     //false

对象转数字

对象转数字，首先调用 valueOf()，若是返回的是原始值，再转数字（须要的话），并返回；不然调用 toString()，若是返回的是原始值，再转数字，并返回;不然抛出一个类型错误。

+ [];    //0
//[].valueOf();   返回数组自己[]，因此调用 [].toString(); 返回 空字符串"",""再转数字 0；
+ (new Date());   //1526008864094
//调用  (new Date()).valueOf(); 返回1526008864094

对象转字符串

对象转字符串，跟转数字的规则同样。只不过是转字符串。
首先调用 valueOf()，若是返回的是原始值，再转字符串（须要的话），并返回；不然调用 toString()，若是返回的是原始值，再转字符串，并返回;不然抛出一个类型错误。

"66" + [];    //"66"
"66" + {};    //"66[object Object]"

总结：对象对原始值，除了布尔类型，其余都是先调用valueOf，而后根据须要调用toString。

想知道，js 每一个内置对象的valueOf() 和 toString()方法，能够翻到最下面，附录。

3、隐式转换发生的地方

隐式转换一般发生在表达式和运算符。

（1）加减乘除：

加号 +

二元运算符用法（两个操做数）

能够对数字作加法，也能够作字符串链接操做。
当两个操做数都是数字或字符串时，计算是显然的。其余状况下，有以下规则

对象转原始值，除了Date 对象直接调用toString，其余对象，调用自身的valueOf 方法，但有的对象自身没有valueOf，或者获得的不是原始值，此时调用toString。
第一步转换后，若是其中一个是字符串的话，另外一个操做数也转字符串，进行字符串链接。
不然，都转为数字(或者NaN),进行加法。

栗子来了：

1 + new Date();     //"1Fri May 11 2018 14:20:50 GMT+0800 (中国标准时间)"

1 + new Number(2);    //3  (new Number).valueOf(); 返回2， 和1 作加法

"66" + 6;       //666    6 转 "6"

1 + {};         //"1[object Object]"   ({}).toString()

true + false;   //1    都转数字

1 + null;       //1    null 转数字

1 + undefined;  //NaN   undefined 转 NaN

实际代码中，常常这样

var x = 66;
x + "";     //"66"    等价于 String(x)

注意：两点！

不要把对象字面量形式的值放在前面。
从左到右的进行 + 运算。

//对象字面量形式放在前面的结果比较复杂，不建议使用。（下面的结果不是惟一的）
{} + 1;     //1
{} + "1";   //1
{} + {};    //"[object Object][object Object]"
{x:1} + {};  //NaN

//从左到右，逐个作 + 运算
1 + 2 + "";    //"3"
1 + "" + 2;    //"12"

一元运算符用法（一个操做数）

把操做数转换为 数字（或者NaN），并返回它。

+ "666";       //666   等价于 Number("666")
+ undefined;   //NaN

减号 -

都是转数字。

- "666";    //-666
- "66f";    //NaN
1 - null;   //1

乘号 *

都是转数字

1 * "666";     //666
1 * null;      //0

除号 /

都是转数字

"666" / 1;     //666
1 / true;      //1

（2）比较运算符（> < >= <=）

比较运算符用来检测两个操做数（数字或字符串）的大小关系（数值大小或者字符串首个字符的16位Unicode的大小 ）。

比较运算符的操做数多是任意类型。但只有数字和字符串才能比较。所以，它会把别的操做数进行类型转换，规则以下：

对象转原始值，若是valueOf()返回原始值，直接比较，不然，调用toString()进行转换。
转原始值后，若是两个操做数都是字符串，那么将按字符串首个字符的16位Unicode的大小 进行比较。
不然都转数字比较。Infinity比任何数字都大（除了自身），-Infinity 相反。若是一个操做数是NaN（或转NaN）,结果返回false。

11 < 3;

"11" < "3";   //true    "11" 首个字符串 "1" 的16位Unicode 值比 "3"的16位Unicode 小

//"11".charCodeAt(0).toString(16) 31

//"3".charCodeAt(0).toString(16)  33

"11" < 3;     //false   "11" 转 11，false

{} < 3;       //false   {}转原始值字符串，字符串转NaN， false

null < 3;     //true    null 转数字

最后要注意的是，<= 和 >= 比较时，并不根据 == 和 === 的规则（在下方）比较，它就仅仅表示数值或字符串之间的比较。

null >= undefined    //false

（3）in运算符

把左操做数转字符串

in 运算符但愿它的左操做数是一个字符串或能够转换为字符串，右操做数是一个对象。若是，右侧的对象拥有一个名为左侧操做数值的属性名，那么表达式返回true。

var point = { x:1, y:2};
"x" in point;    //true  point 有一个 x 的属性名

var arr = [a,b,c];
1 in arr;        //true   数组的索引就至关于 属性名

（4）！和！！

！它会把操做值转为布尔值（“真值”为true，“假值”为false），对布尔值求反。（结果只有true，false）

例：

console.log(!"");           //true
console.log(!0);            //true
console.log(!-0);           //true
console.log(!null);         //true
console.log(!undefined);    //true
console.log(!NaN);          //true
console.log(!false);        //true

！！获得操做值等价的布尔值（“真值”为true，“假值”为false）
等同于 Boolean()，常常称！！为强制转换。
例：

console.log(!!"");           //false
console.log(!!0);            //false
console.log(!!-0);           //false
console.log(!!null);         //false
console.log(!!undefined);    //false
console.log(!!NaN);          //false
console.log(!!false);        //false

总结：“假值” 取反都是true， “真值”取反为false；“假值” 强制转换都是 false， “真值”强制转换为 true

（5）== 和 ===

都知道 == 是判断左右值是否想等的。而 === 不只判断右右值是否想等，还要判断，类型是否同样。结果返回布尔值

== 的用法
NaN是JavaScript中惟一一个不等于任何值的（包括它本身）。(NaN == NaN) // false

通常对NaN的判断：

function isNaN(num){
    return typeof num === "number" && num !== num;
}

注意，跟js 自带的 isNaN 方法不同。

左右两边类型相同

一、原始值的比较

它们的比较，就是值的直接比较。
好比：

console.log(null == null);               //true
console.log(undefined == undefined);     //true
console.log(666 == 666);                 //true
console.log(666 == 1);                   //false
console.log("周大侠啊" == "周大侠啊");      //true
console.log("周大侠啊" == "大佬");         //false
console.log(true == true);               //true
console.log(true == false);              //false

二、对象的比较

对象和原始值不一样，首先，它们是可变的-----它们的值是可修改的：

var o = { x:1 };   //定义一个对象
o.x = 2;           //修改x的值

var a = [1,2,3];   //数组也是可修改的
a[0] = 0;          //修改数组第一个元素

对象的比较并不是值的比较，而是引用（内存地址）的比较。

var o1 = { x:1 };
var o2 = { x:1 };
console.log( o1 == o2 );    //false
//即便 对像的属性，值彻底相同， 也不相等

var o3 = o1;
console.log( o1 == o3 );    //true
//o3 和  o1 引用的是同一对象。（即指向的是同一块储存地址）

//数组同上

左右两边类型不一样

若是 == 两边的类型不一样，则比较时，有如下两个个规则：

undefined等于null
其余都转数字比较

对象经过valueOf 或 toString 转换为原始值，原始值在对应转数字。

总结:左右两边类型不一样， == 在比较时，除了(null == undefined)，NaN，其余都是转为数字比较，历来不会转为布尔值！

举个大栗子：

//1. undefined等于null
undefined == null; //ture

//2. 字符串和数字比较时，字符串转数字
"0" == 0;  //true
"f" == 0;  //false
//字符串转数字时，只有在字符串是纯数字时，转对应数字，其余都转为 NaN。

// 3. 字符串和布尔比较时，都转为数字
"0" == false;   //true
"1" == true;    //true

//4. 数字和布尔比较时，布尔转数字
1 == true;    //true
0 == false;   //true
//true 转 1， false 转0；

//5.对象 和 字符串，数字比较， 都转数字。
new String("66") == "66";      //true
new String("zdx") == "zdx";    //false
new String("66") == 66;        //true

=== 的用法

这个比较，首先，看两边类型是否一致，不一致，直接false，一致的话，再根据 == 的使用规则，进行比较。

（6）！= 和！==

这两个运算跟取反（！）操做是不同的！，注意区分。

这两个运算，是在 == 和 === 比较事后的结果，进行取反（就是对 true 和 false 取反，由于，== 和 === 的返回值只有 true 和 false）。

简单栗子:

"0" == 0;  //true
"f" === 0;  //false

"0" != 0;  //false
"f" !== 0;  //true

（7）&&、||

&& 逻辑与

若是两侧都是布尔值，进行布尔（AND）运算。
不然它会先计算左侧表达式，若是为 “假值”，返回这个值，若是是“真值”，计算右侧表达式，并返回计算结果。

看：

true && false;       //false
1 && 2;              //2
null && 2;           //null
1-1 && 2;            //0
2-1 && 0;            //0

因此，有时候就会这样写代码：

if( a==b ) start();
a == b && start();    //效果同上

|| 逻辑或

它跟 && 的行为是同样的，只是它的作的是布尔（OR）运算，返回的状况相反。

若是两侧都是布尔值，进行布尔（OR）运算。
不然它会先计算左侧表达式，若是为 “真值”，返回这个值，若是是“假值”，计算右侧表达式，并返回计算结果。

true || false;       //true
1 || 2;              //1
null || 2;           //2
1-1 || 2;            //2
2-1 || 0;            //1

（8）if 语句

它会计算操做数的值，“真值” 表现为true ， “假值” 表现为false。

附录

1、Object

一、valueOf
返回对象自己。

({x:1,y:2}).valueOf();    //{x: 1, y: 2},返回的是对象！

二、toString
返回 "[object type]"，其中type是对象的类型。

//这里使用函数的call方法，指定 this的指向
var toString = Object.prototype.toString;

toString.call(new Date); // [object Date]
toString.call(new String); // [object String]
toString.call(Math); // [object Math]

toString.call(undefined); // [object Undefined]
toString.call(null); // [object Null]

2、Boolean

一、valueOf
返回布尔值。

(true).valueOf();    //true , 返回的是原始值，Boolean类型

二、toString
返回该对象的字符串形式。

(true).toString();     //"true"，返回的是原始值，string类型

3、Date

一、valueOf
返回存储的时间是从 1970 年 1 月 1 日午夜开始计的毫秒数 UTC。

(new Date()).valueOf();    //1525943413141  一串数字

二、toString
返回一个美式英语日期格式的字符串.

(new Date()).toString();    //"Fri May 11 2018 10:26:16 GMT+0800 (中国标准时间)"  原始值，string类型

4、Number

一、valueOf
返回数字值。

(66).valueOf();    //66   返回的是原始值，Number类型

二、toString
返回的是原始值，String类型
根据2 8 16 （范围2 - 36）分别转为二进制八进制十六进制字符串,，
不带参，就默认为10，转十进制。
例：

(66).toString(2);    //"1000010"
(66).toString(8);    //"102"
(66).toString(16);   //"42"

5、String

一、valueOf
返回字符串值。

("666").valueOf();    //"666"   返回的是原始值，String类型
("zdx").valueOf();    //"zdx"   返回的是原始值，String类型

二、toString
和valueOf 效果同样，返回字符串值。

("666").toString();    //"666"   返回的是原始值，String类型
("zdx").toString();    //"zdx"   返回的是原始值，String类型

6、Array

一、valueOf
自身没有该方法，继承Object.prototype.valueOf。返回的是数组对象！

([1,2,3]).valueOf();     //(3) [1, 2, 3]，

二、toString
返回表示该数组的字符串，跟使用 Array.prototype.join(",")，效果等同

([1,2,3]).toString();     //"1,2,3",    原始值，string类型
([1,2,3]).join(",");      //"1,2,3",

7、Function

一、valueOf
自身没有该方法，继承Object.prototype.valueOf。
返回的是函数,使用typeof 返回 function，但注意原始值没有function类型

function a(){ console.log(666) };
a.valueOf();    //ƒ a(){ console.log(666) };

二、toString
返回当前函数源代码的字符串。

function a(){ console.log(666) };
a.toString();    //"function a(){ console.log(666) }";返回的是原始值，string类型

8、Error

一、valueOf
自身没有该方法，继承Object.prototype.valueOf。
返回Error 对象自己

(new Error("fatal error")).valueOf();   //Error: fatal error

二、toString
返回一个指定的错误对象（Error object）的字符串表示。

var e = new Error("fatal error");
print(e.toString()); // "Error: fatal error"

9、Math

它是全局对象，不属于函数。
一、valueOf
自身没有该方法，继承Object.prototype.valueOf。

Math.valueOf();     //返回Math 对象自己

二、toString
自身没有该方法，继承Object.prototype.toString。

Math.toString();    //"[object Math]"

进击的 JavaScript（一） 之 类型转换