如何在JavaScript中将十进制转换为十六进制?


对于任何使用低级语言或汇编语言工作的计算机程序员来说,将十进制转换为十六进制或十六进制是一个基本任务。在Web开发中,我们使用颜色,并且为了表示它们,使用十六进制颜色代码是一种常见的做法。在Javascript中,由于ECMA提供的内置函数和方法,将十进制转换为十六进制非常容易。在本文中,我们将讨论使用适当示例在javascript中将十进制转换为十六进制的多种方法。

  • 使用toString()方法

  • 使用自定义函数

使用toString()方法

顾名思义,toString()方法用于将数字转换为字符串,javascript中的每个对象都有toString()方法。此方法将基数作为参数(可选)。

语法

Number.toString( Radix ) 

这里的基数在2到36之间。其中,2进制表示二进制,8进制表示八进制,16进制表示十六进制。

返回值

此方法返回作为提供的基数值的数字的字符串。

要将十进制转换为十六进制,我们需要以下步骤:

  • 将toString()方法应用于数字。

  • 将16作为toString方法的参数传递。

示例

在这个例子中,我们使用toString方法将十进制转换为十六进制。

<html>
<body>
   <h2>Convert decimal to hex using toString() method</h2>
   <p id="input"> Decimal: </p>
   <p id="output"> Hex: </p>
   <script>
      let num = 146541;
      document.getElementById("input").innerText += num;
      let hex = "";
      hex = num.toString(16).toUpperCase();      
      // Print the values
      document.getElementById("output").innerText += hex ;
   </script>
</body>
</html>

使用自定义逻辑

虽然javascript提供了将十进制转换为十六进制的内置方法,但我们也可以实现自定义逻辑来将十进制转换为十六进制。以下是步骤:

  • 创建一个包含所有十六进制字符的变量,即“0123456789ABCDEF”。

  • 运行循环,直到十进制数大于0。

  • 在每次迭代中,通过将其除以16来获得十进制数的余数。

  • 并获取余数位置的十六进制字符的字符,这就是你如何获得相应的十六进制字符。

  • 连接所有这些十六进制字符。

  • 最后,在每次迭代中将十进制数除以16。

示例

在这个例子中,我们通过创建一个自定义函数来将十进制转换为十六进制。

<html>
<body>
   <h2>Convert decimal to hex using custom logic</h2>
   <p id="input"> Decimal: </p>
   <p id="output"> Hex: </p>
   <script>
      // Define the decimal number to be converted
      let num = 116565;
      document.getElementById("input").innerText += num;
      
      // Define the hexadecimal characters used for mapping
      let hexChars = "0123456789ABCDEF";
      
      // Define variables for the result and the original number
      let result = "";
      let temp = num;
      
      // Convert the decimal number to a hexadecimal string
      while (num > 0) {
         let remainder = num % 16;
         result = hexChars[remainder] + result;
         num = Math.floor(num / 16);
      }
      document.getElementById("output").innerText += result ;
   </script>
</body>
</html>

更新于:2023年4月21日

1K+ 次浏览

启动你的职业生涯

通过完成课程获得认证

开始学习
广告
© . All rights reserved.