特别声明:如果您喜欢小站的内容,可以点击申请会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!或添加QQ:874472854(^_^)
最近在项目中使用到字符串转数字。刚开始使用的是Number()
,结果可想而知。后来Review代码的时候,应该使用parseInt()
。我当时在纳闷,为什么要使用parseInt()
呢?结果老板甩过一句话,看规范去。现在项目可算暂告一段落,所以得自己整清楚Number()
和parseInt()
有什么区别。
数据类型
在学习数据类型转换之前,先简单点回忆一下JavaScript中的数据类型。在JavaScript中的每一个值,都属于某一种数据类型。JavaScript的数据类型有七种:
- Boolean:布尔值,
true
和false
两个特定值 - Null:表示无值,即此处的值就是“无”的状态
- Undefined: 表示“未定义”或不存在,即由于目前没有定义,所以此处暂时没有任何值
- Number:整数和小数
- String:字符组成的文本
- Symbol (这个是ES6新定义的数据类型)
- Object:各种值组成的集合
其中Boolean
、Null
、Undefined
、Number
、String
和Symbol
称为原始类型(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
从上面的结果可以看出:
Number
、String
和Boolean
值分别返回number
、string
、boolean
Function
返回function
Undefined
和未赋值的变量,返回undefined
Null
、{}
、[]
和window
返回object
instanceof运算符
在typeof
方法中,对[]
、{}
显示的结果都是object
。那么怎么区分它们呢?JavaScript中引入了另一个运算符instanceof
来解决这个问题。instanceof
和typeof
相似,用于识别正在处理的对象的类型。与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
,如果A
是B
的实例则返回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
也可以用来检测内置兑现,比如Array
、RegExp
、Object
和Function
:
[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
的实例,为什么呢?我们来分析一下[]
、Array
和Object
三者之间的关系:从instanceof
能够判断出[].__proto__
指向Array.prototype
,而Array.prototype.__proto__
又指向了Object.prototype
,Object.prototype.__proto__
指向了null
,标志着原型链的结束。因此,[]
、Array
和Object
就形成了如下图所示的一条原型链:
从原型链可以看出,[]
的 __proto__
直接指向Array.prototype
, 间接指向Object.prototype
, 所以按照 instanceof
的
如需转载,烦请注明出处:https://www.w3cplus.com/javascript/data-type-conversion.html
如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!