JavaScript中十进制与十六进制的转换方法

技术背景

在JavaScript开发中，经常会遇到需要将十进制数转换为十六进制数，或者将十六进制数转换回十进制数的情况，比如处理颜色值、位操作等。了解如何进行这些转换是很有必要的。

实现步骤

基本转换

• 十进制转十六进制：可以使用toString(16)方法。

let decimalNumber = 255;
let hexString = decimalNumber.toString(16);
console.log(hexString); // 输出 "ff"

• 十六进制转十进制：使用parseInt()函数。

let hexString = "ff";
let decimalNumber = parseInt(hexString, 16);
console.log(decimalNumber); // 输出 255

处理负数

toString(16)处理负数时会返回负的十六进制数，通常需要将其转换为正数表示。

function decimalToHexString(number) {
    if (number < 0) {
        number = 0xFFFFFFFF + number + 1;
    }
    return number.toString(16).toUpperCase();
}
console.log(decimalToHexString(-1)); // 输出 "FFFFFFFF"

带填充的转换

有时候需要对十六进制结果进行填充，使其达到指定的长度。

function decimalToHex(d, padding) {
    var hex = Number(d).toString(16);
    padding = typeof (padding) === "undefined" || padding === null ? padding = 2 : padding;
    while (hex.length < padding) {
        hex = "0" + hex;
    }
    return hex;
}
console.log(decimalToHex(15, 4)); // 输出 "000f"

RGB值转十六进制

function rgb2hex(r, g, b) {
    if (g !== undefined)
        return Number(0x1000000 + r * 0x10000 + g * 0x100 + b).toString(16).substring(1);
    else
        return Number(0x1000000 + r[0] * 0x10000 + r[1] * 0x100 + r[2]).toString(16).substring(1);
}
console.log(rgb2hex(255, 255, 255)); // 输出 "ffffff"

任意精度转换

可以处理大整数和小数的十进制转十六进制。

function dec2HexArbitrary(decStr, fracDigits = 0) {
    // 辅助函数：任意精度数除以JavaScript数
    function arbDivision(decStr, divisor) {
        let ans = '';
        let idx = 0;
        let temp = +decStr[idx];
        while (temp < divisor) temp = temp * 10 + +decStr[++idx];
        while (decStr.length > idx) {
            ans += (temp / divisor) | 0;
            temp = (temp % divisor) * 10 + +decStr[++idx];
        }
        if (ans.length == 0) return "0";
        return ans;
    }
    // 辅助函数：计算任意精度数的模
    function arbMod(decStr, mod) {
        let res = 0;
        for (let i = 0; i < decStr.length; i++)
            res = (res * 10 + +decStr[i]) % mod;
        return res;
    }
    // 辅助函数：任意精度整数乘以JavaScript数
    function arbMultiply(decStr, mult) {
        let r = '';
        let m = 0;
        for (let i = decStr.length - 1; i >= 0; i--) {
            let n = m + mult * (+decStr[i]);
            r = (i ? n % 10 : n) + r;
            m = n / 10 | 0;
        }
        return r;
    }
    let h = '0123456789abcdef';
    let m = decStr.match(/-?(.*?)\.(.*)?/) || decStr.match(/-?(.*)/);
    let i = m[1].replace(/^0+/, '').replace(/^$/, '0');
    let f = (m[2] || '0').replace(/0+$/, '').replace(/^$/, '0');
    let s = decStr[0] == '-';
    let r = '';
    if (i == '0') r = '0';
    while (i != '0') {
        r = h[arbMod(i, 16)] + r;
        i = arbDivision(i, 16);
    }
    if (fracDigits) r += ".";
    let n = f.length;
    for (let j = 0; j < fracDigits; j++) {
        let k = arbMultiply(f, 16);
        f = k.slice(-n);
        let d = k.slice(0, k.length - n);
        r += d.length ? h[+d] : '0';
    }
    return (s ? '-' : '') + r;
}
console.log(dec2HexArbitrary("123.75", 2)); // 输出 "7b.c"

核心代码

十进制转十六进制（通用）

function decimalToHex(d, padding) {
    var hex = Number(d).toString(16);
    padding = typeof (padding) === "undefined" || padding === null ? padding = 2 : padding;
    while (hex.length < padding) {
        hex = "0" + hex;
    }
    return hex;
}

十六进制转十进制

function hexToDecimal(hex) {
    return parseInt(hex, 16);
}

最佳实践

• 在处理颜色值时，使用RGB值转十六进制的函数可以方便地将RGB颜色转换为十六进制颜色代码。
• 对于大整数的转换，可以使用任意精度转换函数，确保结果的准确性。
• 在处理负数时，要注意将其转换为正数表示的十六进制。

常见问题

• 负数转换问题：toString(16)处理负数时会返回负的十六进制数，需要进行额外处理。
• 填充问题：如果需要固定长度的十六进制字符串，要进行填充操作。
• 大整数问题：JavaScript的Number类型有精度限制，对于大整数需要使用任意精度转换方法。