什么是数据类型转换

使用表单、prompt获取过来的数据默认是字符串类型的,此时就不能直接简单的进行加法运算,而需要转换变量的数据类型。通俗来说,就是把一种数据类型的变量转换成另外一种数据类型。

我们通常会实现3种方式的转换:

  • 转换为数字型
  • 转换为字符型
  • 转换为布尔型

转换为数字型:parseInt(); 、parseFloat();、 Number() 、 隐式转换

1.parseInt(变量) 可以把 字符型的转换为数字型 得到的是整数

console.log(parseInt('12.3')); // 12 取整

console.log(parseInt('16.9')); // 16 取整 不会进位(四舍五入)

console.log(parseInt('100px')); // 100 会去掉px这个单位

console.log(parseInt('abc123')); // NaN

带参数的用法

var num = parseInt(变量,radix); // radix是基层的意思

解释:radix写成16,内部会认为是以16进制为基底,把变量转为10进制的数字(radix范围是2-36)

var num = '100';

console.log(parseInt(num,16)); // 256 意思是把100看成是16进制的100,转成10进制为256   

2.parseFloat(变量) 可以把字符型的转换为数字型 得到的是小数 浮点数

console.log(parseFloat('12.34')); // 12.34

console.log(parseFloat('100px')); // 100 也会去掉px这个单位

console.log(parseFloat('fff123')); // NaN

3.利用 Number(变量) 强制转换 (把所有能转换为数字类型的)

console.log(Number(true)); // 1 

console.log(Number(false)); // 0

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

console.log(Number('124')); // 124

4.利用算术运算 - * / 隐式转换

​ 注意:程序执行时 ,内部自动转换

console.log('12' - 0); // 12 注意 + 不可以 否则就是字符拼接

console.log('15' * 1); // 15

console.log('100' - '95'); // 5

转换为字符串

方式说明按例
toString()转成字符串var first = 1;alert(first.toString());
String()转成字符串var second = 1; alert(String(second));
加号拼接字符串(隐式转换和字符串拼接的结果都是字符串var third = 1 ; alert(third + ' ');
  • toString()和String()使用方式不一样。
  • 三种转换方式,我们更喜欢用第三种加号拼接字符串转换方式,这个一种也称为隐式转换。
转换为字符串型 :toString();、String();、隐式转换

1.把数字转换为字符串型 : 变量.toString();

var first = 10;

var str = first.toString();

console.log(str); // 字符串 '10'

console.log(typeof str); // string 数据类型

注意:undefined和NaN不能用toString()方法。

带参数的用法
var text = 100;

console.log(text.toString(8)); // 144 把10进制的100转换为八进制

// 以十进制为基底转换为目标进制

2.利用 String(变量);

 String()强制类型转换,和Number()使用方法类似。
var second = 100;

console.log(String(first)); // 字符串 '100'

3. 利用 + 拼接字符串的方式实现转换效果 隐式转换

var third = 200;

console.log(third + ''); // 字符串 '200'

转换为布尔型: Boolean()

方式说明按例
Boolean()其他类型转成布尔值Boolean('true');
  • ​ 代表空、否定的值会被转换为false,如 '' , 0、 null、undefined、NaN
  • ​ 其余值都会被转换为true

    console.log(Boolean('')); // flase
    
    console.log(Boolean(0));// flase
    
    console.log(Boolean(null));// flase
    
    console.log(Boolean(undefined));// flase
    
    console.log(Boolean(NaN));// flase
    
    console.log(Boolean(124)); // true
    
    console.log(Boolean('你好'));// true
文章目录