什么是数据类型转换?

使用表单、prompt 获取过来的数据默认类型是字符串类型的,此时就不能直接进行加减法运算,而需要转换变量的数据类型。

通俗来说,数据类型转换就是将一种数据类型转换成另外一种数据类型。

通常有 3 种方式的转换:

  1. 转换为字符串类型
  2. 转换成数字型
  3. 转换成布尔类型

JS是弱类型语言,变量的数据类型是由变量值的数据类型决定的。

var stu; 
    //undrfined未定义变量的值
    stu=25;
    // number 数字类型的值
    stu="25"
    // string 字符串类型的值

转换方法

1、强制类型转换:将一种数据类型强制转换成另一种类型的数据,类型转换主要是指将其他类型的数据准换成String、Number、Boolean类型的数据

2、隐式转换方法:自动转换,由于JS在运算过程中,自己进行转换的操作,不需要人为的参与

 

一、转换为字符串

 方式  说明  案例
 toString()  转换为字符串  var num=1; alert(num.toString());  
 String() 强制转换   转换成字符串  var num=1; alert(String(num));
 加号拼接字符串        和字符串拼接的结果都是字符串        var num=1; alert(num+'我是个字符串');      

 

 

 

 


 

 

 (一)、使用 toString( )方法

语法:被转换对象  .toString()

注意:

  1、这种调用方法只适用Number、Boolean类型的数据,Null和Undefined类型数据会报错,并不适用。

  2、控制台黑色的文本是字符串类型的,蓝色的文本是数字类型的。

实例:

在这个例子中变量 num的值为数字 123;使用 toString() 方法将其转换成 字符串并且赋值给变量 str。这样就将数值类型转换成字符类型。

var num = 123;
console.log(num);
console.log(typeof num);

var str=num.toString();
console.log(str);
console.log(typeof str);

这种调用方法只适用Number、Boolean类型的数据,Null和Undefined类型数据会报错,并不适用

 

(二)调用 String() 函数

调用String( )函数,并将被转换的数据作为参数传递给函数。

语法:String(被转换对象)

例如:a.String(a) 表示调用String函数,将a转换成字符串类型数据。

 注意:

  1、使用String()做 强制转换的时候,对于Number、Boolean类型的数据实际上就是调用toString( )方法。

  2、但是对于null和undefined,就不会调用toString( )方法,它会直接将 null 转化为 "null" ,将 undefined 转化为 "undefined"

实例:

var num = 123;
console.log(String(num));
console.log(typeof String(num));

使用 String() 会直接将 null 转化为 "null" ,将 undefined 转化为 "undefined"

var num = null;
console.log(String(num));
num = undefined;
console.log(String(num));

 

(三)+ 拼接字符串 (隐式转换)

这种方法更常用使用+拼接转换字符串,最简单的方法就是 给被转换对象 加上一个空字符串('')。

实例:

var num = 123;
var str = num + '';
console.log(str);
console.log(typeof str);

 

二、转换为数字型(重点)

方式 说明 案例
parseInt(string) 函数                将string 类型转换成整数数值型            parseInt('34')   
parseFloat(string) 函数 将 string 类型转换为浮点数值型 parseFloat('34.81')        
Number() 强制转换函数   将 string 类型转化为数值型 Number('12')
JS 隐式转换(- * /) 利用算术运算隐式转换为数值型 '12' - 0

 

 

 

 

 


 

 

 (一)parseInt() 函数转换为数值型

parseInt( )函数可以将字符串中有效的整数内容提取出来,将字符型转换为 数字型的;

parseInt( )函数在解析字符串的时候按照从左到右的顺序

console.log(parseInt('3.12'));  // 3 取整
console.log(parseInt('123aa'));  // 会取到字符串中的整数部分,从左向右
console.log(parseInt('rem111px')); // NaN

 

(二)parseFloat() 函数转换为数值型

parseFloat( ) 函数可以获得有效的小数,并且将字符型转换为数字型

parseFloat( )函数在解析字符串的时候按照从左到右的顺序,不能解析除了数字以外的文本。

console.log(parseFloat('3.14'));  //3.14
console.log(parseFloat('123aa'));  //去掉后面部分,只保留数字
console.log(parseFloat('rem123qq'));  //NaN

 注意:

1、如果对非String类型数据使用parseInt( ) 或是parseFloat( ) ,它会现将其转化为String,然后再进行操作。

2、由于 parseInt( ) 或是parseFloat( ) 无法解析非数字类型的字符,所以输出 NaN,但是数据类型还是变为 number 数字类型。

var a=parseFloat(true);
console.log(a);
console.log(typeof a);

a=parseFloat(null);
console.log(a);
console.log(typeof a);

a=parseFloat(undefined);
console.log(a);
console.log(typeof a);

 

(三)使用Number() 函数(强制转换)

调用 Number() 函数使其他类型的数据转换成 数字型

1、当需要转换的字符串引号引的不是数字

例如abc,最终输出结果就是NAN(Not A Number)不是一个数字。

var a=Number('doctor');
console.log(a);console.log(typeof a);

2、字符串→Number 转换情况:

  1、如果是纯数字的字符串,直接将其转换为数字;

  2、如果字符串中有非数字内容,则转换为NAN(Not A Number);

  3、如果字符串是一个空串或是一个全部由空格组成的字符串,则转换为0。

3、Boolean值→Number 转换情况:

  1、如果是true,转换为1;

  2、如果是false,转换为0。

4、Null值→Number 转换情况:

  如果是null(空值),转换为0。

5、Undefined→Number 转换情况:

  如果是undefined,转换为NAN(Not A Number)

 

(四)算术运算隐式转换

利用算术运算 (- * /)隐式转换数据类型

var a='12'-0;
console.log(a);
a='12'*1;
console.log(a);
a='12'/1
console.log(a);

 (五)实例

要求:在页面弹出一个输入框,输入了出生年月之后,可以计算年龄

实现思路:

  1、弹出一个输入框(prompt),让用户输入出生年份(用户输入)

  2、将用户输入的值使用变量保存起来,然后用今年的年份去减去变量值,结果就是现在的年龄(程序内部处理)

  3、弹出警示框(alert),将计算的结果输出(输出结果)

在这里 year取过来的是字符串类型的值,但是这里面用的是减法(-),隐式转换

var year = prompt('请输入您的出生年份');
age = 2019 - year;
alert('今年 '+age+'岁了');

 

三、转换为布尔类型

方式 说明 案例
Boolean() 函数          其他类型转换成布尔值          Boolean('true')         

 

 


 

注意:

  • 代表 空、否定 的值都会被转换成 false,例如 ''、0、NaN、null、undefined
  • 其余的值都会被转换成 true

方法:使用Boolean( ) 函数

var a=123;
    // 调用Boolean()函数将数据类型转化为Boolean
    a=Boolean(a);
    console.log(a);
    console.log(typeof a);

数字类型→布尔,除了0和NAN其余的都是true;

字符串→布尔,除了空串(没有内容)其余都是true;

空值→布尔,null转换的是false;

undefined→布尔,undefined转换的也是空值;

对象(object)也会转换成true 。

posted on 2019-09-09 23:00  Cloud%  阅读(1727)  评论(1编辑  收藏  举报