如何在JavaScript中将十进制转换为十六进制
数字 toString() 方法
要在 JavaScript 中将十进制转换为十六进制,请对十进制调用 toString() 方法,将 16 作为基数参数传递,即 num.toString(16)。toString() 方法将以十六进制形式返回数字的字符串表示形式。
例如:
const num = 60;
const hex = num.toString(16);
console.log(hex); // 3c
// Use parentheses when calling toString() directly
const hex2 = (60).toString(16);
console.log(hex2); // 3c
Number toString() 方法返回数字的字符串表示形式。如果第一个参数指定了基数,则数字以该基数表示。我们传递 16 以使用基数 16,这是十六进制基数。
十六进制使用 16 个符号来表示数字:
0 到 9 表示值 0 到 9
a 到 f(A 到 F)表示值 10 到 16。字母不区分大小写,因此 3C2b 与 3c2B 的值完全相同。
在数字文字上调用 toString()
如果直接对数字文字调用 toString(),请确保将其括在括号 (( )) 中或使用两个点 (…before toString():
// Use parentheses
const hex2 = (60).toString(16);
console.log(hex2); // 3c
// Use double dots
const hex3 = 50…toString(16);
console.log(hex3); // 32
如果你只使用一个不带括号的点,JavaScript 解析器会将其视为数字文字的一部分——小数点——而不是成员访问运算符。
console.log(40.); // 40
console.log(20.); // 20
所以会出现错误,因为在成员名称之前没有成员访问运算符。
// SyntaxError
console.log(40.toString(16));
// SyntaxError
console.log(20.toString(16));
因此,您将数字括在括号中,以便它们之外的所有内容都被视为与数字分开。
console.log((40).toString(16)); // 28
console.log((20).toString(16)); // 14
或者您添加第二个点,它将被视为成员访问运算符。
console.log(40…toString(16)); // 28
console.log(20…toString(16)); // 14
用例:将 RGB(A) 转换为十六进制
将十进制值转换为十六进制值的一种常见用途是将 RGB 颜色代码转换为其等效的十六进制值。我们可以这样做:
function decToHex(dec) {
return dec.toString(16);
}
function padToTwo(str) {
return str.padStart(2);
}
function rgbToHex(r, g, b) {
const hexR = padToTwo(decToHex®);
const hexG = padToTwo(decToHex(g));
const hexB = padToTwo(decToHex(b));
return #${hexR}${hexG}${hexB}
;
}
console.log(rgbToHex(255, 128, 237)); // #ff80ed
console.log(rgbToHex(195, 151, 151)); // #c39797
console.log(rgbToHex(16, 16, 16)); // #0f0f0f
我们创建了一个可重用的 rgbToHex() 函数来将 RGB 代码转换为其等效的十六进制代码。
我们使用 padToTwo() 函数将十六进制代码填充为两位数,例如 f -> 0f。
在将 R、G 和 B 的十进制值转换为十六进制表示后,我们将它们连接到一个以 # 字符为前缀的字符串中,以形成十六进制颜色代码。
我们可以修改该函数以使其也接受 RGBA 值,其中 A 是用于指定颜色不透明度的百分比值(介于 0 和 1 之间)。A 将是十六进制颜色代码的前两个字符,其值介于 00(0 或 0%)和 ff(255 或 100%)之间.
function decToHex(dec) {
return dec.toString(16);
}
function padToTwo(str) {
return str.padStart(2);
}
function rgbToHex(r, g, b, a) {
const hexR = padToTwo(decToHex®);
const hexG = padToTwo(decToHex(g));
const hexB = padToTwo(decToHex(b));
// Set “a” to 1 if not specified
const aAbsolute = Math.round((a ?? 1) * 255);
const hexA = padToTwo(decToHex(aAbsolute));
return #${hexA}${hexR}${hexG}${hexB}
;
}
console.log(rgbToHex(255, 128, 237)); // #ffff80ed
console.log(rgbToHex(195, 151, 151, 0.5)); // #80c39797
console.log(rgbToHex(16, 16, 16, 0.69)); // #b0101010
相关文章
- js JavaScript vue 时间戳 转换 日期 YYYY-MM-DD hh:mm:ss 简洁写法
- 【说站】javascript首字母大写转换的方法
- javascript html转换成markdown,如何使用Turndown使用JavaScript将HTML转换为Markdown[通俗易懂]
- Javascript-判断是否为数组的5种方法
- JavaScript的书写方式
- JavaScript学习总结(二十)——Javascript非构造函数的继承详解编程语言
- Javascript基础 – js中曾经忽略的知识点详解编程语言
- 谷歌浏览器调试javascript方法详解编程语言
- JavaScript简介
- MySQL与JavaScript结合的强大功能(mysqljs)
- javascript实现unicode和字符的互相转换
- javascript输入框提示列表效果
- javascript日期时间函数(经典+完善+实用)
- Javascript阻止javascript事件冒泡,获取控件ID值
- javascript操作cookie方法函数集合
- 可以用来调试JavaScript错误的解决方案
- JavaScript对象之间的转换jQuery对象和原声DOM
- Javascript异步加载详解(浏览器在javascript的加载方式)
- JavaScript中将一个值转换为字符串的方法分析[译]
- JavaScript转换农历类实现及调用方法
- Javascript的时间戳和php的时间戳转换注意事项
- 深入理解javaScript中的事件驱动
- javaScript面向对象继承方法经典实现
- javascript中简单的进制转换代码实例
- JavaScript打印网页指定区域的例子
- javascript实现十六进制颜色值(HEX)和RGB格式相互转换
- JavaScript中的object转换函数toString()与valueOf()介绍