本文简单说明 JavaScript 中常见的进制转换函数以及浮点数计算的注意点。

如何把任意进制的数据转换为十进制?

假设我们有二进制数据110,如果要把该数据转换为十进制数据可以参考下面的处理过程。

110  = 1 x 2^(2) + 1 x 2^(1) + 0 x 2^(0)
= 4 + 2 + 0
= 6

在 JavaScript 语言中,我们可以通过 parseInt方法来处理上面的转换。

parseInt(string, radix)函数将字符串转换为指定进制的整数,进制基数取值区间为[2,36]

其中,函数的第一个参数为要被解析的值。如果参数不是一个字符串,那么会调用toString()来转换为字符串,此外字符串开头的空白符将会被忽略。第二个参数radix的取值范围从 2 到 36,代表该进位系统的数字。parseInt函数的返回值为从给定的字符串中解析出的一个整数,如果radix的取值超出[2,36]的范围或者第一个参数为非空格字符不能转换为数字,那么就返回 NaN

console.log(parseInt("110", 2));
/* 计算过程: */
/* 110 = 1 x 2^(2) + 1 x 2^(1) + 0 x 2^(0)
= 4 + 2 + 0
= 6
*/ console.log(parseInt('123', 4));
/* 计算过程 */
/* 123 = 3 x 4^(0) + 2 x 4^(1) + 1 x 4^(2)
= 3 + 8 + 16
= 27
*/ console.log(parseInt('hello', 2)); /* NaN */
console.log(parseInt('', 2)); /* NaN */
ECMAScript 5 规范不再允许 parseInt 函数的实现环境把以0字符开始的字符串作为八进制数值。根据给定的 radix,parseInt函数产生一个由字符串参数内容解析过来的整数值。字符串中开头的空白会被忽略。如果radix没有指定或者为0,参数会被假定以10为基数来解析,如果数值以字符对0x或0X开头,会假定以16为基数来解析。

parseInt函数在具体使用的时候有一些注意点,下面通过代码来简单展示这些注意点。

/* 问题: 为什么得到的结果为1 */
/* 注解:如果 parseInt 遇到的字符不是指定 radix 参数中的数字,
它将忽略该字符以及所有后续字符,并返回到该点为止已解析的整数值。 */
/* 说明:字符串123abc中,从左向右解析,遇到2的时候解析就停止了 */
console.log(parseInt('123abc', 2)); /* 等价于parseInt('1' , 2) ==> 1*/
console.log(parseInt('123abc', 3)); /* 等价于parseInt('12', 3) ==> 5*/ /* 如果没有指定转换的进制那么就默认以10进制的方式来处理 */
console.log(parseInt('123abc')); /* 123 */ /* 如果第一个参数不是字符串那么会默认调用对应的 toString来转换 */
console.log(parseInt(101, 2)); /* 5 */ console.log(parseInt([7, 2, 3]));
/* 分析代码的处理过程 */
/* (1) [7,2,3]非字符串会默认转换为字符串,[7,2,3].toString() => "7,2,3" */
/* (2) parseInt("7,2,3",10) */
/* (3) parseInt("7",10) */
/* (4) 7 */

JavaScript 语言中的数据表示都是浮点型的,我们在进行转换的时候可能还需要考虑到小数的问题,而且 JavaScript 也是一门典型的0.1 + 0.2 !== 0.3的语言,下面简单通过代码来展示下这些问题。

console.log((6.625).toString(2))  /* 110.101 */

/*110.101 =1 x 2^(2) +1 x 2^(1) +0 x 2^(0) +1 x 2^(-1) +0 x 2^(-2) +1 x 2^(-3)*/
/* =4 +2 +0 +0.5 +0 +0.125 */
/* =6.625 */ /* 浮点数字符串转换为二进制数据 */
console.log(parseInt("101.011", 2)) /* 5 说明:小数点后面的数会被截断*/ /* 浮点数 */
let num = 17.235; /* 整数部分:17 小数部分:0.235 */
console.log(num.toString(2));
/* 结果:10001.0011110000101000111101011100001010001111010111 */ /* 二进制表示 */
console.log((0.1).toString(2));
/* 结果:0.0001100110011001100110011001100110011001100110011001101 */
console.log((0.2).toString(2));
/* 结果:0.001100110011001100110011001100110011001100110011001101 */ /* 执行按位相加操作 */
console.log(0.1 + 0.2) /* 0.30000000000000004 */
console.log(0.1 + 0.2 === 0.3) /* false */

前端开发系列122-进阶篇之Floating point addition的更多相关文章

  1. openlayers5-webpack 入门开发系列一初探篇(附源码下载)

    前言 openlayers5-webpack 入门开发系列环境知识点了解: node 安装包下载webpack 打包管理工具需要依赖 node 环境,所以 node 安装包必须安装,上面链接是官网下载 ...

  2. leaflet-webpack 入门开发系列一初探篇(附源码下载)

    前言 leaflet-webpack 入门开发系列环境知识点了解: node 安装包下载webpack 打包管理工具需要依赖 node 环境,所以 node 安装包必须安装,上面链接是官网下载地址 w ...

  3. 【Windows10 IoT开发系列】配置篇

    原文:[Windows10 IoT开发系列]配置篇 Windows10 For IoT是Windows 10家族的一个新星,其针对不同平台拥有不同的版本.而其最重要的一个版本是运行在Raspberry ...

  4. ESP8266开发之旅 进阶篇② 闲聊Arduino IDE For ESP8266烧录配置

    授人以鱼不如授人以渔,目的不是为了教会你具体项目开发,而是学会学习的能力.希望大家分享给你周边需要的朋友或者同学,说不定大神成长之路有博哥的奠基石... QQ技术互动交流群:ESP8266&3 ...

  5. 【webpack 系列】进阶篇

    本文将继续引入更多的 webpack 配置,建议先阅读[webpack 系列]基础篇的内容.如果发现文中有任何错误,请在评论区指正.本文所有代码都可在 github 找到. 打包多页应用 之前我们配置 ...

  6. iOS开发系列--Swift进阶

    概述 上一篇文章<iOS开发系列--Swift语言>中对Swift的语法特点以及它和C.ObjC等其他语言的用法区别进行了介绍.当然,这只是Swift的入门基础,但是仅仅了解这些对于使用S ...

  7. 旨在脱离后端环境的前端开发套件 - IDT Server篇

    IDT,一个基于Nodejs的,旨在脱离后端环境的前端开发套件,目的就是能让前端开发完全脱离后端的环境,无论后端是什么模板引擎(主流),都能应付自如. IDT主要包括两大部分:Server + Bui ...

  8. 前端开发【第2篇:CSS】

    鸡血 样式的属性多达几千个,但别担心,按照80-20原则,常用的也就几十个,你完全可以掌握它. Css初识 HTML的诞生 早期只有HTML的时候为了让HTML更美观一点,当时页面的开发者会把颜色写到 ...

  9. [置顶]【实用 .NET Core开发系列】- 导航篇

    前言 此系列从出发点来看,是 上个系列的续篇, 上个系列因为后面工作的原因,后面几篇没有写完,后来.NET Core出来之后,注意力就转移到了.NET Core上,所以再也就没有继续下去,此是原因之一 ...

  10. openlayers4 入门开发系列之风场图篇

    前言 openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子 ...

随机推荐

  1. FastMCP实践开发应用

    一.概述 FastMCP是一个基于Python的高级框架,用于构建MCP(Model Context Protocol)服务器.它能够帮助开发者以最小的代码量创建MCP服务器,从而让AI助手能够更好地 ...

  2. 适合Java程序员的Go入门笔记

    0.背景 3年java开发背景(因此这篇文章的特点是:比较适合java程序员doge),业余时间有了解过一些go,如今加入字节团队主要技术栈是go,此篇主要结合go语言圣经和团队内go项目,总结一些基 ...

  3. RK356X网口限速

    1. 参考资料 Linux 上的虚拟网络接口,主要要了解一下 IFB,对输入的流量进行整形 https://lyyao09.github.io/2020/06/13/linux/An-introduc ...

  4. SpringBoot——SSM简单整合v0.1

    学习SpringBoot初次整合SSM,后续需要不断优化 参考SpringBoot3教程[1] 导入依赖 pom.xml <?xml version="1.0" encodi ...

  5. mysql8.0.12+hibernate5.4.1 的一些配置

    目录 整体目录结构 第一步 创建数据库 第二步 创建java项目,导入相应的jar包 第三步 创建数据库对应的java类 第四步 创建hibernate映射文件 第五步 创建hibernate核心配置 ...

  6. Java 集合删除重复元素、删除指定元素

    目录 List删除指定元素 List删除指定元素 ArrayList的删除元素方法public boolean remove(Object o)只能删除第一次出现的情况,如果想要删除集合中全部位置出现 ...

  7. K8s新手系列之初始Deployment资源

    概述 官网:https://kubernetes.io/zh-cn/docs/concepts/workloads/controllers/deployment/ Deployment简称deploy ...

  8. Excel工具类之“参数汇总”

    一.SXSSFWorkbook技术 1.冻结行数 代码 SXSSFWorkbook wb = new SXSSFWorkbook(); SXSSFSheet sheet = wb.createShee ...

  9. 剪枝在pytorch中是如何实现的?

    Pytorch中剪枝源码可参考: https://github.com/pytorch/pytorch/blob/master/torch/nn/utils/prune.py 可参考: pytorch ...

  10. VS2019 配置libzmq-4.3.1

    1.下载libzmq-4.3.1 https://github.com/zeromq/libzmq/tags 2.解压并查看 3.编译 使用vs2019对其进行编译,点击libzmq.sln进入工程环 ...