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中清空数组的三种方法分享
Apr 07 Javascript
JavaScript中合并数组的N种方法
Sep 16 Javascript
实现微信小程序的wxml文件和wxss文件在webstrom的支持
Jun 12 Javascript
js异步编程小技巧详解
Aug 14 Javascript
Vue项目组件化工程开发实践方案
Jan 09 Javascript
vue.js实现只弹一次弹框
Jan 29 Javascript
cdn模式下vue的基本用法详解
Oct 07 Javascript
Vue入门学习笔记【基本概念、对象、过滤器、指令等】
Apr 13 Javascript
微信小程序 云开发模糊查询实现解析
Sep 02 Javascript
对layer弹出框中icon数字参数的说明介绍
Sep 04 Javascript
vue父子组件的通信方法(实例详解)
Nov 10 Javascript
JavaScript控制台的更多功能
Apr 28 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原创论坛
2006/10/09 PHP
PHP获取当前相对于域名目录的方法
2015/06/26 PHP
php格式化时间戳
2016/12/17 PHP
PHP写API输出的时用echo的原因详解
2019/04/28 PHP
制作高质量的JQuery Plugin 插件的方法
2010/04/20 Javascript
jQuery对象和DOM对象使用说明
2010/06/25 Javascript
AlertBox 弹出层信息提示框效果实现步骤
2010/10/11 Javascript
基于JQuery 选择器使用说明介绍
2013/04/18 Javascript
js获取当前月的第一天和最后一天的小例子
2013/11/18 Javascript
判断客户浏览器是否支持cookie的示例代码
2013/12/23 Javascript
jQuery事件用法实例汇总
2014/08/29 Javascript
jQuery实现鼠标滑过Div层背景变颜色的方法
2015/02/17 Javascript
浅谈jQuery中replace()方法
2015/05/13 Javascript
jquery合并表格中相同文本的相邻单元格
2015/07/17 Javascript
jquery实现网站列表切换效果的2种方法
2016/08/12 Javascript
微信小程序实战之上拉(分页加载)效果(2)
2017/04/17 Javascript
JS判断微信扫码的方法
2017/08/07 Javascript
微信小程序倒计时功能实例代码
2018/07/17 Javascript
vue中使用微信公众号js-sdk踩坑记录
2019/03/29 Javascript
JavaScript实现HTML导航栏下拉菜单
2020/11/25 Javascript
vue实现购物车的小练习
2020/12/21 Vue.js
DJANGO-ALLAUTH社交用户系统的安装配置
2014/11/18 Python
Python中的字符串操作和编码Unicode详解
2017/01/18 Python
python opencv 简单阈值算法的实现
2019/08/04 Python
基于Python批量生成指定尺寸缩略图代码实例
2019/11/20 Python
基于python traceback实现异常的获取与处理
2019/12/13 Python
Python模拟伯努利试验和二项分布代码实例
2020/05/27 Python
详解canvas绘图时遇到的跨域问题
2018/03/22 HTML / CSS
在线服装零售商:SheIn
2016/07/22 全球购物
保险内勤岗位职责
2014/04/05 职场文书
实习生岗位职责
2014/04/12 职场文书
文体活动总结范文
2014/05/05 职场文书
拾金不昧感谢信
2015/01/21 职场文书
2015年“公民道德宣传日”活动方案
2015/05/06 职场文书
《确定位置》教学反思
2016/02/18 职场文书
使用 CSS 构建强大且酷炫的粒子动画效果
2022/08/14 HTML / CSS