类型转换：就是把一种数据类型转换成另一种数据类型，在js中类型转换有以下三种情况：转数字，转字符串，转布尔值。对象转成这3种数据类型是没有意义的，对象里面可以放任意的数据类型。

　　在讲解类型转换之前，先了解一下typeof运算符，它用于检测数据的类型，返回这个类型对应的字符串

　　语法：typeof 数据或者type(数据)

  1.     <script>
  2.         var d = 'davina';
  3.         var n = 19;
  4.         var t = true;
  5.         var nul = null;
  6.         var und = undefined;
  7.         var obj = { a: 1 };
  8.         var fn = function () { alert(1) };
  9.         console.log(typeof d, typeof n, typeof t); //string number boolean
  10.         console.log(typeof nul, typeof und, typeof obj); //object undefined object
  11.         console.log(typeof fn); //function
  12.         //从中可以看出，String->string;Number->number Boolean->boolean Undefined->undefined
  13.         //Null->object,Object->object,函数的typeof转换为function
  14.     </script>

　一、转数字

　　　　任意类型都是可以转换成数字的，一般将字符串转数字用parseInt()或者是parseFloat()方法来进行转换,它们有一定的容错能力，能够将非兼容字符前的部分转换为数字。Number()这个方法没有容错能力。

　　　从中我们可以看出以下规律：

　　　　字符串转数字：空字符转数字的结果为0；字符串里面的内容如果是一个单纯的数字则转成对应的数字，如果不是一个纯数字那结果就是NaN
　　　　布尔值转数字，true为1，false为0
　　　　undefined转为NaN,NaN转为0
　　　　数字转数字还为数字，对象转为NaN
  1.     <script>
  2.         var d = 'davina';
  3.         var d1 = '';
  4.         var d2 = 'ds1';
  5.         var d3 = '3';
  6.         var t = true;
  7.         var f = false;
  8.         var nul = null;
  9.         var und = undefined;
  10.         var obj = { a: 1 };
  11.  
  12.         console.log(Number(d), Number(d1), Number(d2), Number(d3));  //NaN 0 NaN 3
  13.         console.log(Number(t), Number(f), Number(nul)); //1 0 0
  14.         console.log(Number(und), Number(obj), Number(fn)); //NaN NaN NaN
  15.     </script>

　　　　字符串转数字还可以用parseInt()和parseFloat()方法。用法如下：

　　　　从中我们可以看出：字符串必须是数字或者是空格加数字开头，它会从数字开始一位一位向后找，直到找到的字符不是数字就会停止，会把找到的数字字符转成真正的数字，如果没有找到那就返回一个NaN.

　　　　转数字的快捷方法：减去字符0或用0加这个字符，都是等于这个数本身的数值

  1.     <script>
  2.         var d1 = '100px';
  3.         var d2 = 'px100';
  4.         var d3 = ' 100px';
  5.         var d4 = '123.567px234davina';
  6.         var d5 = '100px100';
  7.         var d6 = '4' - '0';
  8.         var d7 = + '5';
  9.  
  10.         console.log(parseInt(d1), parseInt(d2), parseInt(d3)); //100 NaN 100
  11.         console.log(parseFloat(d4), parseFloat(d5)); //123.567 100
  12.         console.log(d6, d7); //4 5
  13.     </script>

　　　简单计算器

  1. <body>
  2.     <script>
  3.         window.onload = function () {
  4.             var text1 = document.getElementById('text1');
  5.             var text2 = document.getElementById('text2');
  6.             var btn = document.getElementById('btn');
  7.  
  8.             btn.onclick = function () {
  9.                 var val1 = parseFloat(text1.value);
  10.                 var val2 = parseFloat(text2.value);
  11.  
  12.                 result.innerHTML = val1 + val2;
  13.             }
  14.         }
  15.     </script>
  16.     <input type="text" id='text1' value=''>
  17.     <span>+</span>
  18.     <input type="text" id="text2" value="">
  19.     <button id="btn">=</button>
  20.     <strong id="result"></strong>
  21. </body>

　　isNaN()方法

　　　　判断一个值是不是NaN,它会先把参数用Number()方法转一下，具有检测数字的作用，但是它的本意并不是用来检测数字的。

  1.     <script>
  2.         var n = NaN;
  3.         var s1 = 'davina';//这个地方先用number()转一下，再用isNaN()
  4.         var n1 = 12;
  5.         console.log(isNaN(n), isNaN(s1), isNaN(n1)); //true true false
  6.         //如果参数的结果为NaN为它的返回值为true,参数结果不为NaN它的返回值为false
  7.     </script>　

　　二、转布尔值

　　　　从下面可以看出，Undefined 转为 false；Null转布尔值为false；Number转布尔值时，0,NaN转为false,其它的转为true；空字符串转布尔值的结果为false,非空字符串为true；所有对象转为true.

　　　　!! 其它类型：！是取反的意思，因此加上两个!!，两次取反后即得到本身的布尔值。

  1.     <script>
  2.         var u = undefined;
  3.         var nul = null;
  4.         var f = 0;
  5.         var n = 2;
  6.         var t = 1;
  7.         var s1 = '';
  8.         var s2 = 'davina';
  9.         var s3 = ' ';
  10.         var obj={a:1};
  11.         var i = !!' '; 
  12.  
  13.         console.log(Boolean(u), Boolean(nul), Boolean(f)); //false false false
  14.         console.log(Boolean(n), Boolean(t)); //true true
  15.         console.log(Boolean(s1), Boolean(s2), Boolean(s3),Boolean(obj)); //false true true true
  16.         console.log(i);//true
  17.     </script>

　　三、转字符串

　　　　String()函数可以将任意类型的值转化为字符串，转换规则如下：

　　　　　　undefined转为'undefined'；Null转字null，Number把数字加上引号；true转字符串的结果为'true',false为'false'；参数如果是对象，返回一个类型字符串，如果是数组，返回该数组的字符串形式，相当于调用数组的Array.propototype.join()方法。

　　　　　快捷方式：其它类型+''或''+其它类型：其他类型与一个空字符串相加，此方法对null和undefined也适用

  1.     <script>
  2.         var u = undefined;
  3.         var nul = null;
  4.         var num = 12;
  5.         var b1 = true;
  6.         var b2 = false;
  7.         var obj = { a: 1 };
  8.         var array = [1, 2, 3];
  9.         var i = 1 + '';
  10.         var j = '' + true;
  11.         console.log(String(u), String(nul), String(num)); //undefined null 12
  12.         console.log(String(b1), String(b2));             //true false
  13.         console.log(String(array), String(obj));         //1,2,3 [object Object]
  14.         console.log(String(i),String(j));               //1 true
  15.     </script>

　　四、隐式类型

　　　　　类型转换分为两种：一是显式类型转换，二是隐式类型转换。

　　　　　显式类型转换，通过一种方法很明确的某种数据类型转换为另一种数据类型，像是Number(),parseInt(),parseFloat()明确遥将数据转数字类型；String()明确将数据转为字符串类型；Boolean()明确将数据转为布尔值类型。

　　　　　隐式类型转换：在进行一些操作的时候，根本的目的不是做类型转换，但是如要进行操作的话，那数据必需符合某种类型，js会在内部对数据进行一些转换

　　　　　如：+ - * /

  1.     <script>
  2.         console.log(1 + 2);  //3
  3.         console.log(1 + 'a');  //1a
  4.         console.log(true + 1); //2
  5.         console.log(false + '1');  // false1
  6.         console.log(false - true); //-1
  7.         console.log('' - 1); //-1
  8.     </script>

　　　　

js数据类型的转换的更多相关文章

  1. JS系列：js数据类型的转换

    数据类型的转换[基本数据类型]数字 number字符串 string布尔 boolean空 null未定义 undefined[引用数据类型]对象 object普通对象 {}数组对象 [](Array ...

  2. js 数据类型的转换

    1. 字符串转化为数字 Number(1) parseInt(1) parseFloat(1) 区别: number 参数只要含有非数字,结果就是NaN,

  3. js数据类型隐式转换问题

    js数据类型隐式转换 ![] == false //true 空数组和基本类型转换,会先[].toString() 再继续比较 ![] == [] //true ![] //false [] == [ ...

  4. js学习笔记1：语法、数据类型与转换、运算符与运算

    注意: 上部代码错误,将停止运行,下部的代码无法显示            typeof 用来定义内容类型,不会输出内容只会输出类型 一.js输出语法         1. 弹窗输出('')内的内容: ...

  5. 总结的JS数据类型判定（非常全面）

    用typeof 来检测数据类型 Javascript自带两套类型:基本数据类型(undefined,string,null,boolean,function,object)和对象类型. 但是如果尝试用 ...

  6. JavaScript学习10 JS数据类型、强制类型转换和对象属性

    JavaScript学习10 JS数据类型.强制类型转换和对象属性 JavaScript数据类型 JavaScript中有五种原始数据类型:Undefined.Null.Boolean.Number以 ...

  7. web开发与设计--js数据类型，js运营商

    1. js数据类型划分:号码值类型,布尔,串 由typeof能够看到什么类型的数据被详述. 举例: <span style="font-family:Microsoft YaHei;f ...

  8. [妙味JS基础]第四课：JS数据类型、类型转换

    知识点总结 JS数据类型:number数字(NaN).string字符串.boolean布尔值.函数类型.object对象(obj.[].{}.null).undefined未定义 typeof 用来 ...

  9. vue—你必须知道的 js数据类型 前端学习 CSS 居中 事件委托和this 让js调试更简单—console AMD && CMD 模式识别课程笔记（一） web攻击 web安全之XSS JSONP && CORS css 定位 react小结

    vue—你必须知道的   目录 更多总结 猛戳这里 属性与方法 语法 计算属性 特殊属性 vue 样式绑定 vue事件处理器 表单控件绑定 父子组件通信 过渡效果 vue经验总结 javascript ...

随机推荐

  1. Javah提示未找到 ..的类

    Javah相关错误,如下图所示:

  2. 准确率（Precision）、召回率（Recall）以及综合评价指标（F1-Measure）

    在信息检索和自然语言处理中经常会使用这些参数,下面简单介绍如下: 准确率与召回率(Precision & Recall) 我们先看下面这张图来加深对概念的理解,然后再具体分析.其中,用P代表P ...

  3. UnicodeEncodeError: 'ascii' codec can't encode characters

    将网页get到之后输入文本出现UnicodeEncodeError: 'ascii' codec can't encode characters错误 f = open('re.txt', 'w') u ...

  4. Java特殊数据结构-TreeSet

    资料来源 TreeSet初步入门总结 https://www.cnblogs.com/yzssoft/p/7127894.html TreeSet自然排序与比较器排序精讲 https://blog.c ...

  5. SSM整合junit单元测试之org.apache.ibatis.binding.BindingException: Invalid bound statement (not found):

    想用SSM做一点小测试,项目整合完毕,直接使用junit测试mybatis,出现如下错误(SuperTest类中进行了spring运行环境加载): 解决思路: 检查mapper接口与mapper.xm ...

  6. react-native-scrollable-tab-view第一次加载下划线不显示解决

    今天在使用react-native-scrollable-tab-view的时候出现下划线第一次显示的时候不显示,需要点击切换才可以显示. 通过各种实践发现是0.6.7版本问题. 解决实现: reac ...

  7. 用事件队列来处理pixi中的场景元素入场

    在pixi中,添加一个精灵元素,你可能需要,先将贴图load进来,然后才能添加到场景中去,所以一般会这么操作 Loader.add("tree","static/imag ...

  8. 构建LNMP平台

    1方案 安装部署Nginx.MariaDB.PHP环境 安装部署Nginx.MariaDB.PHP.PHP-FPM: 启动Nginx.MariaDB.FPM服务: LNMP(Linux.Nginx.M ...

  9. 软件测试第4周小组作业：WordCount优化

    一.基本任务:代码编写+单元测试 1.Github地址: https://github.com/Wegnery/New_WordCount 2.PSP2.1表格 PSP2.1 PSP阶段 预估耗时 ( ...

  10. POJ3450最长公共子串【kmp】

    题目链接:http://poj.org/problem?id=3450 题目大意:给定n个长度不超过200的字符串,n < 4000.求这些字符串的最长公共子串,若没有,则输出 “IDENTIT ...