电脑知识|欧美黑人一区二区三区|软件|欧美黑人一级爽快片淫片高清|系统|欧美黑人狂野猛交老妇|数据库|服务器|编程开发|网络运营|知识问答|技术教程文章 - 好吧啦网

您的位置:首頁技術文章
文章詳情頁

一文帶你搞懂JavaScript中的進制與進制轉換

瀏覽:118日期:2022-06-01 10:02:11
目錄
  • 進制介紹
  • 進制轉換
    • parseInt(str, radix)
    • Number()
    • +(一元運算符)
    • Number.prototype.toString(radix)
  • 自定義轉換
    • 十進制與十六進制轉換
    • 十進制和二進制轉換

進制介紹

JavaScript 中提供的進制表示方法有四種:十進制、二進制、十六進制、八進制。

對于數值字面量,主要使用不同的前綴來區分:

  • 十進制(Decimal):取值數字 0-9;不用前綴。
  • 二進制(Binary):取值數字 01 ;前綴 0b0B
  • 十六進制(Hexadecimal):取值數字 0-9a-f ;前綴 0x0X
  • 八進制(Octal):取值數字 0-7 ;前綴 0o0O (ES6規定)。

需要注意的是,非嚴格模式下瀏覽器支持:如果有前綴0并且后面只用到 0-7 八個數字的數值時,該數值視為八進制;但如果前綴0后面跟隨的數字中有 8或者9,則視為十進制。

嚴格模式下,如果數字加前綴0,則報錯:Uncaught SyntaxError: Decimals with leading zeros are not allowed in strict mode。

各進制的數值,如果取值數字超過給定的范圍,則會報錯:Uncaught SyntaxError: Invalid or unexpected token。

在JavaScript內部的默認情況下,二進制、十六進制、八進制字面量數值,都會自動轉為十進制進行運算。

0x22 // 34
0b111 // 7
0o33 // 27
0x22 + 0b111 // 41
0o33 + 12 // 39
(0x33).toString() // 51
(0x33).valueOf() // 51

除了十進制是Javascript默認的數字進制以外,其他三種進制方式平時使用較少,主要在處理Blob數據、字節編碼或者位運算、轉義字符等等時候才會碰到。

進制轉換

下文將主要討論進制轉換時的問題。

JavaScript 提供了原生函數,進行十進制與其他各進制之間的相互轉換。

其中,從其他進制轉換成十進制,有三種方式:parseInt()Number()+(一元運算符)。這三種方式都只能轉換整數。

從十進制轉換成其他進制,可以使用 Number.prototype.toString()。支持小數。

parseInt(str, radix)

第一個參數是需要解析的字符串;其他進制不加前綴。

第二個參數是一個進制基數,表示轉換時按什么進制來理解這個字符串,默認值10,表示轉十進制。

第二個參數如果非數字,則自動轉數字,如無法轉稱數字則忽略該參數;是數字時,必須是 2-36 的整數,超出該范圍,返回 NaN

parseInt("1111", 2) // 15
parseInt("1234", 8) // 668
parseInt("18af", 16) // 6319
parseInt("1111") // 1111

如果不傳入第二參數,則 parseInt 會默認使用十進制來解析字符串;但是,如果字符串以 0x 開頭,會被認為是十六進制數。

而其他進制的字符串,0o21(八進制)0b11(二進制) 不會以該進制基數自動轉換,而是得到 0

所以,在使用 parseInt 進行進制轉換時,為了保證運行結果的正確性和穩定性,第二個參數不能省略

parseInt("0x21") // 33
parseInt("0o21") // 0
parseInt("0b11") // 0
parseInt("111", "add") // 111
parseInt("111", "787") // NaN

如果需要解析的字符串中存在對于當前進制基數無效的字符,則會從最高位取有效字符進行轉換,沒有效字符則返回NaN

parseInt("88kk", 16) // 136,=== 0x88
parseInt("kk", 16) // NaN

Number()

可以把字符串轉為數字,支持其他進制的字符串,默認轉成十進制數字。

字符串中如果存在無效的進制字符時,返回 NaN

記住,需要使用進制前綴,0b0o0x

Number("0b11100") // 28
Number("0o33") // 27
Number("0x33") //51

Number("0x88kk") // NaN

+(一元運算符)

Number() 一樣,可以把字符串轉為數字,支持其他進制的字符串,默認轉成十進制數字。

字符串中如果存在無效的進制字符時,返回 NaN

也需要使用進制前綴。

+"0b11100" // 28
+"0o33" // 27
+"0x33" //51

+"0x88kk" // NaN

可以看到,基本和 Number() 是一樣的,也在本質上是對數字的一種轉換處理。

Number.prototype.toString(radix)

它支持傳入一個進制基數,用于將數字轉換成對應進制的字符串,它支持轉換小數

未指定默認值為 10,基數參數的范圍 2-36,超過范圍,報錯:RangeError。

15..toString(2) // 1111
585..toString(8) // 1111
4369..toString(16) // 1111
(11.25).toString(2) // 1011.01

自定義轉換

除了這些原生函數以外,也可以自己實現進制數字之間的轉換函數。

根據相應的規則,就可以實現十進制與二進制、十六進制之間的轉換的一些方法。

十進制與十六進制轉換

以下代碼是針對整數在十進制與十六進制之間的轉換,根據基本規則進行換算。

十六進制是以 0-9a-f 進行描述數字的一種方式,其中 0-9 取本身數字的值,而 a-f 則取 10-15 的值。

且字母不區分大小寫。

function int2Hex (num = 0) {
  if (num === 0) {
    return "0"
  }
  const HEXS = "0123456789abcdef"
  let hex
  while (num) {
    hex = HEXS.charAt(num % 16) + hex
    num = Math.floor(num / 16)
  }
  return hex
}
function hex2Int (hex = "") {
  if (typeof hex !== "string" || hex === "") {
    return NaN
  }
  const hexs = [...hex.toLowerCase()]
  let resInt = 0
  for (let i = 0; i < hexs.length; i++) {
    const hv = hexs[i]
    let num = hv.charCodeAt() < 58 ? +hv : ((code - 97) + 10)
    resInt = resInt * 16 + num
  }
  return resInt
}

如果要轉換八進制,實際上與十六進制很類似,只需根據八進制的數值范圍進行部分改動即可。

八進制一般使用非常少,不單獨列出。

下面將重點介紹二進制轉換的相關知識,包括小數的二進制表示與轉換。

十進制和二進制轉換

在十進制與二進制的轉換中,我們將考慮小數,理解小數是如何在這兩者之間進行轉換。

先選定一個數字,比如:11.125 ,我們看下該數字在二進制里的表示:

(11.125).toString(2) // 1011.001

可以看到,11.125 的二進制表示為:1011.001。下面將以這個數字為例進行轉換操作。

十進制數字轉換成二進制

首先需要了解的是,二進制小數的表示方法是如何得來的:

整數 部分,用二進制表示可以如此計算,數字 11

11 / 2 ———— 1
5 / 2 ———— 1
2 / 2 ———— 0
1 / 2 ———— 1

整數部分的規則,得到的結果是 從下往上,倒著排 1011 就是二進制的 11

小數 用二進制表示可以如此計算,小數 0.125

0.125 × 2 = 0.25 ———— 0
0.25 × 2 = 0.5 ———— 0
0.5 × 2 = 1 ———— 1

只有等于1時才結束,如果結果不等于1將會一直循環下去。小數部分的規則,得到的結果是 從上往下,順著排 0.001 就是二進制的 0.125

整數 + 小數,所以 11.125 的二進制表示方式:1011.001

根據以上整數和小數分開計算的規則,就可以得到一個十進制轉二進制的函數,如下:

function c10to2 (num) {
  // 整數
  const numInteger = Math.floor(num)
  // 小數
  const numDecimal = num - numInteger

  let integers = []
  if (numInteger === 0) {
    integers = ["0"]
  } else {
    let integerVal = numInteger
    while(integerVal !== 1) {
      integers.push(integerVal % 2 === 0 ? "0" : "1")
      integerVal = Math.floor(integerVal / 2)
    }
    integers.push("1")
  }
  const resInteger = integers.reverse().join("")

  let decimals = []
  if (numDecimal) {
    let decimalVal = numDecimal
    // 最多取49位的長度
    let count = 49
    while (decimalVal !== 1 && count > 0) {
      decimalVal = decimalVal * 2
      if (decimalVal >= 1) {
decimals.push("1")
if (decimalVal > 1) {
  decimalVal = decimalVal - 1
}
      } else {
decimals.push("0")
      }
      count--
    }
  }
  const resDecimal = decimals.join("")

  return resInteger + (resDecimal ? ("." + resDecimal) : "")
}

小數在轉換成二進制時,會存在無限循環的問題,上面的代碼里截取了前49個值。

所以,這里就會引出了一個問題,就是常見的一個數字精度問題:0.1 + 0.2 != 0.3

0.1+ 0.2 != 0.3

直接看一下 0.1 轉二進制:

0.1 × 2 = 0.2
0.2 × 2 = 0.4
0.4 × 2 = 0.8
0.8 × 2 = 1.6
0.6 × 2 = 1.2
0.2 × 2 = 0.4 // 循環開始
0.4 × 2 = 0.8
0.8 × 2 = 1.6
0.6 × 2 = 1.2
...
...

無限循環

0.2 轉二進制:

0.2 × 2 = 0.4
0.4 × 2 = 0.8
0.8 × 2 = 1.6
0.6 × 2 = 1.2
0.2 × 2 = 0.4 // 循環開始
0.4 × 2 = 0.8
0.8 × 2 = 1.6
0.6 × 2 = 1.2
...
... 無限循環

因為無法得到1,可以發現有限十進制小數, 0.1 轉換成了無限二進制小數 0.00011001100...0.2 轉成了 0.001100110011...

由于無限循環,必然會導致精度丟失,正好 0.1 + 0.2 計算得到的數字在丟失精度后的最后一位不為0,所以導致結果為:0.30000000000000004

如果截取精度后最后一位為0,那自然就不存在結果不相等的情況,如 0.1 + 0.6 === 0.7,事實上,0.1和0.6轉二進制后都會丟失精度,但截取到的數值都是0,所以相等。

同樣不相等的還設有 0.1 + 0.7 !== 0.8等等。

所以是計算時轉二進制的精度丟失,才導致的 0.1 + 0.2 !== 0.3

在 JavaScript 中所有數值都以 IEEE-754 標準的 64 bit 雙精度浮點數進行存儲的。 IEEE 754 標準的 64 位雙精度浮點數的小數部分最多支持53位二進制位。 因浮點數小數位的限制而需要先截斷二進制數字,再轉換為十進制,所以在進行算術計算時會產生誤差。

這里能看到,如果十進制小數要被轉化為有限二進制小數,那么它計算后的小數第一位數必然要是 5 結尾才行(因為只有 0.5 × 2 才能變為整數)。

二進制數字轉換成十進制

方法是:將二進制分成整數和小數兩部分,分別進行轉換,然后再組合成結果的十進制數值。

整數部分:這里直接使用 parseInt 函數,parseInt('1011', 2) => 11

小數部分:如 1011.001 的小數位 001,使用下表的計算方式。

小數部分001基數的位數次冪2^-12^-22^-3每位與基數乘積0 × (2^-1)0 × (2^-2)1×(2^-3)每位乘積結果000.125

最后的結果是每位乘積結果相加:0 + 0 + 0.125 = 0.125

整數與小數合起來,就得到了 1011.001 的十進制數字:11.125

根據規則,代碼實現如下所示:

function c2To10 (binaryStr = "") {
  if (typeof binaryStr !== "string" || binaryStr === "") {
    return NaN
  }
  const [ binIntStr, binDecStr ] = binaryStr.split(".")
  let binDecimal = 0
  if (binDecStr) {
    binDecimal = [...binDecStr].reduce((res, val, index) => {
      res += Number(val) * (2 ** (-(index + 1)))
      return res
    }, 0)
  }
  return parseInt(binIntStr, 2) + binDecimal
}

到此這篇關于一文帶你搞懂JavaScript中的進制與進制轉換的文章就介紹到這了,更多相關JavaScript進制轉換內容請搜索以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持!

標簽: JavaScript
主站蜘蛛池模板: 深圳法律咨询【24小时在线】深圳律师咨询免费 | 潍坊大集网-潍坊信息港-潍坊信息网| 捆扎机_气动捆扎机_钢带捆扎机-沈阳海鹞气动钢带捆扎机公司 | 网站seo优化_seo云优化_搜索引擎seo_启新网络服务中心 | 烘干设备-热泵烘干机_广东雄贵能源设备有限公司 | 拉卡拉POS机官网 - 官方直营POS机办理|在线免费领取 | 连续油炸机,全自动油炸机,花生米油炸机-烟台茂源食品机械制造有限公司 | 无缝钢管-聊城无缝钢管-小口径无缝钢管-大口径无缝钢管 - 聊城宽达钢管有限公司 | 棕刚玉_白刚玉_铝酸钙-锐石新材料 | WF2户外三防照明配电箱-BXD8050防爆防腐配电箱-浙江沃川防爆电气有限公司 | 塑料撕碎机_编织袋撕碎机_废纸撕碎机_生活垃圾撕碎机_废铁破碎机_河南鑫世昌机械制造有限公司 | 箱式破碎机_移动方箱式破碎机/价格/厂家_【华盛铭重工】 | 炉门刀边腹板,焦化设备配件,焦化焦炉设备_沧州瑞创机械制造有限公司 | 蜘蛛车-高空作业平台-升降机-高空作业车租赁-臂式伸缩臂叉装车-登高车出租厂家 - 普雷斯特机械设备(北京)有限公司 | 袋式过滤器,自清洗过滤器,保安过滤器,篮式过滤器,气体过滤器,全自动过滤器,反冲洗过滤器,管道过滤器,无锡驰业环保科技有限公司 | 空调风机,低噪声离心式通风机,不锈钢防爆风机,前倾皮带传动风机,后倾空调风机-山东捷风风机有限公司 | 仿清水混凝土_清水混凝土装修_施工_修饰_保护剂_修补_清水混凝土修复-德州忠岭建筑装饰工程 | 万博士范文网-您身边的范文参考网站Vanbs.com | 环境模拟实验室_液体-气体控温机_气体控温箱_无锡双润冷却科技有限公司 | DAIKIN电磁阀-意大利ATOS电磁阀-上海乾拓贸易有限公司 | 阜阳在线-阜阳综合门户 | 数码管_LED贴片灯_LED数码管厂家-无锡市冠卓电子科技有限公司 | 无机纤维喷涂棉-喷涂棉施工工程-山东华泉建筑工程有限公司▲ | 金属切削液-脱水防锈油-电火花机油-抗磨液压油-深圳市雨辰宏业科技发展有限公司 | 【直乐】河北石家庄脊柱侧弯医院_治疗椎间盘突出哪家医院好_骨科脊柱外科专业医院_治疗抽动症/关节病骨伤权威医院|排行-直乐矫形中医医院 | 中空玻璃生产线,玻璃加工设备,全自动封胶线,铝条折弯机,双组份打胶机,丁基胶/卧式/立式全自动涂布机,玻璃设备-山东昌盛数控设备有限公司 | 印刷人才网 印刷、包装、造纸,中国80%的印刷企业人才招聘选印刷人才网! | 天津中都白癜风医院_天津白癜风医院_天津治疗白癜风 | 济南玻璃安装_济南玻璃门_济南感应门_济南玻璃隔断_济南玻璃门维修_济南镜片安装_济南肯德基门_济南高隔间-济南凯轩鹏宇玻璃有限公司 | 菏泽知彼网络科技有限公司 | 铝箔袋,铝箔袋厂家,东莞铝箔袋,防静电铝箔袋,防静电屏蔽袋,防静电真空袋,真空袋-东莞铭晋让您的产品与众不同 | 优宝-汽车润滑脂-轴承润滑脂-高温齿轮润滑油脂厂家 | 3D全息投影_地面互动投影_360度立体投影_水幕灯光秀 | 广东银虎 蜂窝块状沸石分子筛-吸附脱硫分子筛-萍乡市捷龙环保科技有限公司 | 耐压仪-高压耐压仪|徐吉电气 | 伺服电机维修、驱动器维修「安川|三菱|松下」伺服维修公司-深圳华创益 | 信阳市建筑勘察设计研究院有限公司 | 铝单板_铝窗花_铝单板厂家_氟碳包柱铝单板批发价格-佛山科阳金属 | 郑州大巴车出租|中巴车租赁|旅游大巴租车|包车|郑州旅游大巴车租赁有限公司 | 齿轮减速机_齿轮减速电机-VEMT蜗轮蜗杆减速机马达生产厂家瓦玛特传动瑞环机电 | 广州食堂承包_广州团餐配送_广州堂食餐饮服务公司 - 旺记餐饮 | 云阳人才网_云阳招聘网_云阳人才市场_云阳人事人才网_云阳人家招聘网_云阳最新招聘信息 |