JS-Number数字类型详解

一、前言

与其他语言不同,在JS中不区分整数与浮点数,统一为浮点数。所有数字类型统一都是基于 IEEE 754 标准来实现;采用的是“双精度”格式(即 64 位二进制)。这也意味着在小数计算时,会发生精度误差的情况(这并不是js独有的,其他基于IEEE 754标准的都会有这样的问题)。

二、属性方法

2.1 定义数字类型

JS中的数字常量一般用十进制表示。例如:

const a = 42;
const b = 42.3;

数字前后的 0 可以省略:(不建议,请规范写法)

const a = 0.42;
const b = .42;
const c = 42.0;
const d = 42.;

数字常量还可以用其他格式来表示,八进制和十六进制;如果前缀为 0,则 JavaScript 会把数值常量解释为八进制数,如果前缀为 0 和 “x”,则解释为十六进制数。例如:

const a = 070;
const b = 0xFF;

2.2 特殊的数值

2.2.1 最大值:Number.MAX_SAFE_INTEGER

最大整数是 2^53 - 1,即 9007199254740991,在 ES6 中被定义为Number.MAX_SAFE_INTEGER。

2.2.2 最小值:Number.MIN_SAFE_INTEGER

最小整数是 -9007199254740991,在 ES6 中被定义为 Number.MIN_SAFE_INTEGER。

2.2.3 无穷数

在进行运算时,可能都遇到过编译错误或者运行时错误,例如“除以 0”。这个时候不会得到无穷数,正无穷Infinity(Number.POSITIVE_INFINITY)与负无穷-Infinity(Number.NEGATIVE_INFINITY)。

2.2.4 不是数字的数字:NaN

如果数学运算的操作数不是数字类型(或者无法解析为常规的十进制或十六进制数字),就无法返回一个有效的数字,这种情况下返回值为 NaN。可以通过Number.isNaN(值)判断。

const a = 2 / "测试"; // NaN
a == NaN; // false
a === NaN; // false
Number.isNaN(a); // true

注意:在运算的时候要注意避免得到NaN,防止程序出现错误;

2.2.5 零值

JavaScript 有一个常规的 0(也叫作+0)和一个 -0。-0 除了可以用作常量以外,也可以是某些数学运算的返回值。

const a = 0 / -2; // -0
const b = 0 * -2; // -0
//  但是规范定义的返回结果是这样
a.toString(); // "0"
a + ""; // "0"
String( a ); // "0"
// 但是-0字符串翻过来就是对的
+"-0"; // -0
Number( "-0" ); // -0
JSON.parse( "-0" ); // -0
// 0与-0比较都为true
-0 == 0; // true
-0 === 0; // true

注意:需要注意正负0的比较,使用-0场景例如动画帧的移动速度等。

2.3 数字的方法

  1. toSting:以字符串返回数值
  2. toFixed:返回字符串值,它包含了指定位数小数的数字(会四舍五入)
  3. toPrecision: 返回字符串值,它包含了指定长度的数字
const a = 22;
a.toString(); // '22'
a.toFixed(3); // '22.000'
const b = 2.222;
b.toPrecision(2); // '2.2'
b.toPrecision(3); // '2.22'

2.4 变量转换为数字

  1. Number:将变量转换为数字
  2. parseInt:返回数字的整数部分
  3. parseFloat:返回一个浮点数
Number('22.2'); // 22.2
parseInt('22.2'); // 22
parseFloat('22.2'); // 22.2
Number('测试'); // NaN
parseInt('测试'); // NaN
parseFloat('测试'); // NaN

注意:上述三个方法转换时,如果转换失败会返回NaN,开发中要注意避免。

三、实战示例

3.1 浮点数计算出现精度缺失

3.1.1 发现问题

在日常项目中会遇到小数之间的算术运算,例如商品价格的计算、账户金额的统计;涉及的小数时有时候会出现精度误差计算结果不准确,导致客户反馈bug。

示例:

console.log(0.1 + 0.2); // 0.30000000000000004
3.1.2 问题原因

我们在上面有介绍过在JS中所有数字都是以IEEE-754标准格式64位浮点数形式储存,1与1.0是相同的。因为有些小数以二进制表示位数是无穷的。JavaScript会把超出53位之后的二进制舍弃。所以并不是JS中才会出现,所有基于IEEE-754标准的浮点数计算都会有这样的问题。

3.1.3 解决方案

使用第三方类库

如果在项目中多处都需要使用浮点数计算,这个时候就需要考虑引用第三方类库方法来进行小数点之间的计算。这里推荐第三方类库:

  1. Math.js
  2. decimal.js
  3. big.js

简易封装

如果只是单纯处理个别计算问题时,可以使用下面简易封装的简易加法运算。核心思路就是:计算小数点后最大有几位,转换成10的指数幂进行计算,最后还原。

/*** 精度相加*/
const addTogether = (n1, n2) => {let res1 = n1.toString().split(".")[1]? n1.toString().split(".")[1].length: n1.toString().split(".")[0].length;let res2 = n2.toString().split(".")[1]? n2.toString().split(".")[1].length: n2.toString().split(".")[0].length;let pow = Math.max(res1, res2);let base = Math.pow(10, pow);return (n1 * base + n2 * base) / base;
};

3.2 计算出现NaN

3.2.1 发现问题

在项目中设计到表单输入时,有时候会进行两个变量之间的计算,有时候展示结果会出现NaN的情况。

3.2.2 问题原因

在进行算术运算时,会将变量类型隐式转换为数字类型;如果转换原类型不是字符串的数字时无法转换为数字,就会返回NaN

3.2.3 解决方案

涉及到表单问题时要设置输入框为number类型,在计算之前需要提前转换为Number类型,如果转换为NAN要及时报错或者根据业务需求兼容处理。

const num = "测试";
const curNum = Number.isNaN(Number(num)) ? 0 : Number(num);

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/144171.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Redis 配置文件信息中文翻译版

前言 Redis 配置文件信息中文翻译版,方便大家阅读和理解对应参数信息及配置参数信息 # Redis configuration file example# Note on units: when memory size is needed, it is possible to specify # it in the usual form of 1k 5GB 4M and so forth: # 注意:当…

信息检索与数据挖掘 | 【实验】检索评价指标MAP、MRR、NDCG

文章目录 📚实验内容📚知识梳理📚实验步骤🐇前情提要🐇MAP评价指标函数🐇MRR 评价指标函数🐇NDCG评价指标函数🐇调试结果 📚实验内容 实现以下指标评价,并对…

【ICE】webrtc lite 1:cmake构建

p2ptransportchannel 是 ICE 实现基于此实现了DTLTransport而前者是独立的模块。依赖库较少主要是ssl absl OpenSSL Protobuf 可选 absl webrtc 不支持大端 :big endian architectures defined in WebRTC’s arch.h D_WINSOCKAPI_ 用来做啥? 以下编译选项: add_compile_opti…

锐捷EG易网关login.php以及其后台cli.php/branch_passw.php RCE漏洞复现 [附POC]

文章目录 锐捷EG易网关login.php以及其后台cli.php/branch_passw.php远程代码执行漏洞复现 [附POC]0x01 前言0x02 漏洞描述0x03 影响版本0x04 漏洞环境0x05 漏洞复现1.访问漏洞环境2.构造POC3.复现 锐捷EG易网关login.php以及其后台cli.php/branch_passw.php远程代码执行漏洞复…

【Java 进阶篇】JQuery 案例:下拉列表选中条目左右移动,打破选择的边界

在前端的舞台上,下拉列表是常见的用户交互元素,但有时候我们想要更多的交互体验。通过巧妙运用 JQuery,我们可以实现下拉列表中选中条目的左右移动功能,为用户提供更加灵活的选择方式。本篇博客将深入研究 JQuery 中实现这一功能的…

分享一套 MT4 crm MT4 MT5 CRM源码、web trade交易系统

一套MT4 MT5 CRM源码,有跟单社区,同时支持MT4进行对接使用,支持代理返佣自由进行设置,可自动实时同步manager后台分组、交易品种和客户所有信息。包括带有内部实时内转功能,支持任何第三方支付、区块链和电子钱包。 整…

操作系统(二 )| 进程控制 进程状态 进程描述 进程控制 进程同步互斥

文章目录 1 进程和程序区别2 进程状态2.1 进程的5种基本状态2.2 进程状态之间转换2.3 七状态模型 3 进程描述3.1 进程控制块 PCB3.2 进程块组织方式 4 进程控制5 进程同步 互斥5.1 区分进程互斥和同步5.2 核心方案5.3 其他方案方案1 设置锁变量方案2 严格轮转法方案3 Peterson解…

vue自定义指令使用

实现 注册一个自定义指令有全局注册与局部注册 全局注册主要是通过Vue.directive方法进行注册 Vue.directive第一个参数是指令的名字(不需要写上v-前缀),第二个参数可以是对象数据,也可以是一个指令函数 // 注册一个全局自定义指…

post 和get参数 请求

json参数 post请求格式 RestController public class HelloController { //json参数 post 请求RequestMapping("/jsonParam")public String jsonParam(RequestBody User user){System.out.println(user);return "OK";} } postman 接口测试工具…

服务器数据恢复—服务器发生故障导致数据丢失如何恢复服务器数据?

服务器常见故障: 硬件故障:磁盘、板卡、电源故障等。 软件故障:操作系统崩溃、程序运行错误等。 入侵破坏:加密、删除服务数据等。 不可控力:浸水、火烧、倒塌等。 误操作:格式化、删除、覆盖等。 如何减少…

v-charts使用心得

前端er经常都会遇到使用echarts的时候,特别是弄后台管理的报表等地方,而v-charts是echarts的vue版本(饿了么写的),基本上能应付普通的图表 v-charts渲染的标题过于简单,有时候跟设计稿的很不一样,需要自己用样式重新写…

UE4基础必学系列:数据驱动

初级: Gameplay数据 C++ 类:原生类构造函数设置默认值并支持数据继承。数据也可以硬编码到函数局部变量中,但很难跟踪。配置文件:Ini文件和控制台变量支持覆盖在C++构造函数中声明的数据,也可以直接查询。蓝图类:蓝图类默认值与C++类构造函数的作用相同,支持数据继承。…

pm2修改环境并重启

NODE_ENVpreproduction pm2 restart /data/srv/dist/src/main.js main --update-env NODE_ENVproduction pm2 restart /data/srv/dist/src/main.js main --update-env

edge/chrome浏览器favicon.ico缓存问题

解决办法来源于How do I force a favicon refresh? - Stack Overflow <head><link rel"icon" href"favcion.ico" type"image/x-icon"></link> </head> 遇到的问题&#xff1a; 第一次设置了faccion.ico 后 再一次修…

从零搭建微服务架构:Spring Boot与Nacos完美整合

&#x1f38f;&#xff1a;你只管努力&#xff0c;剩下的交给时间 &#x1f3e0; &#xff1a;小破站 从零搭建微服务架构&#xff1a;Spring Boot与Nacos完美整合 前言第一&#xff1a;服务注册与发现第二&#xff1a;配置中心第三&#xff1a;报错问题解决第四&#xff1a;什…

【C++】入门一

从这篇博客开始&#xff0c;我们就要进入C的大门了&#xff0c;C看这名字就是对于C语言的补充和升级&#xff0c;所以我们在C的编译器上时可以执行C语言的 话不多说&#xff0c;我们先来打印一个hello world #include<iostream> using namespace std; int main() {cout …

继承、多态

复习 需求&#xff1a; 编写一个抽象类&#xff1a;职员Employee,其中定义showSalary(int s)抽象方法&#xff1b;编写Employee的子类&#xff0c;分别是销售员Sales和经理Manager,分别在子类中实现对父类抽象方法的重写&#xff0c;并编写测试类Test查看输出结果 package cn.…

某头部通信企业:SDLC+模糊测试,保障数实融合安全发展

某头部通信企业是全球领先的综合通信信息解决方案提供商&#xff0c;为全球电信运营商、政企客户和消费者提供创新的技术与产品解决方案。该企业持续关注核心技术攻关&#xff0c;深入打造系列化标杆项目和价值场景&#xff0c;加强数字化平台的推广应用&#xff0c;加快共建开…

uniapp系列

MQTT&#xff1a; 1、报错&#xff1a;TypeError: WebSocket is not a constructor 背景&#xff1a;最近使用MQTT协议传递消息&#xff0c;集成在uniapp上&#xff0c;出现此问题 解决&#xff1a;app端需要用"wx://"&#xff08;安全协议用"wxs://"&a…

【机器学习基础】多元线性回归(适合初学者的保姆级文章)

&#x1f680;个人主页&#xff1a;为梦而生~ 关注我一起学习吧&#xff01; &#x1f4a1;专栏&#xff1a;机器学习 欢迎订阅&#xff01;后面的内容会越来越有意思~ &#x1f4a1;往期推荐&#xff1a; 【机器学习基础】机器学习入门&#xff08;1&#xff09; 【机器学习基…