html中隐式转换成数字,详解JS中的隐式类型转换

JS中隐式类型转换

JS中的数据类型

JS中的数据类型分为两大类：

1.基本数据类型：

1.String 字符串

表示一段文本，例如：人的姓名、地址等

2.Number 数值

3.Boolean 布尔值

4.Null 空值

表示“没有对象”，即：此处不应该有值

5.Undefined 未定义

表示“缺少值”，即：此处应该有值，但还没有定义

2.引用数据类型：

1.Object 对象

2.array 数组

3.function 函数

类型转换主要指将其他的数据类型转换成String、Number、Boolean这3种类型。

首先解释一下什么是隐式转换，隐式转换就是在没有调用任何函数方法的时候，将数据的类型进行改变，从而使数据满足运算要求，说白了就是在转换时不给系统提示具体的显示类型，让其自动转换。

同样，相对的肯定还有一个显式转换，顾名思义，显示转换就是强制转换，是我们可以直接对其赋值的，指定将其转换的类型。

JS中隐式转换出现的场景

1.非数值类型数据进行算数运算

即，操作符是+、 - 、* 、/、%等时，会先将数据类型隐式转换成数值型再运算。在这里需要注意的是+，下面将分为两种情况进行分析。

1.数据类型是非字符串类型时进行算数运算

var res = 1+1;

console.log(res);//2

//操作数为数值型，直接相加，不用进行类型转换。

var res = true + false;

console.log(res);//1

//操作数为布尔值时，将会进行隐式转换，true为1，false为0。

var res = null+1;

console.log(res);//1

//当操作数为null时进行隐式类型转换，将null转换成0。

var res = undefined + 1;

console.log(res);//NaN

//当操作数为undefined时，进行隐式类型转换，将undefined转换成NaN

//这里需要注意的是，NaN与任何数据进行运算结果都是NaN。

同理： - 、* 、/、%等运算同样可以将非数值数据进行隐式转换。

2.字符串类型的+运算

当使用+操作字符在这里插入代码片串时，不会进行隐式转换，此时+就相当于连接符

result = "123" + "456";

// 对字符串进行+操作会进行拼串操作，不会转换成number，结果为123456

result = "123" + 4;

// 任何值和字符串相加都会转换成字符串，再进行拼串，结果：1234

console.log(result);

var c = 123;

c = c + "";

// c+空串就被转换成了字符串

// 这就是隐式类型转换，由浏览器自动完成，其实就是调用了String()函数，是一种常用的方法

console.log(typeof c);

// 输出String

console.log(c);

// 输出"123"

console.log("c ="+c );

// 输出"c = 123"

对字符串使用其他几种算数运算符也会进行隐式转换。

2. 非布尔值进行逻辑运算

逻辑运算表达式的返回值一定是布尔类型，对于非布尔值进行运算时，会先将其转换成布尔值，再运算 ，并且返回原值。

// true && true

// 与运算如果两个值都是true则返回后面的数

var result = 1 && 2;

console.log("result = "+result);

// result = 2

// false && true

// 与运算如果两个值有false，则返回靠前的false

result = 0 && 2;

result = 2 && 0;

// 上面两个都返回0

result = NaN && 0;

// 返回NaN

result = 0 && NaN;

// 返回0

// 对字符串和数值使用逻辑运算

var name = 'xiaoming';

var age = 3;

alert(name && age);//3 输出后面的条件

alert(name || age);//xiaoming 输出前面的条件

var age = '3';

alert(name && age);//3 同上

alert(name || age);//xiaoming

/*

如果第一个值为false就直接返回第二个值

如果第一个值是true则直接返回第一个值

*/

// true || true

result = 1 || 2;

// 返回1

result = 2 || NaN;

//返回2

注意：值得一提的是逻辑运算中，运算过程虽然将数值转换成Boolean类型运算，但是输出的是该数据的原值，或者是表达式的结果。

3.非数值数据的关系运算

运算规则：对于非数值进行比较时，会将其转换成为数值然后再比较。 如果符号两侧的值都是字符串时，不会将其转换成数值进行比较，而是会分别比较字符串的Unicode编码

比较字符编码是一位一位进行比较的，如果两位一样，则比较下一位，所以可以借用它来对英文进行排序。

console.log(1 > true);

// false,将true转换成数值1

console.log(10 < "hello");

// false，hello转成null

console.log("1" > "5");

// true

console.log('11' > '5');

// true，只看前面一个1，比5小，直接输出false

console.log('gukun'>'a');

var a = 'gukun';

var b = 'a';

console.log(a.charCodeAt());

console.log(b.charCodeAt());

//true 字符串之间比较看的其实是Unicode编码值的大小，而不是看字符的长短

// ！！！注意：再比较两个字符串型的数字时，可能会得到不可预期的结果，所以一定要转型(里面有一个数字就行了)

console.log('11' > +'5');

在这里还有一些值得注意的问题：

1.字符串与字符串在做比较的时候不会进行隐式转换，直接以Unicode编码进行比较，空串永远小于其他字符串。

var res = 'aa' > []

//res = "aa" > ''

//空字符永远小于非空字符

//res = true

2.字符串与数值进行比较时，将字符串转换成数值型再进行比较。

console.log('1' == 1);

// true 使用==进行比较时，如果类型不同将会自动转化成同一类型再比较

3.字符串与除数值以及字符串的基本数据类型进行比较时，会将字符串与另外一个类型转成number类型。

console.log(true>'');

//true true转换成1，''转换成0

4.null是一个特殊的值，它在做比较的时候只会与null本身以及undefined相等，因为undefined衍生于null。

console.log(null == undefined);

// true undefined衍生于null，所以二者相等结果为true

4.非布尔值进行条件运算

条件运算符也叫三元运算符

语法：条件表达式?语句1:语句2;

执行的流程：

条件运算符在执行时，首先对条件表达式进行求值，如果该值为true，则执行语句1，并返回结果，如果该值为false，则执行语句2并返回结果。

非布尔值在进行条件运算时会先转换成布尔值再进行运算。

"hello"?alert(1):alert(2);//1

// hello的布尔值是true(只有""的布尔值是false)，所以执行语句1。

5.if条件句

在进行if条件判断时，if只能判断Boolean值，所以会将if后的条件语句里非布尔值隐式转换成布尔值再进行判断。

if(arr[]){

console.log('我最棒');

//我最棒 arr[]转换成布尔值是true

}

总结

1.如何将其他类型数据转化为number 类型数据?

答：

(1)显示转换：Number()、parseInt()、parseFloat()

(2)隐式转换：通过算数运算符，将操作数进行转换，任何值(除字符串外)做+、-、 *、 / 等运算时都会转成Number。可以通过-0、 *1、 /1等将其转换成Number。比较运算时也会将数据(字符串除外)先转换成数值型再进行比较。

注意：在这里的两种方法里字符串都是特殊的，在对字符串进行 + 运算时，会将操作数都变成字符串，再进行拼串。同样的，对字符串进行比较时，不会转换成数值，而是直接比较字符串的Unicode编码值。

2.什么数据可以运算？

答：

基本数据类型，引用数据类型要想参与运算必须先将其转换成可以进行运算的基本数据类型string。