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 |