资讯专栏INFORMATION COLUMN

JavaScript基础---强制类型转换

lufficc / 3108人阅读

摘要:如果有并且返回基本类型值,再使用该值进行强制类型转换。四宽松相等和严格相等允许在相等比较中进行强制类型转换,而不允许。这时最好用来避免不经意的强制类型转换。这两个原则可以让我们避开几乎所有强制类型转换的坑。

一、类型转换规则 1.ToString

对于普通对象来说,除非自行定义toString方法,否则就会调用Object.prototype.toString()方法,如果对象有自己的toString方法,字符串化就会调用该方法并使用其返回值。

2.ToNumber

对于基本类型其中true转换为1,false转换为0;undefined 转换为 NaN,null 转换为 0

对于对象类型会首先转换成为基本类型值如果返回的是非数字的基本类型值,则再遵循基本类型转换规则将其强制转换为数字。为了将值转换为相应的基本类型值,抽象操作ToPrimitive会首先检查该值是否有 valueOf() 方法。如果有并且返回基本类型值,再使用该值进行强制类型转换。如果没有就使用 toString() 的返回值(如果存在)来进行强制类型转换。如果 valueOf() 和 toString() 均不返回基本类型值,会产生 TypeError 错误。

let a = {
    valueOf:function(){
        return "42";
    }
};
let b = {
    toString:function(){
        return "42";
    }
};
let c = [4,2];
c.toString = function(){
    return this.join(""); //"42"
};

Number(a);     //42
Number(b);     //42
Number(c);     //42
Number("");    //0
Number([]);    //0
Number(["abc"];//NaN
3.ToBoolean

JavaScript中的值可以分为能被强制转换为false的值和能被强制转换为true的值两类。
假值:

undefined

null

false

+0、-0、NaN

""

真值:除了以上列表的都可以理解为是真值,所有对象都是真值

let a1 = new Boolean( false );
let b1 = new Number( 0 );
let c1 = new String( "" );
let d1 = Boolean(a1 && b1 && c1); //true

let a2 = [];
let b2 = {};
let c2 = function(){};
let d2 = Boolean(a2 && b2 && c2); //true
二、显示强制类型转换 1.字符串与数字之间的显示转换

字符串和数字之间的转换是通过 String(..)Number(..) 这两个内建函数。
除了 String(..) 和 Number(..) 以外,还有其他方法可以实现字符串和数字之间的显式 转换:

let a = 42;
let b = a.toString();
let c = "3.14";
let d = +c;
b; // "42"
d; // 3.14

a.toString() 是显式的,不过其中涉及隐式转换。因为 toString() 对 42 这样的基本类型值不适用,所以 JavaScript 引擎会自动为 42 创建一个封装对象,然后对该对象调用 toString()。这里显式转换中含有隐式转换。

2.显示转换为布尔值
let a = "0";
let b = [];
let c = {};
let d = "";
let e = 0;
let f = null;
let g;
Boolean( a ); // true
Boolean( b ); // true
Boolean( c ); // true
Boolean( d ); // false
Boolean( e ); // false
Boolean( f ); // false
Boolean( g ); // false

虽然 Boolean(..) 是显式的,但并不常用。显式强制类型转换为布尔值最常用的方法是 !!

let a = "0";
let b = [];
let c = {};
let d = "";
let e = 0;
let f = null;
let g;
!!a; // true
!!b; // true
!!c; // true
!!d; // false
!!e; // false
!!f; // false
!!g; // false
三、隐式强制类型转换 1.字符串和数字之间的隐式强制类型转换 (1)+运算符

即能用于数字加法,也能用于字符串拼接
如果 + 的其中一个操作数是字符串(或者通过对其调用 ToPrimitive 抽象操作得到字符串), 则执行字符串拼接;否则执行数字加法。因为数组的 valueOf() 操作无法得到简单基本类型值,于是它转而调用 toString()。因此下例中的两个数组变成了 "1,2" 和 "3,4"。+ 将它们拼接后返回 "1,23,4"。

let a = "42";
let b = "0";
a + b; // "420"

let c = 42;
let d = 0;
c + d; // 42

let x = [1,2];
let y = [3,4];
x + y; // "1,23,4"
可以使用+运算符进行字符串转换,将数字和空字符串 "" 相 + 来将其转换为字符串
let a = 42;
let b = a + "";
b; // "42"
a + ""(隐式)和前面的String(a)(显式)之间有一个细微的差别需要注意。

根据 ToPrimitive抽象操作规则,a + ""会对a调用valueOf()方法,然后通过ToString抽象 操作将返回值转换为字符串。而 String(a) 则是直接调用 ToString()。它们最后返回的都是字符串,但如果 a 是对象而非数字结果可能会不一样

let a = {
    valueOf: function() { return 42; },
    toString: function() { return 4; }
};
a + "";         // "42"
String( a );    // "4"
(2)从字符串强制类型转换为数字的情况

-是数字减法运算符,因此a - 0会将a强制类型转换为数字。也可以使用a * 1和a /1,因为这两个运算符也只适用于数字,只不过这样的用法不太常见

let a = [3];
let b = [1];
a - b; // 2
2.隐式强制类型转换为布尔值

下面的情况会发生 布尔值隐式强制类型转换:
(1) if (..)语句中的条件判断表达式。

(2) for ( .. ; .. ; .. )语句中的条件判断表达式(第二个)。

(3) while (..) 和 do..while(..) 循环中的条件判断表达式。

(4) ? :中的条件判断表达式。

(5) 逻辑运算符 ||(逻辑或)和 &&(逻辑与)左边的操作数(作为条件判断表达式)。

以上情况中,非布尔值会被隐式强制类型转换为布尔值,遵循前面介绍过的 ToBoolean 抽象操作规则。

四、宽松相等和严格相等

== 允许在相等比较中进行强制类型转换,而 === 不允许。== 和 === 都会检查操作数的类型。区别在于操作数类型不同时它们的处理方式不同。

1.字符串和数字之间的相等比较
let a = 42;
let b = "42";
a === b;    // false
a == b;     // true

因为===没有强制类型转换,所以 a === b 为 false,42 和 "42" 不相等。而 a == b 是宽松相等,即如果两个值的类型不同,则对其中之一或两者都进行强制类型转换。
转换规则如下:
(1) 如果 Type(x) 是数字,Type(y) 是字符串,则返回 x == ToNumber(y) 的结果。
(2) 如果 Type(x) 是字符串,Type(y) 是数字,则返回 ToNumber(x) == y 的结果。

2.其他类型和布尔类型之间的相等比较
let a = "42";
let b = true;
a == b; // false

转换规则如下:
(1) 如果 Type(x) 是布尔类型,则返回 ToNumber(x) == y 的结果;
(2) 如果 Type(y) 是布尔类型,则返回 x == ToNumber(y) 的结果。

上例中Type(x)是布尔值,所以ToNumber(x)将true强制类型转换为1,变成1 == "42",二者的类型仍然不同,"42" 根据规则被强制类型转换为 42,最后变成 1 == 42,结果为 false。

3.null和undefined之间的相等比较

(1) 如果 x 为 null,y 为 undefined,则结果为 true。
(2) 如果 x 为 null,y 不是 undefined或者null,则结果为 false。
(3) 如果 x 为 undefined,y 为 null,则结果为 true。
(4)如果 x 为 undefined,y 不是 undefined或者null,则结果为 false。

let a = null;
let b;
a == b;     // true
a == null;  // true
b == null;  // true
a == false; // false
b == false; // false
a == "";    // false
b == "";    // false
a == 0;     // false
b == 0;     // false
4.对象和非对象之间的相等比较

(1) 如果 Type(x) 是字符串或数字,Type(y) 是对象,则返回 x == ToPrimitive(y) 的结果;
(2) 如果 Type(x) 是对象,Type(y) 是字符串或数字,则返回 ToPromitive(x) == y 的结果。

let a = 42;
var b = [ 42 ];
a == b; // true

[ 42 ] 首先调用 ToPromitive 抽象操作,返回 "42",变成 "42" == 42,然后 又变成 42 == 42,最后二者相等

5.比较少见的情况 (1)假值的相等比较
"0" == null;          // false
"0" == undefined;     // false
"0" == false;         // true -- 
"0" == NaN;           // false
"0" == 0;             // true
"0" == "";            // false
false == null;        // false
false == undefined;   // false
false == NaN;         // false
false == 0;           // true -- 
false == "";          // true --
false == [];          // true -- 
false == {};          // false
"" == null;           // false
"" == undefined;      // false
"" == NaN;            // false
"" == 0;              // true -- 
"" == [];             // true -- 
"" == {};             // false
0 == null;            // false
0 == undefined;       // false
0 == NaN;             // false
0 == [];              // true -- 
0 == {};              // false
(2)安全运用隐式强制类型转换

如果两边的值中有 true 或者 false,千万不要使用 ==

如果两边的值中有 []、"" 或者 0,尽量不要使用 ==。

这时最好用 === 来避免不经意的强制类型转换。这两个原则可以让我们避开几乎所有强制 类型转换的坑。

五、Object.is(..) 判断两个值是否相等

以下情况返回true:

两个值都是 undefined

两个值都是 null

两个值都是 true 或者都是 false

两个值是由相同个数的字符按照相同的顺序组成的字符串

两个值指向同一个对象

两个值都是数字并且

都是正零 +0

都是负零 -0

都是 NaN

都是除零和 NaN 外的其它同一个数字

对于 ES6 之前的版本,Object.is(..) 有一个简单的 polyfill:

if (!Object.is) {
    Object.is = function(v1, v2) {
        // 判断是否是-0
        if (v1 === 0 && v2 === 0) {
            return 1 / v1 === 1 / v2;
        }
        // 判断是否是NaN 
        if (v1 !== v1) {
            return v2 !== v2;
        }
        // 其他情况
        return v1 === v2;
    };
}

参考文章:
JavaScript高级程序设计
你不知道的JavaScript(中卷)

     
     

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/98457.html

相关文章

  • Javascript基础之-强制类型转换(三)

    摘要:抽象相等和严格相等。首先,也是如果有对象的话,会把对象转为基本类型值,在进行比较。 这一节,应该算是强制类型转换的最后一个小节了,这一部分呢,主要会讲比较操作中遇到的强制类型转换。 抽象相等(==)和严格相等(===)。 简单且粗略的来说,抽象相等和严格相等的区别就是抽象相等在比较的时候,如果比较的两个数类型不同,会先进行类型转换再比较,而严格类型呢,比较简单粗暴一些,直接返回fals...

    GeekGhc 评论0 收藏0
  • JavaScript数据类型及(隐式)类型转换详解

    摘要:显示的调用转换过程称为显式强制类型转换,隐式的情况称为隐式强制类型转换。隐式强制类型转换让代码变得晦涩难懂而又便捷而奇妙。事实上,允许在比较中进行强制类型转换,而不允许。如果有并且返回基本类型值,就使用该值进行强制类型转换。 JavaScript是一种非常灵活的现代编程语言,灵活到使用者极其容易被忽视的它那广阔的世界以及它带给我们的无限遐想空间。本文将对JavaScript最最基础也最...

    hiyayiji 评论0 收藏0
  • Javascript基础之-强制类型转换(一)

    摘要:转换为字符串规则如下图代码大致就是普通其他基本类型转为字符串的话,就直接转为其值的字符串表达形式,如果是基本类型的封装对象,会先拆封,然后再转为字符串,如果是普通对象,则会调用其内部的值,如果是极大数和级小数,将会进行一些转化,具体规 转换为字符串规则如下图代码: console.log(String(undefined)); // undefined console.log(Str...

    leon 评论0 收藏0
  • JavaScript 需要检查变量类型

    摘要:一返回值调用外部方法获取的值需要对类型做判断,因为我们对方法返回的值是有期望值类型,但是却不能保证这个接口返回的值一直是同一个类型。 19年目标:消灭英语!我新开了一个公众号记录一个程序员学英语的历程 有提升英语诉求的小伙伴可以关注公众号:csenglish 程序员学英语,每天花10分钟交作业,跟我一起学英语吧 javascript作为一门动态类型语言,具有很高的动态灵活性,当定义函数...

    Songlcy 评论0 收藏0
  • Javascript基础之-强制类型转换(二)

    摘要:所以无论还是都会进行类型转换,唯一的区别,就是会置否而不会。这时候,肯定会有人问,假如说我有其他的数据类型呢,又不是数字又不是字符串,比如说数组啊,对象啊,布尔值啥的,那么如果是引用数据类型,则先转为基本数据类型,再进行比较。 上一章主要讲了转换到数字,字符串和布尔类型的一些知识点,那么这一讲接着上面的继续讲。 思考下面这个问题: console.log(+123); // 123 ...

    kk_miles 评论0 收藏0

发表评论

0条评论

lufficc

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<