一，效果图。

二，代码。

<!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. 用Ajax遍历三级下拉框

    用Ajax遍历三级下拉框 //通过一级分类的id查二级分类(记得在前端网页按钮绑定点击事件) function getSecondCategory(oneCategoryId){ alert(&quo ...

  2. MyBatis 多表关联查询

    多表关联查询 一对多 单条SQL实现. //根据部门编号查询出部门和部门成员姓名public dept selectAll() thorws Excatipon; //接口的抽象方法 下面是对应接口的 ...

  3. 利用vi编辑器创建和编辑正文文件（一）

    1.       vim是vi的升级版本. 2.       vi所UNIX和Linux系统内嵌的标准文编辑器,可执行,修改,复制,移动,粘贴和删除正文等命令,也可以进行移动光标,搜索字符和退出vi的 ...

  4. java模式—装饰者模式

    装饰者模式 1.意图: 动态地给一个对象添加一些额外的职责.就增加功能来说, Decorator模式相比生成子类更为灵活.该模式以对客 户端透明的方式扩展对象的功能. 2.适用环境 (1)在不影响其他 ...

  5. RESTful规范1

    RESTful规范 一 什么是RESTful REST与技术无关,代表的是一种软件架构风格,REST是Representational State Transfer的简称,中文翻译为"表征状 ...

  6. Linux编程 10 (shell外部命令与内建命令，alias ，type命令)

    一.  内部命令 Linux命令有内部命令(内建命令)和外部命令之分,内部命令和外部命令功能基本相同,但也有些细微差别.内部命令不需要使用子进程来执行,它们已经和shell编译成一体,作为shell工 ...

  7. Spring Security + OAuth系统环境搭建（一）

    最近在做权限管理系统的重构工作,系统基于Spring Security + OAuth架构,整体架构.技术和之前调研的结果差不多,架构调研时有在这篇博客做过简单记录“Spring Cloud微服务下的 ...

  8. Jvm运行时数据区

    一:运行时数据区 Java虚拟机在执行Java程序的过程中会把它管理的内存分为若干个不同的数据区域.这些区域有着各自的用途,一级创建和销毁的时间,有的区域随着虚拟机进程的启动而存在,有些区域则依赖用户 ...

  9. jvm详情——1、堆中存什么？栈中存什么？

    数据类型 Java虚拟机中,数据类型可以分为两类:基本类型和引用类型.基本类型的变量保存原始值,即:他代表的值就是数值本身:而引用类型的变量保存引用值.“引用值”代表了某个对象的引用,而不是对象本身, ...

  10. LeetCode算法扫题系列83

    原创作品,可以转载,但是请标注出处地址:https://www.cnblogs.com/V1haoge/p/9104582.html LeetCode算法第83题(难度:简单) 题目:给定一个排序链表 ...