JS02-数据类型间的自动转换与强制转换

一.字符串不能解析变量

**1.**在JavaScript中,单引号,双引号的字符串,都不能解析变量
**2.**你写的变量,只能显示为变量名称的字符串,不会显示为变量中存储的数值
**3.**解决方法：
①方法1,使用字符串拼接方式
②方法2,使用模板字符串,可以解析变量
模板字符串 使用的 是 反引号 键 即键盘上方 1 左侧的按钮.
用法：在 模板字符串 反引号中 使用 ${变量} 包裹变量,就可以解析变量数值了.
方法①②没有区别，爱用哪个用哪个，最后字符串拼接或字符串解析变量 执行结果.
**4.**例子：
错误写法
var airPollution = 52 ;
console.log( ‘今天的空气污染是 : airPollution’ ); → 今天的空气污染是 : airPollution
法一：字符串拼接方式
console.log( '今天的空气污染是 : ’ + airPollution); → 今天的空气污染是 : 52
法二：模板字符串,也可以解析变量
①,使用反引号
②,使用 ${} 包裹变量
console.log( 今天的空气污染是 : ${airPollution} );

二.JavaScript的三种调试方法

注：JavaScript中,变量存储的数据,有时,我们知道是什么,有时不清楚内容,需要输出查看
在 JavaScript中,有3种常用的查看调试方式.
1, window.alert(‘内容’) — 弹出提示框
window.alert(‘beijing’);
2, document.write(‘内容’) — 在页面输出
document.write(‘北京’);
3, console.log(‘内容’) — 控制台输出 — 浏览器控制台 console 内容中(控制台输出是常用方式)
console.log(‘北京’);

三.数据类型的检测

1.在JavaScript中,数据类型的检测,使用 typeof() 方法 / 函数
①typeof(变量/数据) , 执行结果是变量中存储数据的数据类型
②typeof还有一种语法形式 typeof+空格+变量 但是这种语法形式不推荐使用,容易程序执行错误
③typeof 并不能非常准确的表示每一种数据类型
④一般是使用判断 布尔类型 数值类型 字符串类型 undefined类型
⑤其他数据类型,我们之后有更加准确,但是复杂的判断方式
⑥所谓的 方法 / 函数 , 现在指的是,JavaScript给我们定义好的功能
⑦这个所谓的函数,跟数学中的函数没有任何关系
2.整数,浮点数,NaN 执行结果都是 number
var int1 = 100;
var float1 = 100.123;
console.log( typeof(int1) );
console.log( typeof(float1) );
console.log( typeof(NaN) );
3.布尔类型的执行结果是 boolean
var bool1 = true;
console.log( typeof(bool1) );
4.字符串类型的执行结果是 string
var str1 = ‘北京’;
console.log( typeof(str1) );
5.undefined 执行结果 undefined
console.log( typeof(undefined) );
6.null 执行结果 object
console.log( typeof(null) );
7.typeof( typeof(变量/数据) ); 结果为字符串 string
不管变量或者数据,是什么数据类型,执行结果过都是 string

四.数据类型的转化

1. 什么是数据类型的转化,为什么要有数据类型的转化
   ① 在 JavaScript 程序中 , 变量中存储的数据类型没有限制
   ②也就是在变量中可以存储任何符合JavaScript语法规范的数据类型
   ③但是 在 JavaScript 程序的执行过程中,往往需要变量中存储的数值是某种特定的数据类型,别的数据类型不行，此时就需要进行数据类型的转化
   ④所谓的数据类型转化,就是将当前数据类型转化为其他数据类型
   2.JavaScript中数据类型的转化,分为自动转化和强制转化
   ① 自动转化是计算机程序,自动完成的转化(自动转化不是任何时候都会发生的,只有特殊情况,才会发生)
   ② 强制转化是程序员,强行完成的转化
   3.比喻中理解含义
   ①例如去美国旅游,需要使用 美金 — 可以理解为一种数据类型
   ②我们当前银行卡中存储的是 人民币 也是一种数据类型
   ③到了 美国 , 购物刷卡 , 银联自动将账户中的人民币 — 转化为美金来结算
   这个转化 是银行自动完成的 ,是 自动转化
   ④如果我们到 银行柜台 去 将人民币 换成 美金
   这个转化 是我们人为强行完成的 , 是 强制转化

一.自动转化为布尔类型

1.其他数据类型,自动转化为布尔类型
在 执行 if 判断时 ,其他数据类型会自动转化为布尔类型
2.其他类型转化为布尔类型的原则
重点：转化为 false : 0 ‘’ undefined null NaN 这五种情况转化为false
特别提醒 ：0.0 、 0.00000 都算是0
重点：其他所有数据内容,都会转化为true
特别提醒： ’ ‘(‘空格’)、‘0’ 都为true
3.if判断的基本语法
if(表达式){
执行程序
}else{
执行程序
}

4.注意事项：
①这里不是表示对错,是如果 0 要是 按照 布尔类型类执行转化 ,转化的结果是 false
②if 的 () 里, 只 接受你 输入 true 和 false 两个数值
③如果 你在 if 的 ( ) 中 输入了 不是 true 或者 false 的内容
④if 程序 会自动的将你输入的其他数据 会变成 / 转化 为 true 或者 false
⑤其中 0 ‘‘空字符串 undefined null NaN 会变成 false
⑥if () 中 写什么都行 反正if 最终都会 给变成 true 或者 false
⑦true 就是 执行 if{} false 就执行 else{}
5.布尔值最终为false
例子1：直接填false
if( false ){
console.log(‘真’); → 控制台输出 真
}else{
console.log(‘假’);
}
例子2：0 转化为 false
如果 0 转化为 true 执行 if{} 输出的应该是是 字符串 转化为true
如果 0 转化为 false 执行 else{} 输出的应该是是 字符串 转化为false
if(0){
console.log( ‘转化为true’ );
}else{
console.log( ‘转化为false’ ); → 控制台输出 转化为false
}
例子3： ‘’ 空字符串 转化为 false
if(’’){
console.log( ‘转化为true’ );
}else{
console.log( ‘转化为false’ ); → 控制台输出 转化为false
}
例子4： undefined 空字符串 转化为 false
if(undefined){
console.log( ‘转化为true’ );
}else{
console.log( ‘转化为false’ ); → 控制台输出 转化为false
}
例子5：null 空字符串 转化为 false
if(null){
console.log( ‘转化为true’ );
}else{
console.log( ‘转化为false’ ); → 控制台输出 转化为false
}
例子6：NaN 空字符串 转化为 false
if(NaN){
console.log( ‘转化为true’ );
}else{
console.log( ‘转化为false’ ); → 控制台输出 转化为false
}
6.布尔值最终为true
例子1：字符串空格（‘空格’）
if(’ '){
console.log( ‘转化为true’ ); → 转化为true
}else{
console.log( ‘转化为false’ );
}
例子2：字符串0
if(‘0’){
console.log( ‘转化为true’ ); → 转化为true
}else{
console.log( ‘转化为false’ );
}
例子3：字符串0.0
if(‘0.0’){
console.log( ‘转化为true’ ); → 转化为true
}else{
console.log( ‘转化为false’ );
}

二.强制转化为布尔类型

1.人为的将其他数据类型,强制转化为布尔类型
2.就是使用JavaScript中定义好的 方法/函数 → Boolean( 数据/变量 )
3.转化原则与自动转化原则相同
false : 0 ‘’ undefined null NaN
true : 其他数据,都转化为true（’ ‘和’0’）
4. Boolean() 这个方法 不会改变 变量中存储的原始数值
5.举例说明：
var int = 100;
// 将 int 中存储的数值100 ,转化为布尔值输出,转化结果是 true
console.log( Boolean(int) ); → true
// 使用 Boolean() 方法 转化 变量中存储的数值,但是不会改变变量中存储的数值
// 只是将变量中的数值,解析获取,再转化输出,不会改变变量中存储的内容
console.log( int ); → 100

一.自动转化为字符串

1.计算机将其他类型自动转化为字符串
2.在执行 字符串拼接 时, 会将其他数据类型转化为字符串类型
3.执行字符串拼接, 拼接符号 +号的两侧 应该都是 字符串类型
var str1 = ‘北京’ + ‘上海’;
4.如果拼接符号 +号的两侧有其他类型 JavaScript程序,会自动转化为 字符串类型,再执行拼接
5.基本数据类型转化为字符串原则：
将 数据数值 直接转化为字符串 , 然后执行拼接操作
布尔值 true —> 字符串 ‘true’
布尔值 false —> 字符串 ‘fasle’
undefined —> 字符串 ‘undefined’
unll —> 字符串 ‘null’
数值 —> 将数值解析转化为 对应的 纯数字的字符串
举例说明：
var str2 = ‘北京’ + true;
var str3 = ‘北京’ + false;
var str4 = ‘北京’ + undefined;
var str5 = ‘北京’ + null;
var str6 = ‘北京’ + 100;
var str7 = ‘北京’ + 100.123;
var str8 = ‘北京’ + 2e3; // 科学技术法,会解析为表示的数值,然后再拼接
6.引用数据类型转化为字符串原则：
数组 —> 将 [] 中的内容,转化为字符串的形式,进行拼接（不要 [] 将数组的数据内容,转化为字符串,执行拼接操作）
对象 —> 任何对象,任何内容,都会转化为 [object Object] 固定的内容形式
函数 —> 将所有的程序代码,转化为字符串，执行拼接操作
举例说明：
① 特殊1 数组
var str9 = ‘北京’ + [1,2,3,4,5] ;
console.log(str9); → 北京1,2,3,4,5
②特殊2 对象
var str10 = ‘北京’ + {name:‘张三’ , age:18 , sex:‘男’} ;
console.log(str10); → 北京[object Object]
③特殊3 函数
var str11 = ‘北京’ + function fun(){console.log(123)};
console.log(str11); → 北京function fun(){console.log(123)}

二.强制转化为字符串

1.人为的将其他类型强制转化为字符串类型
2.方法1 变量.toString(进制类型)
①将数值强制转化为字符串,并且可以设定转化的进制
②.toString() 之前,不能直接写数值,必须是写成变量的形式
③进制常用的数值是 2 8 16
④可以设定的范围是 2 - 36 进制 10个数值+26个英文字母
⑥最少是2进制,最多是36进制
举例：
// 将int 中存储的 100 数值,按照二进制转化,并且以字符串的形式来输出
// 如果输出时, 第一个数值1 之前的 0 , 会不输出 , 对数值大小没有影响
var int = 100;
console.log(int.toString(2));
// 八进制
console.log(int.toString(8));
// 十六进制
console.log(int.toString(16));
// ()中没有输入,默认执行十进制
console.log(int.toString());
// 进制范围是2-36
console.log(int.toString(9));
3.方法2 String( 变量 / 数据 )
①将变量或者数据,转化为字符串
②原则按照自动转化的原则来执行
③不会改变变量中存储的原始数值
var int = 2e5;
console.log( String(int) ); → 200000
console.log( int ); → 200000
字符串拼接时,会将其他数据类型自动转化为字符串

一.自动转化为数值类型

1.计算机将其他类型自动转化为数值，在执行数学运算时 会触发数据类型的自动转化
2.转化原则
布尔类型 : true —> 1
false —> 0
undefined : 转化为 NaN
null : 转化为 0
字符串 :
如果整个字符串,是纯数字字符串,或者符合科学计数法 —> 转化为对应的数值
如果字符串内有不符合数字规范的内容 —> 转化为 NaN
数组,对象,函数
如果是 + 加号 执行的是字符串拼接效果，按照这些数据类型转化为字符串的原则来转化
如果是 其他形式的运算 执行结果都是 NaN
3.布尔类型、undefined、null转化结果：
var int1 = 100 - true; console.log(int1); → 99
var int2 = 100 - false;console.log(int2); → 100
var int3 = 100 - undefined;console.log(int3); → NaN
var int4 = 100 - null;console.log(int4); → 100
4.字符串的转化结果
var int5 = 100 - ‘100’; // 整数字符串
var int6 = 100 - ‘90.123’; // 浮点数字符串
var int7 = 100 - ‘2e3’; // 科学计数法字符串
// 转化为对应的数值,参与运算
var int8 = 100 - ‘123abc’; // 包含不符合数字规范内容的字符串，转化为 NaN , 参与运算
// 任何有 NaN , 参与的运算,结果都是NaN
console.log(int5); → 0
console.log(int6); → 9.87699999
console.log(int7); → -1900
console.log(int8); → NaN
5.数组,对象,函数
console.log( 100 + [1,2,3,4,5] ); → 1001,2,3,4,5
console.log( 100 + {name:‘张三’ , age:18} ); → 100[object Object]
console.log( 100 + function fun(){console.log(123)} ); → 100function fun(){console.log(123)}

     console.log( 100 - [1,2,3,4,5] );  →   NaN
     console.log( 100 - {name:'张三' , age:18} );  →   NaN
     console.log( 100 - function fun(){console.log(123)} );  →   NaN

二.强制转化为数值类型

1.人为的将其他数据类型强制转化为 数值类型
2.方法1 Number(变量/数值)
将其他类型强制转化为数值类型,转化原则与自动转化选择相同
console.log( Number(true) ); // 1
console.log( Number(false) ); // 0

    console.log( Number(null) );   // 0
    console.log( Number(undefined) );   // NaN

    console.log( Number('100') );       // 对应的数值
    console.log( Number('100.123') );   // 对应的数值
    console.log( Number('2e4') );       // 对应的数值
    console.log( Number('123abc') );    // NaN

    console.log( Number( [1,2,3,4,5] ) );                           // NaN
    console.log( Number( {name:'zhangsan'} ) );                     // NaN
    console.log( Number( function fun(){console.log('abc')} ) );    // NaN

3.方法2 parseInt(变量 / 数据)
是获取变量或者数据的整数部分，从数据的 左侧起 解析获取 整数内容
① console.log( parseInt(true) );
console.log( parseInt(false) );
console.log( parseInt(null) );
console.log( parseInt(undefined) );
console.log( parseInt( {name:‘zhangsan’} ) );
console.log( parseInt( function fun(){console.log(‘abc’)} ) );
// 以上结果都是 NaN
②数组执行,是获取 数值部分 也就是 没有 []的部分
即：1,2,3,4,5 整数部分是 1 1之后是逗号 逗号不是整数,之后的部分也就不算整数
若：获取第一个数值的整数部分,如果有就获取,如果没有,结果是NaN
console.log( parseInt( [1,2,3,4,5] ) ); // 结果是 1
console.log( parseInt( [null,2,3,4,5] ) ); // 结果是 NaN
③如果是整数就直接获取,如果是浮点数,或者科学计数法,就获取整数部分
console.log( parseInt( 0.0123 ) ); // 浮点数是获取整数部分 0
console.log( parseInt( 3.123456e3 ) ); // 科学计数法是解析之后,获取整数部分 3123
④字符串不同时
如果是纯数字的字符串
console.log( parseInt( ‘100’ ) ); // 与数字的结果相同 100
console.log( parseInt( ‘0.0123’ ) ); // 与数字的结果相同 0
如果是非纯数字的字符串
console.log( parseInt( ‘3.123456e3’ ) ); // 3
console.log( parseInt( ‘3abc’ ) ); // 3
console.log( parseInt( ‘3.123’ ) ); // 3
// 现在是一个字符串,从左侧开始,找整数部分,第一个是3,第二个是点,点不是整数,因此整数部分就是3
4.方法3 parseFloat( 变量 / 数值 )
console.log( parseFloat(true) );
console.log( parseFloat(false) );
console.log( parseFloat(null) );
console.log( parseFloat(undefined) );
console.log( parseFloat( {name:‘zhangsan’} ) );
console.log( parseFloat( function fun(){console.log(‘abc’)} ) );
// 以上结果都是 NaN
①数值：整数,浮点数,都会完整获取
console.log( parseFloat(100) ); → 100
console.log( parseFloat(100.1234) ); → 100.1234
console.log( parseFloat(1.234567e3) ); → 1234.567
②关键是字符串：从字符串的左侧起 解析 符合浮点数的部分
console.log( parseFloat( ‘100’ ) ); // 与数字的结果相同 → 100
console.log( parseFloat( ‘0.0123’ ) ); // 与数字的结果相同 → 0.0123

    console.log( parseFloat( '3.123456e3' ) );  // 科学技术法会解析   →   3123.456
    console.log( parseFloat( '3.1223abc' ) );       →      3.1223
    console.log( parseFloat( '3.123' ) );      →   3.123