什么是数据类型转换
-
将一个数据类型转换为其他的数据类型
例如: 将Number类型转换为Boolean类型
例如: 将Number类型转换为字符串类型
将其它类型转换为字符串
调用被转换数据类型的toString()方法
var num1 = 10;
var res1 = num1.toString(); // 重点
console.log(res1); // 10
console.log(typeof res1); // string
var num2 = true;
var res2 = num2.toString(); // 重点
console.log(res2); // true
console.log(typeof res2); // string
- null和undefined这两个值没有toString()方法，如果调用他们的方法，会报错
var num3 = undefined;
var res3 = num3.toString(); // 报错
console.log(res3);
var num4 = null;
var res4 = num4.toString(); // 报错
console.log(res4);
var num5 = NaN;
var res5 = num5.toString();
console.log(res5); // NaN
console.log(typeof res5); // String
- 该方法不会影响到原变量，它会将转换的结果返回
var num6 = 10;
var res6 = num6.toString();
console.log(typeof num6); // number
console.log(typeof res6); // string
- 数值类型的toString()，可以携带一个参数，输出对应进制的值(暂时不用了解, 讲到进制转换再回来看)
var num7 = 20;
var res7 = num7.toString(2);
var res8 = num7.toString(8);
var res9 = num7.toString(10);
var res10 = num7.toString(16);
console.log(res7); // 10100
console.log(res8); // 24
console.log(res9); // 20
console.log(res10); // 14
将被转换的数据传入String()函数中
-
String()函数存在的意义：
- 有些值没有toString()，这个时候可以使用String()。比如：undefined和null
对于Number和Boolean实际上就是调用的toString()方法
var num1 = 10;
var res1 = String(num1); // 重点
console.log(res1); // 10
console.log(typeof res1); // string
var num2 = true;
var res2 = String(num2); // 重点
console.log(res2); // true
console.log(typeof res2); // string
- 对于null和undefined，就不会调用toString()方法(因为这两个哥们没有这个方法).而是在内部生成一个新的字符串
var num3 = undefined;
var res3 = String(num3);
console.log(res3); // undefined
console.log(typeof res3); // string
var num4 = null;
var res4 = String(num4);
console.log(res4); // null
console.log(typeof res4); // string
将被转换的数据和+""连接到一起
任何数据和 +"" 连接到一起都会转换为字符串
内部实现原理和String()函数一样
var num1 = 10;
var res1 = num1 + "";
console.log(res1); // 10
console.log(typeof res1); // string
var num2 = true;
var res2 = num2 + "";
console.log(res2); // true
console.log(typeof res2); // string
var num3 = undefined;
var res3 = num3 + "";
console.log(res3); // undefined
console.log(typeof res3); // string
var num4 = null;
var res4 = num4 + "";
console.log(res4); // null
console.log(typeof res4); // string
将其它类型转换为Number类型
将被转换的数据传入Number()函数中
-
字符串 --> 数字
-
如果是纯数字的字符串，则直接将其转换为数字
var str1 = "123"; var res1 = Number(str1); console.log(res1); // 123 console.log(typeof res1); // number -
如果字符串中有非数字的内容，则转换为NaN
var str2 = "123ab"; var res2 = Number(str2); console.log(res2); // NaN -
如果字符串是一个空串或者是一个全是空格的字符串，则转换为0
var str3 = ""; var res3 = Number(str3); console.log(res3); // 0 var str4 = " "; var res4 = Number(str4); console.log(res4); // 0
-
-
布尔 --> 数字
true 转成 1
-
false 转成 0
var bool1 = true; var res5 = Number(bool1); console.log(res5); // 1 var bool2 = false; var res6 = Number(bool2); console.log(res6); // 0
-
null --> 数字 --> 0
var str5 = null; var res7 = Number(str5); console.log(res7); // 0 -
undefined --> 数字 --> NaN
var str6 = undefined; var res8 = Number(str6); console.log(res8); // NaN
将被转换的数据传入parseInt()函数中/parseFloat()函数中
Number()函数中无论混合字符串是否存在有效整数都会返回NaN
利用parseInt()/parseFloat()可以提取字符串中的有效整数
两者之前的区别是前者只能提取整数,后者可以提取小数
-
parseInt()提取字符串中的整数
从第一位有效数字开始, 直到遇到无效数字
如果第一位不是有效数字, 什么都提取不到, 会返回NaN
-
第一个参数是要转换的字符串，第二个参数是要转换的进制
var str7 = "300px"; var res9 = parseInt(str7); console.log(res9); // 300 var str8 = "300px250"; var res10 = parseInt(str8); console.log(res10); // 300 console.log(parseInt("abc123")); //返回NaN，如果第一个字符不是数字或者符号就返回NaN console.log(parseInt("")); //空字符串返回NaN，Number("")返回0
-
parseFloat提取字符串中的小数
会解析第一个. 遇到第二个.或者非数字结束
如果第一位不是有效数字, 什么都提取不到
不支持第二个参数，只能解析10进制数
-
如果解析的内容里只有整数，解析成整数
var str9 = "20.5px"; var res11 = parseInt(str9); console.log(res11); // 20 var str10 = "20.5.5.5px"; var res12 = parseFloat(str10); console.log(res12); // 20.5
对非String使用parseInt()或parseFloat(), 会先将其转换为String然后在操作
var str11 = true;
var res13 = parseInt(str11); // 这里相当于parseInt("true");
console.log(res13); // NaN
var res14 = Number(str11);
console.log(res14); // 1
进制转换
-
什么是进制?
- 是一种计数的方式,数值的表示形式
-
常见的进制
- 十进制、二进制、八进制、十六进制
-
进制数字进位方法
十进制 0、1、2、3、4、5、6、7、8、9 逢十进一
-
二进制 0、1 逢二进一
- 书写形式:需要以0b或者0B开头,比如0b101
-
八进制 0、1、2、3、4、5、6、7 逢八进一
- 书写形式:在前面加个0,比如045
-
十六进制 0、1、2、3、4、5、6、7、8、9、A、B、C、D、E、F 逢十六进一
16进制就是逢16进1,但我们只有0~9这十个数字,所以我们用A,B,C,D,E,F这五个字母来分 别表示10,11,12,13,14,15。字母不区分大小写。
书写形式:在前面加个0x或者0X,比如0x45
练习判断下列数字是否合理
00011 0x001 0x7h4 10.98 0986 .089-109
+178 0b325 0b0010 0xffdc -.003
-
十进制转换二进制
-
规律: 用需要转换的十进制/2取余然后倒叙
9 / 2 = 4 = 1 4 / 2 = 2 = 0 2 / 2 = 1 = 0 1 / 2 = 0 = 1 结果1001 var num = 0b1001; console.log(num); console.log(parseInt("1001", 2));
-
-
二进制转换十进制
-
规律: 从低位数开始, 用低位 * 2的多少次幂, 幂数从0开始递增
1001 1 * 2(0) = 1 0 * 2(1) = 0 0 * 2(2) = 0 1 * 2(3) = 8 结果: 1 + 0 + 0 +8 = 9
-
-
二进制转换八进制
因为八进制逢八进一
-
规律: 三个二进制位代表一个八进制位, 只需要从低位开始将三个二进制位转换为十进制再链接起来
00 001 001 结果: 0 1 1 = 011 console.log(parseInt("011", 8)); // 9
-
二进制转换十六进制
因为十六进制逢十六进一
-
规律: 四个二进制位代表一个十六进制位, 只需要从低位开始将事个二进制位转换为十进制再链接起来
0001 1011 结果: 1 b = 0x1b console.log(parseInt("0x1b", 16));// 27
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript基础-数据类型转换</title>
</head>
<body>
<script type="text/javascript">
//toString()
console.log('toString');
var num1 = 10;
var numStr1 = num1.toString();
console.log(numStr1);
console.log(typeof numStr1);
//null和undefined这两个值没有toString()方法
// var num2 = undefined;
// console.log(num2.toString());//error
// var num3 = null;
// console.log(num3.toString());//error
//NaN 可以
console.log('NaN');
var num4 = NaN;
console.log(num4.toString());//NaN
//不会影响到原变量
console.log('不会影响到原变量');
var num5 = 100;
console.log(typeof num5.toString());
console.log(typeof num5);
//String(参数)
console.log("String(参数)");
var num6 = 101;
console.log(String(num6));
console.log(num6);
var num7 = null;
console.log(String(num7));//null
console.log(String(undefined));//undefined
// +
console.log('+');
var num8 = 100;
var numStr8 = num8 + "";
console.log(typeof numStr8);
var num9 = true;
var res2 = num9 + "";
console.log(res2); // true
console.log(typeof res2); // string
var num10 = undefined;
var res3 = num10 + "";
console.log(res3); // undefined
console.log(typeof res3); // string
var num11 = null;
var res4 = num11 + "";
console.log(res4); // null
console.log(typeof res4); // string
//Number(参数)
console.log("Number(参数)");
var str1 = "123";
var res1 = Number(str1);
console.log(res1); // 123
console.log(typeof res1); // number
var str2 = "123ab";
var res2 = Number(str2);
console.log(res2); // NaN
var str3 = "";
var res3 = Number(str3);
console.log(res3); // 0
var str4 = " ";
var res4 = Number(str4);
console.log(res4); // 0
var bool1 = true;
var res5 = Number(bool1);
console.log(res5); // 1
var bool2 = false;
var res6 = Number(bool2);
console.log(res6); // 0
var str5 = null;
var res7 = Number(str5);
console.log(res7); // 0
var str6 = undefined;
var res8 = Number(str6);
console.log(res8); // NaN
//parseInt()
console.log("parseInt(参数)");
var str7 = "300px";
var res9 = parseInt(str7);
console.log(res9); // 300
var str8 = "300px250";
var res10 = parseInt(str8);
console.log(res10); // 300
console.log(parseInt("abc123")); //返回NaN，如果第一个字符不是数字或者符号就返回NaN
console.log(parseInt(""));
//parseFloat()
console.log('parseFloat(参数)');
var str9 = "20.5px";
var res11 = parseInt(str9);
console.log(res11); // 20
var str10 = "20.5.5.5px";
var res12 = parseFloat(str10);
console.log(res12); // 20.5
//对非String使用parseInt()或parseFloat(), 会先将其转换为String然后在操作
var str11 = true;
var res13 = parseInt(str11); // 这里相当于parseInt("true");
console.log(res13); // NaN
var res14 = Number(str11);
console.log(res14); // 1
</script>
</body>
</html>
