JavaScript中数据类型转换

特别声明:小站对部分原创文章已开启付费阅读,并开通年费VIP通道,年费价格为 ¥365.00元。如果您喜欢小站的内容,可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

最近在项目中使用到字符串转数字。刚开始使用的是Number(),结果可想而知。后来Review代码的时候,应该使用parseInt()。我当时在纳闷,为什么要使用parseInt()呢?结果老板甩过一句话,看规范去。现在项目可算暂告一段落,所以得自己整清楚Number()parseInt()有什么区别。

数据类型

在学习数据类型转换之前,先简单点回忆一下JavaScript中的数据类型。在JavaScript中的每一个值,都属于某一种数据类型。JavaScript的数据类型有七种:

  • Boolean:布尔值,truefalse两个特定值
  • Null:表示无值,即此处的值就是“无”的状态
  • Undefined: 表示“未定义”或不存在,即由于目前没有定义,所以此处暂时没有任何值
  • Number:整数和小数
  • String:字符组成的文本
  • Symbol (这个是ES6新定义的数据类型)
  • Object:各种值组成的集合

其中BooleanNullUndefinedNumberStringSymbol称为原始类型(Primitive Type),即它们是最基本的数据类型,不能再细分。而Object称为合成类型(Complex Type),因为一个对象往往是多个原始类型的值的合成,可以看作是一个存放各种值的容器。其中对象又可分成三个子类型:

  • 侠义的对象(object
  • 数组(array
  • 函数(function

数据类型检测

在JavaScript中有四种方法,可以确定一个值到底是什么类型:

  • typeof运算符
  • instanceof运算符
  • constructor运算符
  • Object.prototype.toString方法

typeof运算符

typeof运算符可以返回一个值的数据类型,可能有以下结果。

typeof 123; // => number
typeof `123`; // => string
typeof false; // => boolean
typeof fn; // => function
typeof undefined; // => undefined
typeof null; // => object
typeof window; // => object
typeof {}; // => object
typeof []; // => object

从上面的结果可以看出:

  • NumberStringBoolean值分别返回numberstringboolean
  • Function返回function
  • Undefined和未赋值的变量,返回undefined
  • Null{}[]window返回object

instanceof运算符

typeof方法中,对[]{}显示的结果都是object。那么怎么区分它们呢?JavaScript中引入了另一个运算符instanceof来解决这个问题。instanceoftypeof相似,用于识别正在处理的对象的类型。与typeof方法不同的是,instanceof运算符要求开发者明确地确认对象为某特定类型。

instanceof运算符用于检查某个对象的原型链是否包含某个构造函数的prototype属性。例如:

obj instanceof Widget

obj的原型链上有很多对象(隐式原型),比如obj.__proto__obj.__proto__.__proto__等。如果这些对象里存在一个p === Widget.prototype,那么instanceof结果为true,否则为false

来看个示例,比如在JavaScript中,使用instanceof来判断A是否为B的实例对,表达式为A instanceof B,如果AB的实例则返回true,否则返回false。在这里需要特别注意的是:instanceof检测的是原型,来看段代码:

// 定义构造函数
function L() {};
function R() {};

var L = new L();
var P = new R();

function instance_of(L, R) {//L 表示左表达式,R 表示右表达式
    var O = R.prototype;// 取 R 的显示原型
    L = L.__proto__;// 取 L 的隐式原型
    while (true) { 
        if (L === null) 
            return false; 
        if (O === L)// 这里重点:当 O 严格等于 L 时,返回 true 
            return true; 
        L = L.__proto__; 
    } 
}
instance_of(L, R); // => false

在JavaScript原型继承结构里面,用[[Prototype]]表示对象隐式的原型,在JavaScript中用__proto__表示,并且在Firefox和Chrome浏览器中是可以访问得到这个属性的,但是IE下不行。所有JavaScript对象都有__proto__属性,但只有Object.prototype.__proto__null,前提是没有在Firefox或者Chrome下修改过这个属性。这个属性指向它的原型对象。到于显示的原型,在JavaScript里用prototype属性表示。用张图来表示:

由于instanceof是通过原型链来检查类型的,所以适用于任何object的类型检查。下面是instanceof使用的几个情景:

// 比如直接原型关系
function A () {}
(new A) instanceof A; // => true

// 原型链上的间接原型
function B () {}
B.prototype = new A
(new B) instanceof A // => true

instanceof也可以用来检测内置兑现,比如ArrayRegExpObjectFunction

[1, 2, 3] instanceof Array; // => true
/abc/ instanceof RegExp; // => true
({}) instanceof Object; // => true
(function (){}) instanceof Function; // => true

instanceof对基本数据类型不起作用,因为基本数据类型没有原型链。

3 instanceof Number; // => false
true instanceof Boolean; // => false
`abc` instanceof String; // => false
null instanceof XXX; // => always false
undefined instanceof XXX; // => always false

但可以这样使用:

new Number(3) instanceof Number; // => true
new Boolean(true) instanceof Boolean; // => true
new String('abc') instanceof String; // => true

前面的示例告诉我们,虽然instanceof能够判断出[]Array的实例,但它认为[]也是Object的实例,为什么呢?我们来分析一下[]ArrayObject三者之间的关系:从instanceof能够判断出[].__proto__指向Array.prototype,而Array.prototype.__proto__又指向了Object.prototypeObject.prototype.__proto__指向了null,标志着原型链的结束。因此,[]ArrayObject就形成了如下图所示的一条原型链:

从原型链可以看出,[]__proto__ 直接指向Array.prototype, 间接指向Object.prototype, 所以按照 instanceof

剩余80%内容付费后可查看
* 请输入阅读码(忘记阅读码?

如需转载,烦请注明出处:https://www.w3cplus.com/javascript/data-type-conversion.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部