JS：类型转换

JS：类型转换

JavaScript 数据类型

1、JavaScript中有五种可包含值的数据类型：
　　字符串（string）
　　数字（number）
　　布尔（boolean）
　　对象（object）
　　函数（function）

2、有三种对象类型：
　　对象（Object）
　　日期（Date）
　　数组（Array）

3、同时有两种不能包含值的数据类型：
　　null
　　undefined

4、可以使用typeof运算符来确定JavaScript变量的数据类型

例1：

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript typeof 运算符</h2>
<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>

</body>
</html>

注：

1、NaN的数据类型是数值

2、数组的数据类型是对象

3、日期的数据类型是对象

4、null的数据类型是对象

5、未定义变量的数据类型是undefined

6、尚未赋值的变量的数据类型也是undefined

7、无法使用typeof去判断JavaScript对象是否是数组（或日期）

NaN属性

1、NaN属性是代表非数字值的特殊值。该属性用于指示某个值不是数字。可以把 Number 对象设置为该值，来指示其不是数字值

2、NaN，即非数值（Not a Number）是一个特殊的值，这个数值表示本来要返回数值的操作数未返回数值的情况（这样就不会抛出错误了）

3、使用isNaN()来判断一个值是否是数字。原因是NaN与所有值都不相等，包括它自己

定义和用法
isNaN()函数用于检查其参数是否是非数字值

语法

isNaN(x)
参数描述
x：必需。要检测的值

返回值
如果x是特殊的非数字值NaN（或者能被转换为这样的值），返回的值就是true。如果x是其他值,则返回false。

例2：

<html>
<body>

<script type="text/javascript">
document.write(isNaN(123)+ "<br />")
document.write(isNaN(-1.23)+ "<br />")
document.write(isNaN(5-2)+ "<br />")
document.write(isNaN(0)+ "<br />")
document.write(isNaN("Hello")+ "<br />")
document.write(isNaN("2005/12/12")+ "<br />")
</script>

</body>
</html>

typeof的数据类型

typeof运算符不是变量。它属于运算符。运算符（比如 + - * /）没有数据类型但是，typeof始终会返回字符串（包含运算数的类型）

constructor属性

constructor属性返回所有JavaScript变量的构造器函数，可以通过检查constructor属性来确定某个对象是否为数组

例3：

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript constructor 属性</h2>
<p>constructor 属性返回变量或对象的构造器函数。</p>
<p id="demo"></p>

<script>
document.getElementById("demo").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>

</body>
</html>

例3_1：是否包含单词"Array"

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript 数组</h2>
<p>这个“自制的” isArray() 函数在数组上使用时返回 true：</p>
<p id="demo"></p>

<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = isArray(fruits);//调用函数

function isArray(myArray) {
return myArray.constructor.toString().indexOf("Array") > -1;
}//定义一个函数来判断返回值中是否包含单词 "Array"
</script>

</body>
</html>

例3_2：

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript 数组对象</h2>
<p>这个“自制的” isArray() 函数在数组上使用时返回 true：</p>
<p id="demo"></p>

<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = isArray(fruits);

function isArray(myArray) {
return myArray.constructor === Array;
}
</script>

</body>
</html>

例3_3：

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript 日期对象</h2>
<p>这个“自制的” isDate() 函数在日期上使用时返回 true：</p>
<p id="demo"></p>

<script>
var myDate = new Date();
document.getElementById("demo").innerHTML = isDate(myDate);

function isDate(myDate) {
return myDate.constructor === Date;
}
</script>

</body>
</html>

JavaScript类型转换

JavaScript变量能够被转换为新变量以及另一种数据类型：
　　⑴通过使用JavaScript函数
　　⑵通过JavaScript本身自动转换

把数值转换为字符串

1、全局方法String()能够把数字转换为字符串，与数字方法toString()类似

2、可用于任意类型的数字、文字、变量或表达式

例4：

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript String() 方法</h2>
<p>String() 方法把数字转换为字符串。</p>
<p id="demo"></p>

<script>
var x = 123;
document.getElementById("demo").innerHTML =
String(x) + "<br>" +
String(123) + "<br>" +
String(100 + 23)+ "<br>" +
(100 + 23).toString();
</script>

</body>
</html>

把布尔转换为字符串

全局方法String()能够将布尔转换为字符串，布尔方法toString()同理

例5：

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript类型转换</h2>
<p id="demo"></p>

<script>
var x = true;
var y = false;
document.getElementById("demo").innerHTML =
String(x) + "<br>" +
y.toString()
</script>

</body>
</html>

把日期转换为字符串

全局方法String()可将日期转换为字符串，日期方法toString()同理

例6：

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript类型转换</h2>
<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML =
String(Date()) + "<br>" +
Date().toString();
</script>

</body>
</html>

注：在python中time或datetime模块返回的是一个时间对象，其对象有自己的方法或属性，方法或属性返回的为整形会浮点型

例6_1：

import datetime
today = datetime.datetime.today()
print(today)
print(type(today))
print(today.year)
print(type(today.year))

"""
2019-09-18 14:06:51.189761
<class 'datetime.datetime'>
2019
<class 'int'>
"""

把字符串转换为数值

全局方法Number()可把字符串转换为数字
1、包含数字的字符串（比如 "3.14"）转换为数字（比如 3.14）

2、空的字符串转换为 0

3、其他字符串将转换为NaN（Not a number，不是数字）python中就没有这个功能，不能把非数字字符串转为数字类型

例7：

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript类型转换</h2>
<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML =
Number("3.14") + "<br>" + // 返回 3.14
Number(" ") + "<br>" + // 返回 0
Number("") + "<br>" + // 返回 0
Number("99 88"); // 返回 NaN

</script>

</body>
</html>

一元+运算符

1、一元的+运算符可用于把变量转换为数字

2、如果无法转换变量，则仍会成为数字，但是值为NaN（Not a number）

例8：

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript类型转换</h2>
<p id="demo"></p>
<p id="demo_1"></p>

<script>
var y = "5"; // y 是字符串
var x = + y; // x 是数字;

var a = "Bill"; // a 是字符串
var b = + a; // b 是数字 (NaN)

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

document.getElementById("demo_1").innerHTML = b + "<br>" + typeof b

</script>

</body>
</html>

把布尔转换数值

全局方法Number()也可把布尔转换为数字

例9：

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript类型转换</h2>
<p id="demo"></p>
<p id="demo_1"></p>

<script>
document.getElementById("demo").innerHTML = Number(false) // 返回 0

document.getElementById("demo_1").innerHTML =Number(true) // 返回 1
</script>

</body>
</html>

把日期转换为数字

全局方法Number()可用于把日期转换为数字，日期方法getTime()同理

例10：

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript类型转换</h2>
<p id="demo"></p>
<p id="demo_1"></p>

<script>
var a = new Date()
document.getElementById("demo").innerHTML = Number(a) + "<br>" + a.constructor

document.getElementById("demo_1").innerHTML =a.getTime() + "<br>" + a.constructor
</script>

</body>
</html>

自动类型转换

如果JavaScript尝试操作一种“错误”的数据类型，它会试图将该值转换为“正确”的类型

例11：

5 + null // 返回 5 因为 null 被转换为 0
"5" + null // 返回 "5null" 因为 null 被转换为 "null"
"5" + 2 // 返回 52 因为 2 被转换为 "2"
"5" - 2 // 返回 3 因为 "5" 被转换为 5
"5" * "2" // 返回 10 因为 "5" 和 "2" 被转换为 5 和 2