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 ...
随机推荐
- 解决Android Studio 升级时提示 Connection failed. Please check your network connection and try again问题
一,问题: 无论mac还是windows可能都会出现这个问题,解决方案大同小异,就是修改VMOptions而已. 解决方案: Windows: 在\Android Studio\bin目录下找到 st ...
- vsCode安装todo插件
使用过IDEA或者WebStrom的阿媛应该都知道他们都有一个TODO功能,方便我们跟踪注释,或者说是我们在项目代码里面所做的标记:但是如果你现在在使用vsCode,你会发现,没有TODO功能,幸好, ...
- 使用Pull解析器生成XML文件
有些时候,我们需要生成一个XML文件,生成XML文件的方法有很多,如:可以只使用一个StringBuilder组拼XML内容,然后把内容写入到文件中:或者使用DOM API生成XML文件,或者也可以使 ...
- 小D课堂-SpringBoot 2.x微信支付在线教育网站项目实战_5-8.用户模块开发之保存微信用户信息
笔记 8.用户模块开发之保存微信用户信息 简介:开发User数据访问层,保存微信用户信息 问题: 微信回调 用户昵称乱码 解决: ...
- [ML] Online learning
复习 一.Spark 流处理 使用Spark Streaming与我们操作RDD的方式很接近,处理数据流也变得简单了.使用Spark的流处理元素结合MLlib的基于SGD的在线学习能力,可以创建实时的 ...
- 使用nginx实现动静分离的负载均衡集群
一.概述: LB负载均衡集群分两类: LVS (四层)和 nginx或haproxy (七层) 客户端通过访问分发器的VIP来访问网站 |现在应用更复杂,比如现在网站页面有: .php .html . ...
- Delphi ActionList详解
一个友好的用户界面,必须具有下拉菜单,弹出菜单,工具条和快捷键.同样一个功能,程序员可能要提供几种操作方式,如文本拷贝,菜单命令&Copy,快捷键Ctrl+C,工具条上的拷贝按钮,都是程序员提 ...
- k8s组件批量启动、查看状态
查看所有master节点kube-apiserver ansible k8s -m shell -a 'systemctl status kube-apiserver' 重启所有master节点kub ...
- Docker的数据管理(volume/bind mount/tmpfs)
Docker提供了三种不同的方式用于将宿主的数据挂载到容器中:volumes,bind mounts,tmpfs volumes.当你不知道该选择哪种方式时,记住,volumes总是正确的选择. vo ...
- centos7清楚journal日志
1.只保留1天的日志 journalctl --vacuum-time=1d 参考:https://blog.csdn.net/ithomer/article/details/90634579