JS-数据类型(Number)转换详解

在开发过程中,经常会需要将值进行类型转换,例如前端的日期,前端获取的是date型,而后端只接受字符型,那么就需要进行类型转换。

        首先了解常用的基本数据类型和引用类型

常用的数据类型

  • 基本数据类型(值类型):

    • 数字Number(NaN属于数字类型)

    • 字符串String

    • 布尔Boolean

    • 空对象指针null

    • 未定义undefined

  • 引用数据类型

    • 对象数据类型object

    • {}普通对象

    • []数组对象

    • /^[+-]?(\d|[1-9]d+))(.\d+)?$/ 正则对象

    • Math数学函数对象

    • 日期对象

    • ....

    • 函数数据类型 function

从数字类型开始:number型包含了:

        1.常规数字

        2.NaN(Not a Number)

NaN是特殊的数字类型,NaN意思是 not a number ,因此,NaN可以为不是数字的任何数,所以NaN和任何值(包括自己)都不相等

console.log(NaN == NaN) 			//false
//isNaN([val]):检测一个数值是否为 **非有效** 数字,如果不是有效数字返回True 否则返回False
console.log(isNaN(10)) 				//false
console.log(isNaN('AA'))			//true

但是在使用isNaN检测的时候,首先会先验证检测的值是否为数字类型,如果不是 会先基于Number([val])将val转换为数字类型再做检测 

console.lof(isNaN('10'))			//false

//isNaN的底层机制:

	isNaN('10'){
		Number('10') //=>10
		isNaN(10)		//=>false
	}

 因此,不能用isNaN([val])验证数字是否为数字类型!!!

如何将其他类型的值转换为数字类型?

  1. Number([val])方法:  

    1. 基本对象类型转数字:

      //字符串转数字:字符串中必须全部为有效数字,否则结果都是NaN,空字符串会变成数字0
      console.log(Number("1234"))                //1234
      console.log(Number("1024happy"))           //NaN
      console.log(Number(""))                    //0
      
      //布尔转数字:true 返回1 false 返回0
      console.log(Number(true))                  //1
      console.log(Number(false))                 //0
      
      //空字符转数字: null => 0
      console.log(Number(null))                  //0
      
      //未定义转数字:  undefined => NaN
      console.log(Number(undefined))             //NaN
      
      
    2. 引用对象类型转数字:

      //引用类型转数字类型,会先调用toString()方法,转换为字符型,在调用Number()方法
      //普通对象类型:{}
          let obj1 = {
            name: 1,
            age: 2
          }
          console.log(Number(obj1))                //NaN
      
      //数组对象类型:[]
      
          let obj1 = [123]
          console.log(Number(obj1))                //123
      
          let obj2 = [12,3]     
          console.log(Number(obj2))                //NaN
  2. ParseInt([val]) / ParseFloat([val],[进制]):

    1. 对于字符串:从做到右依次查找有效的数字字符,直到遇到非有效数字字符为止,将找到的数字返回。

      1. 基本数据类型转数字类型:
        
            console.log(parseInt('12.5px')) 		            //12
            console.log(parseFloat('12.5px'))	                //12.5
        
            console.log(parseInt('width:12,5px'))		        //NaN
            console.log(parseFloat('width:12,5px'))		        //NaN
        
            console.log(parseInt(true))						    //NaN
            console.log(parseFloat(true))						//NaN
        
            console.log(parseInt(null))						    //NaN
            console.log(parseFloat(null))						//NaN
        
            console.log(parseInt(undefined))					//NaN
            console.log(parseFloat(undefined))			    	//NaN
      2. 引用对象类型转数字类型:
        //普通对象类型  
          let obj1 = {
              name: 1,
              age: 2
            }
            console.log(parseInt(obj1))                //NaN
            console.log(parseFloat(obj1))              //NaN
        
        //数组对象类型
        
            let obj1 = [123.4, 56]
            console.log(parseInt(obj1))                //123
            console.log(parseFloat(obj1))              //123.4
      3. 因此,在ParseInt()和ParseFloat()方法中,与使用Number()方法在机制上是不一样的, 前者是浏览器的额外方法,而后者是v8引擎的底层机制,Number是将变量先通过toString()方法进行一次字符转换,再来判断这串字符里是否全为有效数字,而ParseInt和ParseFloat则是直接遍历变量中的有效数字,并将其输出,知道遇到非有效数字字符为止 

  3. 双等于号(==):

    1. 在进行比较的时候,可能会把变量转换为数字

      console.log('10' == 10)            //true
       

以上就是将其它类型的值转换为数字型的方法 

你可能感兴趣的:(JS笔记,javascript,前端,开发语言)