IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> JS-数据类型(Number)转换详解 -> 正文阅读

[JavaScript知识库]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
      ?

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

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2021-10-24 14:50:47  更:2021-10-24 14:52:51 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年5日历 -2024/5/14 3:06:12-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码