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 相关文章推荐
JavaScript中的this实例分析
Apr 28 Javascript
js实现window.open不被拦截的解决方法汇总
Oct 30 Javascript
纯JavaScript实现的分页插件实例
Jul 14 Javascript
使用jQuery制作Web页面遮罩层插件的实例教程
May 26 Javascript
jQuery基本选择器之标签名选择器
Sep 03 Javascript
angular十大常见问题
Mar 07 Javascript
Vue.2.0.5过渡效果使用技巧
Mar 16 Javascript
详解Vue.js 2.0 如何使用axios
Apr 21 Javascript
JavaScript 巧学巧用
May 23 Javascript
浅谈Vue 数据响应式原理
May 07 Javascript
快速解决select2在bootstrap模态框中下拉框隐藏的问题
Aug 10 Javascript
基于layui轮播图满屏是高度自适应的解决方法
Sep 16 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
为什么《星际争霸》是测试人工智能的理想战场
2019/12/03 星际争霸
8个出色的WordPress SEO插件收集
2011/02/26 PHP
php下pdo的mysql事务处理用法实例
2014/12/27 PHP
使用Thinkphp框架开发移动端接口
2015/08/05 PHP
PHP下载远程图片并保存到本地方法总结
2016/01/22 PHP
PHP的PDO操作简单示例
2016/03/30 PHP
php生成图片验证码的方法
2016/04/15 PHP
php5.3后静态绑定用法详解
2016/11/11 PHP
一些有关检查数据的JS代码
2006/09/07 Javascript
拖拉表格的JS函数
2008/11/20 Javascript
模仿百度三维地图的js数据分享
2011/05/12 Javascript
关于jquery ajax 调用带参数的webservice返回XML数据一个小细节
2012/07/31 Javascript
js和jquery分别验证单选框、复选框、下拉框
2015/12/17 Javascript
JavaScript实现复制内容到粘贴板代码
2016/03/31 Javascript
BootStrap 智能表单实战系列(十)自动完成组件的支持
2016/06/13 Javascript
D3.js实现折线图的方法详解
2016/09/21 Javascript
vue .sync修饰符的使用详解
2018/06/15 Javascript
vue 循环加载数据并获取第一条记录的方法
2018/09/26 Javascript
详解vue微信网页授权最终解决方案
2019/06/16 Javascript
[07:37]DOTA2-DPC中国联赛2月2日Recap集锦
2021/03/11 DOTA
Python中Django框架利用url来控制登录的方法
2015/07/25 Python
使用Python读写文本文件及编写简单的文本编辑器
2016/03/11 Python
python 扩展print打印文件路径和当前时间信息的实例代码
2019/10/11 Python
python获取引用对象的个数方式
2019/12/20 Python
python3 使用ssh隧道连接mysql的操作
2020/12/05 Python
W Concept美国:精选全球独立设计师
2017/02/22 全球购物
Speedo速比涛德国官方网站:世界领先的泳装品牌
2019/08/26 全球购物
mysql_pconnect()和mysql_connect()有什么区别
2012/05/25 面试题
大学生专业个人学习的自我评价
2013/10/26 职场文书
给老婆的搞笑检讨书
2014/01/12 职场文书
护士在校生自荐信
2014/02/01 职场文书
2014年办公室文秘工作总结
2014/12/09 职场文书
保证金退回承诺函格式
2015/01/21 职场文书
2016入党培训心得体会范文
2016/01/08 职场文书
Tomcat项目启动失败的原因和解决办法
2022/04/20 Servers
详解Vue3使用axios的配置教程
2022/04/29 Vue.js