【四】JavaScript之类型转换
【1】类型转换
- javascript是弱类型的编程语言
- 所以本身不仅提供了数据类型的转换
- 甚至在数据使用运算符的时候，javascript的解释器也会出现默认隐式转换数据类型的情况。
【2】字符串
-
字符串转换成布尔值
- 除了空字符串("")被转为
false，其他的任何字符串，只有有内容，都是true。
- 除了空字符串("")被转为
-
字符串转换成数值
- 除了纯数值符号组成的字符串，其他的字符串无法转换成数值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input id="btn" type="text" value="10">
<script>
// console.log(btn, typeof btn); // input#btn元素对象 "object"
// console.log(btn.value, typeof btn.value); // 10 string
//
// // 字符串转换成布尔值
// var str1 = "" // 空字符串
// console.log( Boolean(str1) ); // false
// var str2 = "0"
// console.log( Boolean(str2) ); // true
// var str3 = " "
// console.log( Boolean(str3) ); // true
// var str4 = "true"
// console.log( Boolean(str4) ); // true
// var str5 = "false"
// console.log( int(str5) ); // true
// // 总结：除了空字符串，其他都转换成true
// 字符串转换成数值
var num1 = "100"
var num1_new = Number(num1)
console.log( num1_new, typeof num1_new ); // 100 "number"
var num2 = "3.14"
var num2_new = Number(num2)
console.log( num2_new, typeof num2_new ); // 3.14 "number"
var num3 = "3.5公斤"
var num3_new = Number(num3);
console.log( num3_new, typeof num3_new ); // NaN "number"
// NaN是一个特殊的数值，是在js中进行数值计算当结果有误时出现的非数字结果
// NaN，全称：Not a Number，表示计算结果是非数值
// NaN的特点:
// 1. 这个关键字也是数值类型 typeof(NaN) // "number"
// 2. NaN无法进行比较和计算，否则结果都是false或者NaN
// 可以转换
console.log( Number("-.5"), Number(".5"), Number("+0.5"), Number("1.5e3") ); // -0.5 0.5 0.5 1500
// 不可以转换
console.log( Number("..5"), Number("100_200_300"), Number("++2") ); // 不可以转换
// 总结：除了数值组成的字符串，其他的字符串无法转换成数值.
// 字符串转换成数组
var str1 = "hello"
console.log( Array(str1) ); // 自动变成数组的一个成员，相当于 [str1]
console.log([str1])
</script>
</body>
</html>
【3】数值
-
数值转字符串
- 任意的数值都可以转换成字符串
-
数值转布尔值
- 除了0和0.0和NaN，其他都是true
-
数值之间的转换
- 可以通过Number把纯数值组成的字符串转换成数值类型
- 可以通过parseInt或parseFloat把以数值开头的字符串转换成数值，但是非数值开头的字符串，无法转换成数值类型。
- 同时，字符串格式千分位数字，parseInt或parseFloat也不识别。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
// 数值转换成字符串
var num1 = 100;
var num2 = 3.14;
var num3 = 0;
console.log( String(num1) ); // 100
console.log( String(num2) ); // 3.14
console.log( String(num3) ); // 0
// 总结：任意的数值都可以转换成字符串
// // 数值转换成布尔值
// var num4 = 1;
// var num5 = 2;
// var num6 = -1;
// var num7 = 0;
// var num8 = 0.0;
// var num9 = NaN;
// console.log( Boolean(num4) ); // true
// console.log( Boolean(num5) ); // true
// console.log( Boolean(num6) ); // true
// console.log( Boolean(num7) ); // false
// console.log( Boolean(num8) ); // false
// console.log( Boolean(num9) ); // false
// 总结：除了0和0.0和NaN，都是true
// 数值之间的转换
// parseInt(数值) // 把数值转换成整数格式
// parseFloat(数值) // 把数值转换成小数格式
var num10 = 3.14;
var num11 = '3.14';
var num12 = '3.14块';
var num13 = '3.3.5';
var num14 = '共3斤';
var num15 = '100_200_300';
// 小数转化成整数
console.log( parseInt(num10) ) // 3
// 纯数字的字符串转化成整数或浮点数
console.log( parseInt(num11), parseFloat(num11) ) // 3 3.14
// 以数值开头的字符串，例如："+3斤", "-3.0斤"
console.log( parseInt(num12), parseFloat(num12) ) // 3 3.14
console.log( parseInt(num13), parseFloat(num13) ) // 3 3.3
console.log( Number(num12), Number(num13) ) // NaN NaN，Number函数只能转换纯数值组成的字符串
// 非数字开头的字符串，parseInt或parseFloat也无能为力
// 针对字符串格式的千分位数值，parseInt或parseFloat也不认识
console.log( parseInt(num14), parseFloat(num15) ) // NaN 100
</script>
</body>
</html>
【4】布尔值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
// 布尔值转换字符串
var v1 = true;
var v2 = false;
console.log( String(v1) ); // 'true'
console.log( String(v2) ); // 'false'
// 布尔值转换成数值类型
console.log( Number(true) ); // 1
console.log( Number(false) ); // 0
</script>
</body>
</html>
【5】隐式转换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
// 隐式转换：就是弱类型语言的变量数据类型会因为当前运行环境的需要，而自动发生类型转换。
// 因为+号的语法规则就是2个数值相加，或者2个字符串拼接。
console.log(10 + true); // 先把true装换成数值类型的1，所以10+1 = 11
console.log("10" + true); // 先把true转换成字符串类型的"true"，所以"10"+ "true" = "10true"
// 因为-号的语法规则是2个数值相减
console.log("10" - true); // 10，想把"10"被转换成10，接着把false转成0 ，最终的10-0 = 10
console.log("10" - "3"); // 7， 想把"10"被转换成10，接着把"3"转成3，最终的10-3 = 7
</script>
</body>
</html>