一，效果图。

二，代码。

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>JavaScript 类型转换</title>

</head>

<body>

    <!--typeof操作符-->

    <p> typeof 操作符返回变量、对象、函数、表达式的类型。</p>

    <p id="demo"></p>

    <script>

    document.getElementById("demo").innerHTML =

        typeof "john" + "<br>" +

        typeof 3.14 + "<br>" +

        typeof NaN + "<br>" +

        typeof false + "<br>" +

        typeof [1, 2, 3, 4] + "<br>" +

        typeof {

            name: 'john',

            age: 34

        } + "<br>" +

        typeof new Date() + "<br>" +

        typeof

    function() {} + "<br>" +

    typeof myCar + "<br>" +

        typeof null;

    </script>

    <!--constructor 属性-->

    <p>constructor属性返回变量或对象的构造函数.</p>

    <p id="demo1"></p>

    <script>

    document.getElementById("demo1").innerHTML = "john".constructor + "<br>" + (3.14).constructor + "<br>" + false.constructor + "<br>" + [1, 2, 3, 4].constructor + "<br>" + {

        name: "john",

        age: 34

    }.constructor + "<br>" + new Date().constructor + "<br>" + function() {}.constructor;

    </script>

    <!--constructor 属性-->

    <p>判断是否为数组。</p>

    <p id="demo2"></p>

    <script>

    var fruits = ["Banana", "Orange", "Apple", "Mango"];

    document.getElementById("demo2").innerHTML = isArray(fruits);

    function isArray(myArray) {

        return myArray.constructor.toString().indexOf("Array") > -1;

    }

    </script>

    <p>判断是否为日期。</p>

    <p id="demo3"></p>

    <script>

    var myDate = new Date();

    document.getElementById("demo3").innerHTML = isDate(myDate);

    function isDate(myDate) {

        return myDate.constructor.toString().indexOf("Date") > -1;

    }

    </script>

    <p>String()方法可以将数字转换为字符串</p>

    <p id="demo4"></p>

    <script>

    var x = 123;

    document.getElementById("demo4").innerHTML = String(x) + "<br>" + String(123) + "<br>" + String(100 + 23);

    </script>

    <p>toString()方法将数字转为字符串</p>

    <p id="demo5"></p>

    <script>

    var x = 123;

    document.getElementById("demo5").innerHTML = x.toString() + "<br>" + (123).toString() + "<br>" + (100 + 23).toString();

    </script>

    <p> typeof 操作符返回变量或表达式的类型。</p>

    <button onclick="myFunction()">点我</button>

    <p id="demo6"></p>

    <script>

    function myFunction() {

        var y = "5";

        var x = +y;

        document.getElementById("demo6").innerHTML =

            typeof y + "<br>" + typeof x;

    }

    </script>

    <p>typeof操作符返回变量或表达式的类型</p>

    <button onclick="myFunction()">点我</button>

    <p id="demo7"></p>

    <script>

    function myFunction() {

        var y = "john";

        var x = +y;

        document.getElementById("demo7").innerHTML = typeof + "<br>" + x;

    }

    </script>

</body>

</html>

参考资料：《菜鸟教程》

【代码笔记】Web-JavaScript-JavaScript 类型转换的更多相关文章

  1. Web前端-JavaScript基础教程上

    Web前端-JavaScript基础教程 将放入菜单栏中,便于阅读! JavaScript是web前端开发的编程语言,大多数网站都使用到了JavaScript,所以我们要进行学习,JavaScript ...

  2. WEB前端--JavaScript

    JavaScript JavaScript基础 一.JavaScript简介 JavaScript是一种嵌入到HTML文件中的描述性语言,由浏览器的解释器将其动态地处理成可执行的代码,能独立地完成与客 ...

  3. Web Worker javascript多线程编程（一）

    什么是Web Worker? web worker 是运行在后台的 JavaScript,不占用浏览器自身线程,独立于其他脚本,可以提高应用的总体性能,并且提升用户体验. 一般来说Javascript ...

  4. Web Worker javascript多线程编程（二）

    Web Worker javascript多线程编程(一)中提到有两种Web Worker:专用线程dedicated web worker,以及共享线程shared web worker.不过主要讲 ...

  5. 2015年10个最佳Web开发JavaScript库

    2015年10个最佳Web开发JavaScript库 现在的互联网可谓是无所不有,有大量的JavaScript项目开发工具充斥于网络中.我们可以参考网上的指导来获取构建代码项目的各种必要信息.如果你是 ...

  6. WEB 技术分类 Javascript DOM(Element Node) BOM

    Web technology for developers   Web 技术文档 备注:本文介绍web technology的分类,各自职责,因为之前一直就没有搞明白各种技术.各种名词究竟是属于哪个范 ...

  7. 前端笔记 （3.JavaScript 1）

    JavaScript 是属于网络的脚本语言! JavaScript 是一种轻量级的编程语言. JavaScript 是可插入 HTML 页面的编程代码. JavaScript 插入 HTML 页面后, ...

  8. 【Web】JavaScript 语法入门

    一. 简介 动态性和交互性 1.由浏览器解释执行 2.常见的脚本语言:JavaScript和VBScript P.S. Node.js 是使用JavaScript编写的服务器端框架. 二. JavaS ...

  9. 【转】Web Worker javascript多线程编程（一）

    原文:https://www.cnblogs.com/peakleo/p/6218823.html -------------------------------------------------- ...

  10. Web前端-JavaScript基础教程下

    Web前端-JavaScript基础教程下 <script>有6个属性: async对外部脚本有效,可以用来异步操作,下载东西,不妨碍其他操作. charset为src属性指定字符集. d ...

随机推荐

  1. Kali学习笔记5：被动信息收集工具集

    1.Shodan SHODAN搜索引擎不像百度谷歌等,它们爬取的是网页,而SHODAN搜索的是设备. 物联网使用过程中,通常容易出现安全问题,如果被黑客用SHODAN搜索到,后果不堪设想. 网站:ht ...

  2. Spring整合MyBatis 你get了吗？

    Spring整合MyBatis 1.整体架构dao,entity,service,servlet,xml 2..引入依赖 <dependencies> <dependency> ...

  3. JavaScript 快速入门

    JavaScript是jquery的基础, JavaScript是一种描述性语言 JavaScript的组成 :ECMAScript,BOM,DOM. JavaScript的基本结构 <scri ...

  4. python 利用matplotlib中imshow()函数绘图

    matplotlib 是python最著名的2D绘图库,它提供了一整套和matlab相似的命令API,十分适合交互式地进行制图.而且也可以方便地将它作为绘图控件,嵌入GUI应用程序中.通过简单的绘图语 ...

  5. ubuntu 16.04 安装cuda的方法

    很多神经网络架构都需要安装CUDA,安装这个的确费了我不少时间,是要总结一下流程了. 安装这个,最好使用官网的安装步骤和流程,不然,会走很多弯路: https://developer.nvidia.c ...

  6. Scala - 快速学习05 - 数据结构

    1- 数组(Array) 数组一般包括定长数组和变长数组. 可以不指明数组类型,Scala会自动根据提供的初始化数据来推断出数组的类型. 在Scala中,对数组元素的应用,是使用圆括号,而不是方括号. ...

  7. 如何解决git====push 过程中出现的。error: failed to push some refs

    当我们在利用git  push 文件到仓库时出现了一下问题: ! [rejected] master -> master (fetch first)error: failed to push s ...

  8. ASP.NET Core身份认证服务框架IdentityServer4（2）-整体介绍

    一.整体情况 现代应用程序看起来更像这个: 最常见的相互作用: 浏览器与Web应用程序的通信 Browser -> Web App Web应用程序与Web API通信 基于浏览器的应用程序与We ...

  9. new Date()浏览器兼容性问题

    不同浏览器有不同的差异,一般时间格式是“2018-11-13”,这种格式在Chrome下是可以正常执行的,不过在ie浏览器里面 就会变成NaN 解决方法:将时间转换成“2018/11/13” 这种格式 ...

  10. TOMCAT源码分析（转）

    前言:   本文是我阅读了TOMCAT源码后的一些心得. 主要是讲解TOMCAT的系统框架, 以及启动流程.若有错漏之处,敬请批评指教!建议:   毕竟TOMCAT的框架还是比较复杂的, 单是从文字上 ...