一，效果图。

二，代码。

<!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. 第二节：Java入门第一行代码

    前言 大家好,今天带来Java入门第一行代码的概述,希望你们喜欢 第一行代码 学习Java基础课程,学会使用eclipse,eclipse为Java集成开发坏境IDE,创建第一个Java源文件代码: ...

  2. Java异常处理 10 个最佳实践

    异常处理是Java 开发中的一个重要部分.它是关乎每个应用的一个非功能性需求,是为了处理任何错误状况,比如资源不可访问,非法输入,空输入等等.Java提供了几个异常处理特性,以try,catch 和 ...

  3. 在C语言中不使用任何中间变量如何将a、b的值进行交换（三种方法）——来自一小萌新工程师的复习

    今天面试嵌入式,突然遇到这么一道题目,虽然简单,但鉴于我答得不是很好,所以还是分析一下为好. 第一种方法: 通过加减法. #include"stdio.h" int main(vo ...

  4. SQL中的Join和Where的区别

    一.sql语句中left join.inner join中的on与where的区别 0.各种join操作的概念和作用 left join :左连接,返回左表中所有的记录以及右表中连接字段相等的记录. ...

  5. Struts2体系介绍

    回顾Struts2,在会用基础上重看的理解. Struts 2框架架构流程 一个请求在Struts 2框架中的处理大概分为以下几个步骤. (1) 客户端提交一个HttpServletRequest请求 ...

  6. Log4Net 生成多个文件、文件名累加解决方法

    Log4Net 生成多个文件.文件名累加解决方法 项目中的WCF服务里采用Log4Net用来记录异常日志,但部署后,生成的日志会出现多个累加文件,如下图: WCF是寄宿在IIS上,包含了5个SVC服务 ...

  7. HTTP的基本原理

    用户访问万维网文档,万维网文档之间的链接以及万维网文档中数据传送到用户计算机,这些功能的实现都是由超文本传输协议 HTTP(HyperTextTransfer Protocol) 负责完成的. HTT ...

  8. Windows编程之模块遍历(C++实现)

    Windows编程之模块遍历 PS: 主要扣代码使用,直接滑动到最下面使用. 遍历模块需要几个API,和一个结构体 1.创建进程快照 2.遍历首次模块 3.继续下次遍历 4.模块信息结构体 API 分 ...

  9. 深入理解redis数据类型

    转载请注明出处:https://www.cnblogs.com/wenjunwei/p/9720033.html redis的存储模型 redis不是普通的键值对存储,它实际上是一个数据结构存储服务器 ...

  10. python装饰器2：类装饰器

    装饰器1:函数装饰器 装饰器2:类装饰器 装饰器3:进阶 本文是装饰器相关内容的第二篇,关于类装饰器. "类装饰器"有两种解读方式:用来装饰类的装饰器:类作为装饰器装饰其它东西.你 ...