一，效果图。

二，代码。

<!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. JavaScript 作用域、命名空间及闭包

    变量作用域: 1.一个变量的作用域是程序源代码中定义这个变量的区域 2.在函数内声明的变量是局部变量,它只在该函数及其嵌套作用域里可见(js 函数可嵌套定义):不在任何函数内声明或在函数内不使用 va ...

  2. mysql怎么限制ip访问

    grant all privileges on *.* to 'root'@'ip'identified by '密码'; #授权某个ip的用户可以通过密码访问数据库

  3. Mybatis3.2不支持Ant通配符TypeAliasesPackage扫描的解决方案

    业务场景 业务场景:首先项目进行分布式拆分之后,按照模块再分为为api层和service层,web层. 其中订单业务的实体类放在com.muses.taoshop.item.entity,而用户相关的 ...

  4. Python - References

    01 - Python文档 Python:https://www.python.org/ Documentation:https://docs.python.org/ Standard Library ...

  5. Docker面试题

    1.如何列出可运行的容器?docker ps 2.启动nginx容器(随机端口映射),并挂载本地文件目录到容器html的命令是?docker run -d -P --name nginx2 -v /h ...

  6. python基础-分支判断语句(4)

    1.分支判断语句 1.单一if结构 2.if-else结构 3.if-elif-else结构 4.if嵌套结构 2.单一if结构 只有一种情况的时候 if 条件: 执行语句 说明: if后面的条件成立 ...

  7. 使用JDOM解析xml文档

    一.使用JDOOM解析xml文档 准备工作 1.下载JDOM.jar 包 解析代码如下 import org.jdom2.Attribute; import org.jdom2.Document; i ...

  8. vue属性监听

    1.watch:用来监听每一个属性的变化 2.watch这个对象里面都是函数,函数的名称是data中的属性名称,watch中的函数不需要调用 3.当属性发生改变那么就会触发watch函数,每个函数都会 ...

  9. R语言命令汇总

    > qqplot(spear,fastrankweight)> qqplot(spear,fastrankweight,main="title")> qqplot ...

  10. CSS从零开始(1)--CSS基础语法

    1.CSS语法 CSS规则有两个主要部分构成:选择器,以及一条或多条说明. 例如:selector{declaration1;declaration2;declaration3;......;} 注: ...