JavaScript基础 ——【数据类型的转换】

使用表单、prompt 获取过来的数据默认是字符串类型的，此时就不能直接简单的进行加法运算，而需要转换变量的数据类型。通俗来说，就是把一种数据类型的变量转换成另外一种数据类型。

我们通常会实现3种方式的转换：

• 转换为字符串类型
• 转换为数字型
• 转换为布尔型

一、 转换为字符串类型

方法	说明	案例
toString()	转成字符串	var num= 1; alert(num.toString());
String()强制转换	转成字符串	var num = 1; alert(String(num));
加号拼接字符串	和字符串拼接的结果都是字符串	var num = 1; alert(num+“我是字符串”);

把数字转换为字符串
全局方法 String() 能够把数字转换为字符串。它可用于任意类型的数字、文字、变量或表达式：

String(x)         // 从数值变量 x 返回字符串
String(123)       // 从数值文本 123 返回字符串
String(100 + 23)  // 从表达式中的数值返回字符串

把布尔转换为字符串
全局方法 String() 能够将布尔转换为字符串。

String(false)        // 返回 "false"
String(true)         // 返回 "true" 

布尔方法 toString() 同理。

false.toString()     // 返回 "false"
true.toString()      // 返回 "true"

把日期转换为字符串
全局方法 String() 可将日期转换为字符串。

String(Date())      // 返回 "Thu Jun 03 2021 16:54:56 GMT+0800 (GMT+08:00)"

在日期方法这一章，您能够找到更多可用于把日期转换为字符串的方法：

方法	描述
getDate()	获得以数值计（1-31）的日
getDay()	或者以数值计（0-6）的周
getFullYear()	获得四位的年（yyyy）
getHours()	获得时（0-23）

二、 转换为数字型

方法	说明	案例
parseInt(string)函数	将string类型转成整数数值型	parseInt(‘78’)
parseFloat(string)函数	将string类型转成浮点数数值型	parseFloat(‘78.21’)
Number()强制转换函数	将string类型转换为数值型	Number(‘12’)
js隐式转换(- * /)	利用算术运算隐式转换为数值型	‘12’ -0

全局方法 Number() 可把字符串转换为数字。
包含数字的字符串（比如 “3.14”）转换为数字（比如 3.14）。
空的字符串转换为 0。
其他字符串将转换为 NaN（Not a number，不是数字）。

Number("3.14")    // 返回 3.14
Number(" ")       // 返回 0
Number("")        // 返回 0
Number("99 88")   // 返回 NaN

一元 + 运算符

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

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

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

var y = "Bill";   // y 是字符串
var x = + y;      // x 是数字 (NaN)

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

Number(false)     // 返回 0
Number(true)      // 返回 1

把日期转换为数字
全局方法 Number() 可用于把日期转换为数字。

d = new Date();
Number(d)          // 返回 1622710496805

日期方法 getTime() 同理。

d = new Date();
d.getTime()        // 返回 1622710496806

三、 转换为布尔型

方法	说明	案例
Boolean()函数	其他类型转成布尔值	Boolean(‘true’);

代表空、否定的值会被转换为 false ，如 ‘’、0、NaN、null、undefined

console.log(Boolean('')); // false
console.log(Boolean(0)); // false
console.log(Boolean(NaN)); // false
console.log(Boolean(null)); // false
console.log(Boolean(undefined)); // false
console.log(Boolean('小白')); // true
console.log(Boolean(12)); // true

四、 type of运算符的使用

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

实例

typeof "Bill"                 // 返回 "string"
typeof 3.14                   // 返回 "number"
typeof NaN                    // 返回 "number"
typeof false                  // 返回 "boolean"
typeof [1,2,3,4]              // 返回 "object"
typeof {name:'Bill', age:62}  // 返回 "object"
typeof new Date()             // 返回 "object"
typeof function () {}         // 返回 "function"
typeof myCar                  // 返回 "undefined" *
typeof null                   // 返回 "object"

注意：

• NaN 的数据类型是数值
• 数组的数据类型是对象
• 日期的数据类型是对象
• null 的数据类型是对象
• 未定义变量的数据类型是 undefined
• 尚未赋值的变量的数据类型也是 undefined

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

typeof 的数据类型：

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

五、 自动类型转换

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

结果并不总是你所期望的：

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

自动字符串转换
JavaScript 自动调用变量的 toString() 函数，当您试图“输出”对象或变量时：

document.getElementById("demo").innerHTML = myVar;

// 如果 myVar = {name:"Fjohn"}  // toString 转换为 "[object Object]"
// 如果 myVar = [1,2,3,4]       // toString 转换为 "1,2,3,4"
// 如果 myVar = new Date()      // toString 转换为 "Thu Jun 03 2021 16:54:56 GMT+0800 (GMT+08:00)"
数字和布尔也会被转换，但并不明显：
// 如果 myVar = 123             // toString 转换为 "123"
// 如果 myVar = true            // toString 转换为 "true"
// 如果 myVar = false           // toString 转换为 "false"

六、 JavaScript 类型转换表

下表中列出了将不同 JavaScript 值转换为数字、字符串和布尔的结果：

原始值	转换为数字	转换为字符串	转换为逻辑
false	0	"false"	false
true	1	"true"	true
0	0	"0"	false
1	1	"1"	true
"0"	0	"0"	true
"000"	0	"000"	true
"1"	1	"1"	true
NaN	NaN	"NaN"	false
Infinity	Infinity	"Infinity"	true
-Infinity	-Infinity	"-Infinity"	true
""	0	""	false
"20"	20	"20"	true
"twenty"	NaN	"twenty"	true
[ ]	0	""	true
[20]	20	"20"	true
[10,20]	NaN	"10,20"	true
["twenty"]	NaN	"twenty"	true
["ten","twenty"]	NaN	"ten,twenty"	true
function(){}	NaN	"function(){}"	true
{ }	NaN	"[object Object]"	true
null	0	"null"	false
undefined	NaN	"undefined"	false