JavaScript数据类型及数据类型的转换

喜欢ヅ旅行 2022-10-15 04:48 281阅读 0赞

### JavaScript零基础 ###

*  一、数据类型
 *   *  1.1 原始类型
     *   *  1.1.1 数值型
         *  1.1.2 字符串型
         *  1.1.3 布尔型
         *  1.1.4 未定型
         *  1.1.5 空
     *  1.2 引用类型
 *  二、数据类型转换
 *   *  2.1 隐式转换
     *   *  2.1.1 加运算
         *  2.1.2 减乘除取余运算
     *  2.2 强制转换
     *   *  2.2.1 强制转换为数值 - Number()
         *  2.2.2 强制转换为整型 - parseInt()
         *  2.2.3 强制转换为浮点型 - parseFloat()
         *  2.2.4 数值和布尔型转换为字符串 - toString()
 *  三、拼接

# 一、数据类型 #

> 数据类型分为两大类：原始类型和引用类型

## 1.1 原始类型 ##

<table> 
 <thead> 
  <tr> 
   <th>数据类型</th> 
   <th>typeof 检测数据类型</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>数值型</td> 
   <td>‘number’</td> 
  </tr> 
  <tr> 
   <td>字符串型</td> 
   <td>‘string’</td> 
  </tr> 
  <tr> 
   <td>布尔型</td> 
   <td>‘boolean’</td> 
  </tr> 
  <tr> 
   <td>未定型</td> 
   <td>‘undefined’</td> 
  </tr> 
  <tr> 
   <td>空</td> 
   <td>‘object’</td> 
  </tr> 
 </tbody> 
</table>

### 1.1.1 数值型 ###

> 数值型分为整型和浮点型

（1） 整型

2进制：0b开头的数字

8进制，以0开头的数字

10进制，正常输出

16进制，以0x开头的数字，a-f代表10-15，不区分大小写

//2进制
      var n1=0b101;
      console.log(n1); //5
      //8进制
      var n2=010;
      console.log(n2); //8
      //10进制
      var n3=10;
      console.log(n3); //10
      //16进制
      var n4=0x100;
      console.log(n4); //256

（2） 浮点型

> 小数点浮动

var n5=314.567;//原数
      var n6=3.14567e+2;//向左浮动两位
      var n7=3145.67e-1;//向右浮动1位
      console.log(n5,n6,n7);//三者都是 314.567

### 1.1.2 字符串型 ###

> 被引号包含的数据，不区分单引号和双引号  
>   
> 使用’a’.charCodeAt()可以查看任意一个字符的Unicode码

var s1="1";
      console.log(s1,typeof s1);//1 string
      //单引号
      var s2='yu';
      console.log(s2,typeof s2);//yu string
      //双引号
      var s3="str";
      console.log(s3,typeof s3);//str string
      //查看任意一个字符的编码，文件类型utf-8
      console.log('于'.charCodeAt());//20110
      console.log("小".charCodeAt());//23567

### 1.1.3 布尔型 ###

> 只有两个值，true-真 ， false-假  
>   
> 通常用来保存只有两种状态的数据，例如性别，是否登录等

var t1=true;
      console.log(t1,typeof t1);//true boolean
      //在一些运算结果会得到布尔型的值
      var t2=6<5;
      console.log(t2,typeof t2);//false boolean

### 1.1.4 未定型 ###

> 只有一个值undefined  
>   
> 声明了变量未赋值就为undefined，表示的是一个空的变量

var u;
      console.log(u,typeof u);//undefined undefined

### 1.1.5 空 ###

> 只有一个值 null，属于对象型，常与引用类型数据一起使用

//要出现空只能手动赋值
      var n=null;
      console.log(n,typeof n);//null object

## 1.2 引用类型 ##

> 引用类型属于对象，后边才会说到

# 二、数据类型转换 #

> 分为隐式转换和强制转换

## 2.1 隐式转换 ##

> 所有隐式转换：运算过程中会自动调用一个函数Number();  
>   
> 加号两端只要有一端是字符串，结果就隐式转换为字符串  
>   
> 其余减乘除取余都是隐式转换为数值

### 2.1.1 加运算 ###

（1）加号两端有字符串：

① 数值+字符串

//数值+字符串,数值转换为字符串
      var n1=1+'2';
      console.log(n1,typeof n1); //12 string

② 布尔型+字符串

//布尔型为true/false时：
      //布尔型+字符串，布尔型转换为字符串
      var n3=true+'2';
      console.log(n3,typeof n3); //true2 string
      
      //一些运算结果为布尔型的值时：
      var n4='1'+3>1;
      console.log(n4);//true
      var n4='1'+3<1;
      console.log(n4);//false

（2）加号两端无字符串：

① 数值+布尔型

//数值+布尔型，布尔型转换为数值
      var n2=1+true;
      console.log(n2,typeof n2); //2 number

（3）小综述：JS中+的作用

> 执行数值之间的加法运算  
>   
> 执行字符串之间的拼接

var a= 2,b=true,c='tedu';
      console.log(a+b+c);//'3tedu'
      console.log(b+c+a);//'truetedu2'
      console.log(c+a+b);//'tedu2true'

### 2.1.2 减乘除取余运算 ###

> 只要存在字母运算结果就为NaN，其余正常运算  
>   
> NaN 表示 Not a Number

//减
      var n1='4'-2;//2
      var n2='4a'-2;//NaN
      //乘
      var n3='2'*2;//4
      var n4='2a'*2;//NaN
      //除
      var n5='8'/'2';//4
      var n6='8a'/'2';//NaN
      //取余
      var n7='4'%'2';//0
      var n8='4a'%'2';//NaN
      console.log(n1,n2,n3,n4,n5,n6,n7,n8,n9);

## 2.2 强制转换 ##

> 转换时未成功得到一个数值就返回NaN  
>   
> NaN和任何数值(包括NaN本身)执行运算结果还是本身

### 2.2.1 强制转换为数值 - Number() ###

> 字符串（不含字母）转数值：引号内数字  
>   
> 字符串（含字母）转数值：NaN  
>   
> 布尔型转数值：true - 1 , false - 0  
>   
> 未定型转数值：NaN  
>   
> 空转数值：0

//只有数字的字符串
      var m1=Number('1');      //1 number
      //带有字母的字符串
      var m2=Number('1a');     //NaN number
      //布尔型
      var m3=Number(true);     //1 number
      var m4=Number(false);    //0 number
      //未定义型
      var m5=Number(undefined);//NaN number
      //空
      var m6=Number(null);     //0 number
      console.log(m1,typeof m1,m2,typeof m2,m3,typeof m3,m4,typeof m4,m5,typeof m5,m6,typeof m6);

### 2.2.2 强制转换为整型 - parseInt() ###

> 小数转整型：去除小数点后的，不四舍五入  
>   
> 字符串转整型：开头是数字就可转整型  
>   
> 布尔型、未定型、空转整型：都是NaN

//小数转整型
      var p1=parseInt(3.14);   //3
      var p2=parseInt(3.96);   //3
    
      //字符串转整型
      //① 不带字母的字符串
      var p3=parseInt('33.3'); //33
      //② 带字母的字符串转整型
      //字母不在开头
      var p4=parseInt('1a.6'); //1
      var p5=parseInt('12.b'); // 12
      //字母在开头
      var p6=parseInt('b12.5');//NaN
    
      //布尔型、未定型、空转整型
      var p7=parseInt(true); //NaN
      var p8=parseInt(undefined); //NaN
      var p9=parseInt(null); //NaN
      console.log(p1,p2,p3,p4,p5,p6,p7,p8,p9);

### 2.2.3 强制转换为浮点型 - parseFloat() ###

> 范围：通常用于将字符串转换为浮点型  
>   
> 规律：从开头找，不仅找整数还找小数  
>   
> 字符串转浮点型：开头不是数字就为NaN  
>   
> 布尔型、未定型、空转浮点型：NaN

//字符串转浮点型
      var f1=parseFloat('3a');   //3
      var f2=parseFloat('3.14a');//3.14
      var f3=parseFloat('a3.14');//NaN
      //布尔型转浮点型
      var f4=parseFloat(true); //NaN
      //未定型转浮点型
      var f5=parseFloat(undefined);//NaN
      //空转浮点型
      var f6=parseFloat(null); //NaN
      console.log(f1,f2,f3,f4,f5,f6);

### 2.2.4 数值和布尔型转换为字符串 - toString() ###

> 只有数值型和布尔型才能转为 str  
>   
> 转字符串：将转的数字放在变量

var num1=2;
      var num2=true;
      //将num转换为字符串，然后保存到变量str中
      var str1=num1.toString();
      var str2=num2.toString();
      console.log(str1,typeof str1);//2 string
      console.log(str2,typeof str2);//true string

# 三、拼接 #

> 后端最终显示在浏览器（html文件）：是js通过Ajax在后端请求数据，获取到数据后在浏览器html进行拼接。获取数据不同，拼接也不同。用DOM操作来实现js到html的实现。

//练习1：从后端获取了一个员工姓名及部门名称，使用拼接打印
      var ename='涛哥';
      var deptId='研发部';
      console.log('姓名：'+ename + ' 部门：'+ deptId);
      //姓名：涛哥  部门：研发部
      //注意：空格也是一个字符串

//练习2：后端获取到商品的名称和价格，拼接打印
      var title='华为';
      var price='2999';
      console.log('商品名称：' + title + '  商品价格：' + price);
      //商品名称：华为  商品价格：2999