脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JavaScript值类型转换

JavaScript中的值类型转换介绍

 更新时间：2014年12月31日 09:50:08   投稿：junjie  
这篇文章主要介绍了JavaScript中的值类型转换介绍,本文讲解了值类型转换规则、值类型转换与比较、显式类型转换、对类型自动转换的使用等内容,需要的朋友可以参考下

在JavaScript中进行+、-、*、/、==、!=等运算时，如果操作符左右两边的值类型与预期类型不一致，JavaScript会将操作符两边的值转换成预期的类型后再进行操作。预期值类型为string时，JavaScript会将值转换为string；预期值类型为number时，JavaScript会将值转换为number (如果无法转换为数值，则返回NaN)比如：

 

复制代码 代码如下:

console.log(10 + " cats");//10 cats
console.log(10 * " cats");//NaN, " cats" will be converted to NaN
console.log(10 + "2");//102
console.log(10 - "2");//8
console.log(10 / "2");//5
console.log(10 * "2");//20
console.log(10 * " 2");//20
console.log("10" * "2");//20

值类型转换规则

JavaScript中的值转换规则可以参考“JavaScript – The Definitive Guide”一书中的Table 3-2. JavaScript type conversions。比较值得注意的一些地方是：

1.undefined转换成number后结果为NaN。
2.null转换成number后结果为0。
3.空字符串”"转换成number后结果为0。
4.-0转换成string后结果为”0″。
5.空数组[]转换成number后结果为0。
6.仅有一个number成员的数组(如[9])转换成number后结果为该numer值(9)。

当JavaScript将string转换成number时，有两个比较有趣的规则：

1.JavaScript会将字符串开头和结尾处的空白字符删除后再进行转换，因此像” 42 “这样的字符串可以顺利的被转换成数字42。

2.删除开头和结尾处的空白字符后，如果字符串中依然包含非数字字符，那么该字符串会被转换成NaN。比如：”3 m”就会被转换成NaN。

实例：

复制代码 代码如下:

console.log(10 * " 3 ");//30
console.log(10 * "3 m");//NaN, "3 m" will be converted to NaN

值类型转换与比较

在JavaScript中，等于操作符(==)的使用会涉及到值类型转换：如果==操作符两边的值类型不一致，那么JS会将它们转换成一致的类型后再加以判断。需要小心的是，两个不同类型的值，经过类型转换后也许可以等价，但这并不意味着对它们使用==操作符的结果就一定为true。一个简单的例子是undefined和false：将undefined转换成boolean类型后结果刚好为false，但事实上undefined==false的结果却为false。

显式类型转换

使用JavaScript的类型自动转换非常便捷，但同时也很容易带来诸如代码可维护性等问题。为了使程序代码更加清晰、减少歧义，有时会在JS程序中使用显式类型转换：

复制代码 代码如下:

Number("3")//3
String(false)//"false"
Boolean([])//true

大多数情况下，显式类型转换的结果与JS自动类型转换的结果是一致的；但存在1个特例：当将null或者undefined自动转换成Object时，JS将抛出TypeError错误；但当显式地将null或者undefined转换成Object时，JS将返回一个空的对象：
复制代码 代码如下:

console.log(Object(undefined));//empty object
console.log(Object(null));//empty object

同时，如果显式转换所指定的类型与JS自动转换所指定的类型不一样，那么，得到的结果也不一样。比如之前所提及的undefined==false结果为false；如果显式指定转换类型为Boolean，那么得到的结果就为true了：
复制代码 代码如下:

console.log(undefined == false);//false
console.log(Boolean(undefined) == Boolean(false));//true

对类型自动转换的使用

在JS中，可以使用值类型的自动转换，通过操作符来达到和显式转换一样的效果，比如：

复制代码 代码如下:

console.log(false + "");//"false"
console.log(+false);//0
console.log(!!3);//true

您可能感兴趣的文章:

相关文章

  • 微信小程序中如何计算距离某个节日还有多少天

    微信小程序中如何计算距离某个节日还有多少天

    这篇文章主要给大家介绍了关于微信小程序中如何计算距离某个节日还有多少天的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用微信小程序具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
    2019-07-07
  • javascript设计模式 – 职责链模式原理与用法实例分析

    javascript设计模式 – 职责链模式原理与用法实例分析

    这篇文章主要介绍了javascript设计模式 – 职责链模式,结合实例形式分析了javascript职责链模式相关概念、原理、用法及操作注意事项,需要的朋友可以参考下
    2020-04-04
  • js实现网站最上边可关闭的浮动广告条代码

    js实现网站最上边可关闭的浮动广告条代码

    这篇文章主要介绍了js实现网站最上边可关闭的浮动广告条代码,涉及javascript基于鼠标事件操作页面元素样式的实现技巧,需要的朋友可以参考下
    2015-09-09
  • js实现九宫格布局效果

    js实现九宫格布局效果

    这篇文章主要为大家详细介绍了js实现九宫格布局效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-05-05
  • 微信小程序实现简单计算器功能

    微信小程序实现简单计算器功能

    这篇文章主要为大家详细介绍了微信小程序实现简单计算器功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-07-07
  • JavaScript常用数组操作方法,包含ES6方法

    JavaScript常用数组操作方法,包含ES6方法

    这篇文章主要介绍了JavaScript常用数组操作方法，包含ES6方法,本文分步骤给大家介绍的非常详细，具有一定的参考借鉴借鉴价值，需要的朋友可以参考下
    2018-09-09
  • 微信小程序调用PHP后台接口 解析纯html文本

    微信小程序调用PHP后台接口 解析纯html文本

    这篇文章主要为大家详细介绍了微信小程序调用PHP后台接口，解析纯html文本的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-06-06
  • JavaScript实现一键复制文本功能的示例代码

    JavaScript实现一键复制文本功能的示例代码

    这篇文章主要为大家介绍两种javascript实现文本复制（将文本写入剪贴板）的方法，文中的示例代码讲解详细，大家可以根据需求特点选用
    2023-03-03
  • Chart.js与ECharts.js图表使用过程组件对比

    Chart.js与ECharts.js图表使用过程组件对比

    chartjs只能基于canvas,虽然只有英文文档,但定制化程度更高,社区成熟,功能就更加稳定,ECharts.js可以基于svg或者canvas去渲染,有融合主流前端框架的社区库,另外ECharts.js还支持3d效果的图表,相当炫酷,国内开发者大多数使用这个,有中文文档
    2023-10-10
  • Script标签与访问HTML页面详解

    Script标签与访问HTML页面详解

    本篇文章主要是对Script标签与访问HTML页面进行了详细的介绍，需要的朋友可以过来参考下，希望对大家有所帮助
    2014-01-01

最新评论