js数据类型的转换
类型转换:就是把一种数据类型转换成另一种数据类型,在js中类型转换有以下三种情况:转数字,转字符串,转布尔值。对象转成这3种数据类型是没有意义的,对象里面可以放任意的数据类型。
在讲解类型转换之前,先了解一下typeof运算符,它用于检测数据的类型,返回这个类型对应的字符串
语法:typeof 数据或者type(数据)
<script> var d = 'davina'; var n = 19; var t = true; var nul = null; var und = undefined; var obj = { a: 1 }; var fn = function () { alert(1) }; console.log(typeof d, typeof n, typeof t); //string number boolean console.log(typeof nul, typeof und, typeof obj); //object undefined object console.log(typeof fn); //function //从中可以看出,String->string;Number->number Boolean->boolean Undefined->undefined //Null->object,Object->object,函数的typeof转换为function </script>
一、转数字
任意类型都是可以转换成数字的,一般将字符串转数字用parseInt()或者是parseFloat()方法来进行转换,它们有一定的容错能力,能够将非兼容字符前的部分转换为数字。Number()这个方法没有容错能力。
从中我们可以看出以下规律:
<script> var d = 'davina'; var d1 = ''; var d2 = 'ds1'; var d3 = '3'; var t = true; var f = false; var nul = null; var und = undefined; var obj = { a: 1 }; console.log(Number(d), Number(d1), Number(d2), Number(d3)); //NaN 0 NaN 3 console.log(Number(t), Number(f), Number(nul)); //1 0 0 console.log(Number(und), Number(obj), Number(fn)); //NaN NaN NaN </script>
字符串转数字还可以用parseInt()和parseFloat()方法。用法如下:
从中我们可以看出:字符串必须是数字或者是空格加数字开头,它会从数字开始一位一位向后找,直到找到的字符不是数字就会停止,会把找到的数字字符转成真正的数字,如果没有找到那就返回一个NaN.
转数字的快捷方法:减去字符0或用0加这个字符,都是等于这个数本身的数值
<script> var d1 = '100px'; var d2 = 'px100'; var d3 = ' 100px'; var d4 = '123.567px234davina'; var d5 = '100px100'; var d6 = '4' - '0'; var d7 = + '5'; console.log(parseInt(d1), parseInt(d2), parseInt(d3)); //100 NaN 100 console.log(parseFloat(d4), parseFloat(d5)); //123.567 100 console.log(d6, d7); //4 5 </script>
简单计算器
<body> <script> window.onload = function () { var text1 = document.getElementById('text1'); var text2 = document.getElementById('text2'); var btn = document.getElementById('btn'); btn.onclick = function () { var val1 = parseFloat(text1.value); var val2 = parseFloat(text2.value); result.innerHTML = val1 + val2; } } </script> <input type="text" id='text1' value=''> <span>+</span> <input type="text" id="text2" value=""> <button id="btn">=</button> <strong id="result"></strong> </body>
isNaN()方法
判断一个值是不是NaN,它会先把参数用Number()方法转一下,具有检测数字的作用,但是它的本意并不是用来检测数字的。
<script> var n = NaN; var s1 = 'davina';//这个地方先用number()转一下,再用isNaN() var n1 = 12; console.log(isNaN(n), isNaN(s1), isNaN(n1)); //true true false //如果参数的结果为NaN为它的返回值为true,参数结果不为NaN它的返回值为false </script>
二、转布尔值
从下面可以看出,Undefined 转为 false;Null转布尔值为false;Number转布尔值时,0,NaN转为false,其它的转为true;空字符串转布尔值的结果为false,非空字符串为true;所有对象转为true.
!! 其它类型:!是取反的意思,因此加上两个!!,两次取反后即得到本身的布尔值。
<script> var u = undefined; var nul = null; var f = 0; var n = 2; var t = 1; var s1 = ''; var s2 = 'davina'; var s3 = ' '; var obj={a:1}; var i = !!' '; console.log(Boolean(u), Boolean(nul), Boolean(f)); //false false false console.log(Boolean(n), Boolean(t)); //true true console.log(Boolean(s1), Boolean(s2), Boolean(s3),Boolean(obj)); //false true true true console.log(i);//true </script>
三、转字符串
String()函数可以将任意类型的值转化为字符串,转换规则如下:
undefined转为'undefined';Null转字null,Number把数字加上引号;true转字符串的结果为'true',false为'false';参数如果是对象,返回一个类型字符串,如果是数组,返回该数组的字符串形式,相当于调用数组的Array.propototype.join()方法。
快捷方式:其它类型+''或''+其它类型:其他类型与一个空字符串相加,此方法对null和undefined也适用
<script> var u = undefined; var nul = null; var num = 12; var b1 = true; var b2 = false; var obj = { a: 1 }; var array = [1, 2, 3]; var i = 1 + ''; var j = '' + true; console.log(String(u), String(nul), String(num)); //undefined null 12 console.log(String(b1), String(b2)); //true false console.log(String(array), String(obj)); //1,2,3 [object Object] console.log(String(i),String(j)); //1 true </script>
四、隐式类型
类型转换分为两种:一是显式类型转换,二是隐式类型转换。
显式类型转换,通过一种方法很明确的某种数据类型转换为另一种数据类型,像是Number(),parseInt(),parseFloat()明确遥将数据转数字类型;String()明确将数据转为字符串类型;Boolean()明确将数据转为布尔值类型。
隐式类型转换:在进行一些操作的时候,根本的目的不是做类型转换,但是如要进行操作的话,那数据必需符合某种类型,js会在内部对数据进行一些转换
如:+ - * /
<script> console.log(1 + 2); //3 console.log(1 + 'a'); //1a console.log(true + 1); //2 console.log(false + '1'); // false1 console.log(false - true); //-1 console.log('' - 1); //-1 </script>
js数据类型的转换的更多相关文章
- JS系列:js数据类型的转换
数据类型的转换[基本数据类型]数字 number字符串 string布尔 boolean空 null未定义 undefined[引用数据类型]对象 object普通对象 {}数组对象 [](Array ...
- js 数据类型的转换
1. 字符串转化为数字 Number(1) parseInt(1) parseFloat(1) 区别: number 参数只要含有非数字,结果就是NaN,
- js数据类型隐式转换问题
js数据类型隐式转换 ![] == false //true 空数组和基本类型转换,会先[].toString() 再继续比较 ![] == [] //true ![] //false [] == [ ...
- js学习笔记1:语法、数据类型与转换、运算符与运算
注意: 上部代码错误,将停止运行,下部的代码无法显示 typeof 用来定义内容类型,不会输出内容只会输出类型 一.js输出语法 1. 弹窗输出('')内的内容: ...
- 总结的JS数据类型判定(非常全面)
用typeof 来检测数据类型 Javascript自带两套类型:基本数据类型(undefined,string,null,boolean,function,object)和对象类型. 但是如果尝试用 ...
- JavaScript学习10 JS数据类型、强制类型转换和对象属性
JavaScript学习10 JS数据类型.强制类型转换和对象属性 JavaScript数据类型 JavaScript中有五种原始数据类型:Undefined.Null.Boolean.Number以 ...
- web开发与设计--js数据类型,js运营商
1. js数据类型划分:号码值类型,布尔,串 由typeof能够看到什么类型的数据被详述. 举例: <span style="font-family:Microsoft YaHei;f ...
- [妙味JS基础]第四课:JS数据类型、类型转换
知识点总结 JS数据类型:number数字(NaN).string字符串.boolean布尔值.函数类型.object对象(obj.[].{}.null).undefined未定义 typeof 用来 ...
- vue—你必须知道的 js数据类型 前端学习 CSS 居中 事件委托和this 让js调试更简单—console AMD && CMD 模式识别课程笔记(一) web攻击 web安全之XSS JSONP && CORS css 定位 react小结
vue—你必须知道的 目录 更多总结 猛戳这里 属性与方法 语法 计算属性 特殊属性 vue 样式绑定 vue事件处理器 表单控件绑定 父子组件通信 过渡效果 vue经验总结 javascript ...
随机推荐
- docker安装和基本命令
Docker是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的Linux机器上,也可以实现虚拟化,容器是完全使用沙箱机制,相互之间不会有任何接口. ...
- Mysql 逗号分隔行列转换总结
方法一 存储过程实现: -- 修改结束符,防止在mysql命令行中默认分号直接运行 delimiter $$ -- 创建一个计算拆分后字符串的个数函数 drop function if exists ...
- NaN情况下无法比较大小
<pre name="code" class="java">package nan; /** * NaN情况下无法比较大小 * @author ro ...
- vuex中的babel编译mapGetters/mapActions报错解决方法
vex使用...mapActions报错解决办法 vuex2增加了mapGetters和mapActions的方法,借助stage2的Object Rest Operator 所在通过 methods ...
- Android下文件访问的权限
* 默认情况下,Android中,应用程序的文件时私有的,其他应用程序不可以读取私有的文件 * 底层用的时Linux文件的权限 - rw- rw- --- - :文件 ...
- java(SSM)上传文件到七牛云(对象存储)
项目中会用到大量的图片和小视频,为了分担服务器压力,将文件都放在七牛云.这里的思路很简单, 就是移动端.pc端把文件上传到服务器,服务器做一个临时缓存,保存必要的信息到数据库后, 将文件上传到七牛云, ...
- Heartbeat实现web服务器高可用
一.Heartbeat概述: Heartbeat的工作原理:heartbeat最核心的包括两个部分,心跳监测部分和资源接管部分,心跳监测可以通过网络链路和串口进行,而且支持冗余链路,它们之间相互发送报 ...
- ssm整合用到的依赖jar包(不充足)
<!--spring 的核心的jar包--><dependency> <groupId>org.springframework</groupId> &l ...
- django中CBV加csrf_exempt函数问题
CSRF Token相关装饰器在CBV只能加到dispatch方法上 备注: 1. csrf_protect,为当前函数强制设置防跨站请求伪造功能,即便settings中没有设置全局中间件. 2. c ...
- redis开启持久化、redis 数据备份与恢复
redis持久化介绍 https://segmentfault.com/a/1190000015897415 1. 开启aof持久化.以守护进程启动.远程访问先把配置文件拷贝一份到/etc/redi ...