JavaScript数据类型转换

JavaScript数据类型

  1 <!DOCTYPE html>
  2 <html>
  3     <head>
  4         <meta charset="utf-8" content="text/html">
  5         <title style="width: fit-content;">javascript 数据类型转换</title>
  6     </head>
  7     <body>
  8         <p>
  9             Number()转换为数字，String()转换为字符串，Boolean()转换为布尔值<br>
 10             在JavaScript中有6种不同的数据类型<br>
 11             1.string <br>
 12             2.number<br>
 13             3.boolean<br>
 14             4.object<br>
 15             5.function<br>
 16             6.symbol<br>
 17             3种对象类型：<br>
 18             1.Object
 19             2.Date
 20             3.Array<br>
 21             2种不包含任何值得数据类型:<br>
 22             null undefined
 23 
 24         </p>
 25         <p>
 26             typeof操作符：<br>
 27             可以使用typeof操作符来查看JavaScript变量得数据类型<br>
 28             typeof "john"   // 返回string<br>
 29             typeof 3.14     // 返回number<br>
 30             typeof NaN      // 返回number<br>
 31             typeof false    // 返回boolean<br>
 32             typeof [1,2,3,4]    // 返回object<br>
 33             typeof {name:'john', age:18}    // 返回object<br>
 34             typeof function(){}     // 返回function<br>
 35             typeof new Date()   // 返回object <br>
 36             typeof null     //返回object<br>
 37 
 38         </p>
 39         <p>
 40             constractor属性：<br>
 41             constractor属性返回所有JavaScript变量的构造函数：<br>
 42             "John".constructor                 // 返回函数 String()  { [native code] }<br>
 43             (3.14).constructor                 // 返回函数 Number()  { [native code] }<br>
 44             false.constructor                  // 返回函数 Boolean() { [native code] }<br>
 45             [1,2,3,4].constructor              // 返回函数 Array()   { [native code] }<br>
 46             {name:'John', age:34}.constructor  // 返回函数 Object()  { [native code] }<br>
 47             new Date().constructor             // 返回函数 Date()    { [native code] }<br>
 48             function () {}.constructor         // 返回函数 Function(){ [native code] }<br>
 49         </p>
 50         <p>
 51             Eg：使用constractor属性查看对象是否为数组（包含字符串“Array”）
 52         </p>
 53         
 54         <p>判断是否为数组</p>
 55         <p id="demo"></p>
 56         <script>
 57             var fruits=["Banana", "Orange", "Apple", "Mango"]
 58             document.getElementById("demo").innerHTML=isArray(fruits)
 59             function isArray(myArray){
 60                 // console.log(myArray.constructor)
 61                 //返回构造函数转换为字符串，且包含Array则返回true
 62                 return myArray.constructor.toString().indexOf("Array") > -1;
 63             }
 64         </script>
 65         <p>判断是否为日期</p>
 66         <p id="demo1"></p>
 67         <script>
 68             var myDate=new Date();
 69             console.log(myDate)
 70             document.getElementById("demo1").innerHTML=isDate(myDate);
 71             function isDate(myDate){
 72                 console.log(myDate.constructor)
 73                 return myDate.constructor.toString().indexOf("Date") > -1;
 74             }
 75         </script>
 76         <p style="font-size: large; color: crimson;", >
 77             javascript 类型转换<br>
 78             javascript变量可以转换为新变量和其他数据类型：<br>
 79             1.通过JavaScript函数
 80             2.通过JavaScript自身自动转换
 81         </p>
 82         <p>
 83             将数字转换为字符串：
 84             全局方法String()可以将数字转换为字符串<br>
 85             Eg:<br>
 86             String(x)         // 将变量 x 转换为字符串并返回<br>
 87             String(123)       // 将数字 123 转换为字符串并返回<br>
 88             String(100 + 23)  // 将数字表达式转换为字符串并返回<br>
 89         </p>
 90         <p >String()方法可以将数字转换为字符串</p>
 91         <p id="demo2"></p>
 92         <script>
 93             var x=123;
 94             document.write(String(x)+"<br>")
 95             document.write(x+"<br>")
 96             document.write(String(100+23))
 97         </script>
 98         <p style="font-size: large; color: crimson;",>将字符串转换为数字</p>
 99         <p>
100             全局方法Number()可以将字符串转换为数字<br>
101             字符串包含数字转换为数字("3.14")->3.14<br>
102             空字符串转换为0.
103             其他字符串转换为NaN(不是个数字)
104         </p>
105         <script>
106             document.write(Number("3.14")+"<br>");  //3.14
107             document.write(Number(" ")+"<br>"); //0
108             document.write(Number("")+"<br>");  //0
109             document.write(Number("99 88")+"<br>")  //NaN
110         </script>
111         <p>将布尔值转换为数字</p>
112         <script>
113             document.write(Number(false)+"<br>");   // 返回0
114             document.write(Number(true)+"<br>");    // 返回1
115         </script>
116         <p>将日期转换为数字</p>
117         <script>
118             document.write(Number(new Date())+"<br>")  // 返回日期时间戳
119             document.write(new Date().getTime())    // 返回日期时间错
120         </script>
121         <p>自动转换类型
122             当JavaScript尝试一个错误的数据类型时，会自动转换成一个正确的数据类型。
123         </p>
124         <script>
125             document.write(5+null+"<br>")  // 返回5 null转换为0
126             document.write("5"+null+"<br>") // 返回"5null" null转换为"null"
127             document.write("5"+1+"<br>")    // 返回51 1转换为"1"
128             document.write("5"-1+"<br>")    // 返回4 "5"转换为5
129 
130         </script>
131     </body>
132 </html>