JavaScript中的数据类型转换方法小结


Posted in Javascript onOctober 26, 2015

JavaScript 变量可以转换为新变量或其他数据类型:

  • 通过使用 JavaScript 函数
  • 通过 JavaScript 自身自动转换

将数字转换为字符串

全局方法 String() 可以将数字转换为字符串。
该方法可用于任何类型的数字,字母,变量,表达式:
实例

String(x)     // 将变量 x 转换为字符串并返回
String(123)    // 将数字 123 转换为字符串并返回
String(100 + 23) // 将数字表达式转换为字符串并返回

Number 方法 toString() 也是有同样的效果。
实例

x.toString()
(123).toString()
(100 + 23).toString()

将布尔值转换为字符串

全局方法 String() 可以将布尔值转换为字符串。
String(false)    // 返回 "false"
String(true)     // 返回 "true"
Boolean 方法 toString() 也有相同的效果。
false.toString()   // 返回 "false"
true.toString()   // 返回 "true"

将日期转换为字符串
全局方法 String() 可以将日期转换为字符串。

String(Date())   // 返回 Thu Jul 17 2014 15:38:19 GMT+0200 (W. Europe Daylight Time)

Date 方法 toString() 也有相同的效果。
实例

Date().toString()  // 返回 Thu Jul 17 2014 15:38:19 GMT+0200 (W. Europe Daylight Time)

将字符串转换为数字
全局方法 Number() 可以将字符串转换为数字。
字符串包含数字(如 "3.14") 转换为数字 (如 3.14).
空字符串转换为 0。
其他的字符串会转换为 NaN (不是个数字)。

Number("3.14")  // 返回 3.14
Number(" ")    // 返回 0 
Number("")    // 返回 0
Number("99 88")  // 返回 NaN

一元运算符 +
Operator + 可用于将变量转换为数字:
实例

var y = "5";   // y 是一个字符串
var x = + y;   // x 是一个数字

如果变量不能转换,它仍然会是一个数字,但值为 NaN (不是一个数字):
实例

var y = "John";  // y 是一个字符串
var x = + y;   // x 是一个数字 (NaN)


将布尔值转换为数字
全局方法 Number() 可将布尔值转换为数字。

Number(false)   // 返回 0
Number(true)   // 返回 1

将日期转换为数字
全局方法 Date() 可将日期转换为数字。

d = new Date();
Number(d)     // 返回 1404568027739

日期方法 getTime() 也有相同的效果。

d = new Date();
d.getTime()    // 返回 1404568027739

自动转换类型 Type Conversion
当 JavaScript 尝试操作一个 "错误" 的数据类型时,会自动转换为 "正确" 的数据类型。
以下输出结果不是你所期望的:

5 + null  // 返回 5     because null is converted to 0
"5" + null // 返回"5null"  because null is converted to "null"
"5" + 1   // 返回 "51"   because 1 is converted to "1" 
"5" - 1   // 返回 4     because "5" is converted to 5

自动转换为字符串
当你尝试输出一个对象或一个变量时 JavaScript 会自动调用变量的 toString() 方法:

document.getElementById("demo").innerHTML = myVar;

// if myVar = {name:"Fjohn"} // toString 转换为 "[object Object]"
// if myVar = [1,2,3,4]    // toString 转换为 "1,2,3,4"
// if myVar = new Date()   // toString 转换为 "Fri Jul 18 2014 09:08:55 GMT+0200"

数字和布尔值也经常相互转换:

// if myVar = 123       // toString 转换为 "123"
// if myVar = true      // toString 转换为 "true"
// if myVar = false      // toString 转换为 "false"
Javascript 相关文章推荐
jQuery创建插件的代码分析
Apr 14 Javascript
JavaScript常用对象的方法和属性小结
Jan 24 Javascript
js实现弹窗居中的简单实例
Oct 09 Javascript
bootstrap datetimepicker2.3.11时间插件使用
Nov 19 Javascript
BootStrapTable 单选及取值的实现方法
Jan 10 Javascript
基于JavaScript实现滑动门效果
Mar 16 Javascript
微信小程序 聊天室简单实现
Apr 19 Javascript
JavaScript使用FileReader实现图片上传预览效果
Mar 27 Javascript
浅谈Node Inspector 代理实现
Oct 19 Javascript
Vue 实现手动刷新组件的方法
Feb 19 Javascript
解决微信小程序调用moveToLocation失效问题【超简单】
Apr 12 Javascript
vue中watch和computed为什么能监听到数据的改变以及不同之处
Dec 27 Javascript
如何实现JavaScript动态加载CSS和JS文件
Dec 28 #Javascript
基于javascript实现漂亮的页面过渡动画效果附源码下载
Oct 26 #Javascript
JS实现的页面自定义滚动条效果
Oct 26 #Javascript
JS实现的鼠标跟随代码(卡通手型点击效果)
Oct 26 #Javascript
JS响应鼠标点击实现两个滑块区间拖动效果
Oct 26 #Javascript
javaScript实现可缩放的显示区效果代码
Oct 26 #Javascript
JS基于VML技术实现的五角星礼花效果代码
Oct 26 #Javascript
You might like
php提示Warning:mysql_fetch_array() expects的解决方法
2014/12/16 PHP
怎样搭建PHP开发环境
2015/07/28 PHP
JQuery AJAX实现目录浏览与编辑的代码
2008/10/21 Javascript
javascript实现的DES加密示例
2013/10/30 Javascript
js导入导出excel(实例代码)
2013/11/25 Javascript
js获取某元素的class里面的css属性值代码
2014/01/16 Javascript
js实现表格字段排序
2014/02/19 Javascript
介绍一个简单的JavaScript类框架
2015/06/24 Javascript
javascript检测移动设备横竖屏
2016/05/21 Javascript
js判断出两个字符串最大子串的函数实现方法
2016/11/01 Javascript
原生js实现返回顶部缓冲效果
2017/01/18 Javascript
鼠标拖动改变DIV等网页元素的大小的实现方法
2017/07/06 Javascript
vue远程加载sfc组件思路详解
2019/12/25 Javascript
如何解决vue在ios微信"复制链接"功能问题
2020/03/26 Javascript
js中位数不足自动补位扩展padLeft、padRight实现代码
2020/04/06 Javascript
解决vue cli4升级sass-loader(v8)后报错问题
2020/07/30 Javascript
python中string模块各属性以及函数的用法介绍
2016/05/30 Python
django上传图片并生成缩略图方法示例
2017/12/11 Python
PyCharm 创建指定版本的 Django(超详图解教程)
2019/06/18 Python
Python web如何在IIS发布应用过程解析
2020/05/27 Python
荷兰网上买鞋:MooieSchoenen.nl
2017/09/12 全球购物
 Alo Yoga官网:购买瑜伽服装
2018/06/17 全球购物
Linux Interview Questions For software testers
2013/05/17 面试题
医科大学生的自我评价
2013/12/04 职场文书
团队经理竞聘书
2014/03/31 职场文书
五年级学生评语
2014/04/22 职场文书
学生吸烟检讨书
2014/09/14 职场文书
2014年信息宣传工作总结
2014/12/18 职场文书
明星邀请函
2015/02/02 职场文书
戒赌保证书
2015/05/11 职场文书
2016春季运动会通讯稿
2015/07/18 职场文书
结婚主持人致辞
2015/07/28 职场文书
主婚人致辞精选
2015/07/28 职场文书
《小摄影师》教学反思
2016/02/18 职场文书
你真的了解redis为什么要提供pipeline功能
2021/06/22 Redis
TV动画《史上最强大魔王转生为村民A》番宣CM公布
2022/04/01 日漫