Як перетворити десятковий у шістнадцятковий у JavaScript

Як ви конвертуєте десяткові значення у їх шістнадцятковий еквівалент у JavaScript?

Перетворити число в шістнадцятковий рядок за допомогою:

hexString = yourNumber.toString(16);

І поверніть процес за допомогою:

yourNumber = parseInt(hexString, 16);

Якщо вам потрібно обробляти такі речі, як бітові поля або 32-бітні кольори, тоді вам потрібно мати справу з підписаними номерами. Функція JavaScript toString(16)поверне від'ємне шістнадцяткове число, яке зазвичай не є тим, що потрібно. Ця функція робить якесь божевільне доповнення, щоб зробити його додатним числом.

function decimalToHexString(number)
{
  if (number < 0)
  {
    number = 0xFFFFFFFF + number + 1;
  }

  return number.toString(16).toUpperCase();
}

console.log(decimalToHexString(27));
console.log(decimalToHexString(48.6));

Код нижче перетворить десяткове значення d у шістнадцяткове. Це також дозволяє додати оббивки до шістнадцяткового результату. Тож 0 стане за умовчанням 0.

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 toHex(d) {
    return  ("0"+(Number(d).toString(16))).slice(-2).toUpperCase()
}

Для повноти, якщо ви хочете, щоб два- шістнадцяткове представлення від'ємного числа, ви можете скористатися оператором зсуву нуля заповнення-право>>> . Наприклад:

> (-1).toString(16)
"-1"

> ((-2)>>>0).toString(16)
"fffffffe"

Однак є одне обмеження: побітові оператори JavaScript трактують свої операнди як послідовність 32 біт , тобто ви отримуєте 32-бітний додаток двох.

З підкладкою:

function dec2hex(i) {
   return (i+0x10000).toString(16).substr(-4).toUpperCase();
}

Без циклу:

function decimalToHex(d) {
  var hex = Number(d).toString(16);
  hex = "000000".substr(0, 6 - hex.length) + hex;
  return hex;
}

// Or "#000000".substr(0, 7 - hex.length) + hex;
// Or whatever
// *Thanks to MSDN

Чи не краще не використовувати циклічні тести, які потрібно оцінити?

Наприклад, замість:

for (var i = 0; i < hex.length; i++){}

мати

for (var i = 0, var j = hex.length; i < j; i++){}

Поєднуючи деякі з цих хороших ідей для функції RGB-значення-шістнадцятковий (додайте #інше для HTML / CSS):

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);
}

Прийнята відповідь не враховувала однозначні повернені шістнадцяткові коди. Це легко регулюється:

function numHex(s)
{
    var a = s.toString(16);
    if ((a.length % 2) > 0) {
        a = "0" + a;
    }
    return a;
}

і

function strHex(s)
{
    var a = "";
    for (var i=0; i<s.length; i++) {
        a = a + numHex(s.charCodeAt(i));
    }

    return a;
}

Я вважаю, що вищезазначені відповіді неодноразово публікувались у тій чи іншій формі. Я загортаю їх у функцію toHex () так:

function toHex(s)
{
    var re = new RegExp(/^\s*(\+|-)?((\d+(\.\d+)?)|(\.\d+))\s*$/);

    if (re.test(s)) {
        return '#' + strHex( s.toString());
    }
    else {
        return 'A' + strHex(s);
    }
}

Зауважте, що числовий регулярний вираз походить від 10+ корисних функцій регулярного вираження JavaScript для підвищення ефективності веб-додатків .

Оновлення: Після тестування цієї речі кілька разів я виявив помилку (подвійні лапки в RegExp), тому я виправив це. ЗАРАЗ! Провівши трохи тестування та прочитавши повідомлення від almaz - я зрозумів, що не можу отримати негативні цифри для роботи.

Далі - я трохи прочитав це питання, і оскільки всі номери JavaScript зберігаються як 64-бітні слова, незалежно від цього - я спробував змінити код numHex, щоб отримати 64-бітове слово. Але виявляється, ви не можете цього зробити. Якщо ви помістите "3.14159265" ЯК НОМЕР у змінну - все, що вам вдасться отримати, - це "3", оскільки дробова частина доступна лише шляхом множення числа на десять (IE: 10.0) кілька разів. Або кажучи про інший спосіб - шістнадцяткове значення 0xF призводить до того, що значення плаваючої точки переводиться на ціле число до того, як воно буде ANDed, що видаляє все, що знаходиться за періодом. Замість того, щоб приймати значення в цілому (тобто: 3.14159265) і ANDing значення плаваючої точки проти значення 0xF.

Тому найкраще в цьому випадку перетворити 3.14159265 в рядок, а потім просто перетворити рядок. Через вищезазначене, це також дозволяє легко перетворити від’ємні числа, оскільки знак мінус просто стає 0x26 на передній частині значення.

Тому я зробив, що визначив, що змінна містить число - просто перетворити її в рядок і перетворити рядок. Це означає для всіх, що на стороні сервера вам потрібно буде зняти вхідний рядок, а потім визначити вхідну інформацію чисельною. Це можна зробити легко, просто додавши "#" на передню частину чисел і "A" на передню частину символьного рядка. Дивіться функцію toHex ().

Веселіться!

Ще через рік і багато роздумів, я вирішив, що функцію "toHex" (а також у мене є функція "fromHex") дійсно потрібно оновити. Ціле запитання було "Як я можу це зробити більш ефективно?" Я вирішив, що шістнадцяткова функція не повинна перейматися, якщо щось є дробовою частиною, але в той же час вона повинна забезпечувати включення дробових частин у рядок.

Тоді тоді стало питання: "Звідки ти знаєш, що ти працюєш із шістнадцятковим рядком?". Відповідь проста. Використовуйте стандартну інформацію про попередні рядки, яка вже визнана в усьому світі.

Іншими словами - використовуйте "0x". Отже, тепер моя функція toHex виглядає, чи є це вже, і якщо вона є - вона просто повертає рядок, який їй було надіслано. В іншому випадку він перетворює рядок, число, що завгодно. Ось переглянута функція toHex:

/////////////////////////////////////////////////////////////////////////////
//  toHex().  Convert an ASCII string to hexadecimal.
/////////////////////////////////////////////////////////////////////////////
toHex(s)
{
    if (s.substr(0,2).toLowerCase() == "0x") {
        return s;
    }

    var l = "0123456789ABCDEF";
    var o = "";

    if (typeof s != "string") {
        s = s.toString();
    }
    for (var i=0; i<s.length; i++) {
        var c = s.charCodeAt(i);

        o = o + l.substr((c>>4),1) + l.substr((c & 0x0f),1);
    }

    return "0x" + o;
}

Це дуже швидка функція, яка враховує однозначні цифри, номери з плаваючою комою і навіть перевіряє, чи пересилає людина шістнадцяткове значення для повторного введення. Він використовує лише чотири виклики функцій, і лише два з них є у циклі. Щоб відключити значення, які ви використовуєте:

/////////////////////////////////////////////////////////////////////////////
//  fromHex().  Convert a hex string to ASCII text.
/////////////////////////////////////////////////////////////////////////////
fromHex(s)
{
    var start = 0;
    var o = "";

    if (s.substr(0,2).toLowerCase() == "0x") {
        start = 2;
    }

    if (typeof s != "string") {
        s = s.toString();
    }
    for (var i=start; i<s.length; i+=2) {
        var c = s.substr(i, 2);

        o = o + String.fromCharCode(parseInt(c, 16));
    }

    return o;
}

Як і функція toHex (), функція fromHex () спочатку шукає "0x", а потім переводить вхідну інформацію в рядок, якщо вона вже не є рядком. Я не знаю, як це не було б рядком - але про всяк випадок - перевіряю. Потім функція переходить, захоплюючи два символи та перекладаючи їх у символи ASCII. Якщо ви хочете, щоб він переклав Unicode, вам потрібно буде змінити цикл, щоб переходити чотири (4) символи одночасно. Але тоді вам також потрібно переконатися, що рядок НЕ ділиться на чотири. Якщо це так - то це стандартна шістнадцятковий рядок. (Пам'ятайте, що рядок має "0x" на передній панелі.)

Простий тестовий скрипт, який показує, що -3.14159265 при перетворенні на рядок все ще становить -3.14159265.

<?php

    echo <<<EOD
<html>
    <head><title>Test</title>
        <script>
            var a = -3.14159265;
            alert( "A = " + a );
            var b = a.toString();
            alert( "B = " + b );
        </script>
    </head>
    <body>
    </body>
</html>
EOD;

?>

Через те, як працює JavaScript щодо функції toString (), усі ці проблеми можна усунути, які раніше викликали проблеми. Тепер усі рядки та числа можна легко перетворити. Крім того, такі речі, як об'єкти, спричинять помилку, що створюється самим JavaScript. Я вважаю, що це приблизно так добре, як це отримує. Єдине вдосконалення, яке залишилося, - це те, щоб W3C просто включав в JavaScript функції toHex () та fromHex ().

var number = 3200;
var hexString = number.toString(16);

16 - це радіус, і 16 значень у шістнадцятковій кількості :-)

Для всіх, хто цікавиться, ось JSFiddle, який порівнює більшість відповідей на це питання .

І ось метод, з яким я закінчився:

function decToHex(dec) {
  return (dec + Math.pow(16, 6)).toString(16).substr(-6)
}

Також майте на увазі, що якщо ви хочете перетворити з десяткових в шістнадцяткову для використання в CSS як тип кольорових даних , ви можете замість цього віддати перевагу витягувати значення RGB з десяткової та використовувати rgb () .

Наприклад ( JSFiddle ):

let c = 4210330 // your color in decimal format
let rgb = [(c & 0xff0000) >> 16,  (c & 0x00ff00) >> 8,  (c & 0x0000ff)]

// Vanilla JS:
document..getElementById('some-element').style.color = 'rgb(' + rgb + ')'
// jQuery:
$('#some-element').css('color', 'rgb(' + rgb + ')')

Це встановлює властивість #some-elementCSS colorдля rgb(64, 62, 154).

Обмежений / доповнений заданою кількістю символів:

function decimalToHex(decimal, chars) {
    return (decimal + Math.pow(16, chars)).toString(16).slice(-chars).toUpperCase();
}

Ось оброблена версія ECMAScript 6:

const convert = {
  bin2dec : s => parseInt(s, 2).toString(10),
  bin2hex : s => parseInt(s, 2).toString(16),
  dec2bin : s => parseInt(s, 10).toString(2),
  dec2hex : s => parseInt(s, 10).toString(16),
  hex2bin : s => parseInt(s, 16).toString(2),
  hex2dec : s => parseInt(s, 16).toString(10)
};

convert.bin2dec('111'); // '7'
convert.dec2hex('42');  // '2a'
convert.hex2bin('f8');  // '11111000'
convert.dec2bin('22');  // '10110'

function dec2hex(i)
{
  var result = "0000";
  if      (i >= 0    && i <= 15)    { result = "000" + i.toString(16); }
  else if (i >= 16   && i <= 255)   { result = "00"  + i.toString(16); }
  else if (i >= 256  && i <= 4095)  { result = "0"   + i.toString(16); }
  else if (i >= 4096 && i <= 65535) { result =         i.toString(16); }
  return result
}

Якщо ви хочете перетворити число в шістнадцяткове представлення значення кольору RGBA, я вважаю, що це найкорисніша комбінація кількох порад звідси:

function toHexString(n) {
    if(n < 0) {
        n = 0xFFFFFFFF + n + 1;
    }
    return "0x" + ("00000000" + n.toString(16).toUpperCase()).substr(-8);
}

Коментар AFAIK 57807 невірний і повинен бути чимось на зразок: var hex = Число (d) .toString (16); замість var hex = parseInt (d, 16);

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 hexdec (hex_string) {
    hex_string=((hex_string.charAt(1)!='X' && hex_string.charAt(1)!='x')?hex_string='0X'+hex_string : hex_string);
    hex_string=(hex_string.charAt(2)<8 ? hex_string =hex_string-0x00000000 : hex_string=hex_string-0xFFFFFFFF-1);
    return parseInt(hex_string, 10);
}

Я роблю перетворення в шістнадцятковий рядок у досить великому циклі, тому я спробував кілька методів, щоб знайти найшвидший. Мої вимоги полягали в тому, щоб у результаті був рядок фіксованої довжини і правильно кодувати негативні значення (-1 => ff..f).

Простий .toString(16)для мене не працював, оскільки мені потрібні були негативні значення для правильного кодування. Наступний код є найшвидшим, який я перевірив на сьогодні, на 1-2 байтні значення (зауважте, що symbolsвизначається кількість вихідних символів, які ви хочете отримати, тобто для 4-байтового цілого числа воно повинно бути рівним 8):

var hex = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f'];
function getHexRepresentation(num, symbols) {
    var result = '';
    while (symbols--) {
        result = hex[num & 0xF] + result;
        num >>= 4;
    }
    return result;
}

Він працює швидше, ніж .toString(16)на 1-2 байтових числах, і повільніше на більших числах (коли symbols> = 6), але все ж повинен перевершити методи, які кодують негативні значення належним чином.

Як зазначається у прийнятій відповіді, найпростіший спосіб перетворення з десяткової в шістнадцяткову var hex = dec.toString(16). Однак ви можете віддати перевагу перетворенню рядків, оскільки це забезпечує правильне представлення рядків "12".toString(16).

// Avoids a hard-to-track-down bug by returning `c` instead of `12`
(+"12").toString(16);

Щоб змінити процес, ви також можете скористатися рішенням нижче, оскільки воно ще коротше.

var dec = +("0x" + hex);

Схоже, це повільніше в Google Chrome і Firefox, але значно швидше в Opera. Дивіться http://jsperf.com/hex-to-dec .

Як перетворити десятковий у шістнадцятковий у JavaScript

Я не зміг знайти жорстоко чистий / простий десятковий до шістнадцятковий перетворення, який не передбачав безлад функцій та масивів ... тому мені довелося зробити це для себе.

function DecToHex(decimal) { // Data (decimal)

    length = -1;    // Base string length
    string = '';    // Source 'string'

    characters = [ '0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F' ]; // character array

    do { // Grab each nibble in reverse order because JavaScript has no unsigned left shift

        string += characters[decimal & 0xF];   // Mask byte, get that character
        ++length;                              // Increment to length of string

    } while (decimal >>>= 4); // For next character shift right 4 bits, or break on 0

    decimal += 'x'; // Convert that 0 into a hex prefix string -> '0x'

    do
        decimal += string[length];
    while (length--); // Flip string forwards, with the prefixed '0x'

    return (decimal); // return (hexadecimal);
}

/* Original: */

D = 3678;    // Data (decimal)
C = 0xF;    // Check
A = D;        // Accumulate
B = -1;        // Base string length
S = '';        // Source 'string'
H = '0x';    // Destination 'string'

do {
    ++B;
    A& = C;

    switch(A) {
        case 0xA: A='A'
        break;

        case 0xB: A='B'
        break;

        case 0xC: A='C'
        break;

        case 0xD: A='D'
        break;

        case 0xE: A='E'
        break;

        case 0xF: A='F'
        break;

        A = (A);
    }
    S += A;

    D >>>= 0x04;
    A = D;
} while(D)

do
    H += S[B];
while (B--)

S = B = A = C = D; // Zero out variables
alert(H);    // H: holds hexadecimal equivalent

Підсумувати все це;

function toHex(i, pad) {

  if (typeof(pad) === 'undefined' || pad === null) {
    pad = 2;
  } 

  var strToParse = i.toString(16);

  while (strToParse.length < pad) {
    strToParse = "0" + strToParse;
  }

  var finalVal =  parseInt(strToParse, 16);

  if ( finalVal < 0 ) {
    finalVal = 0xFFFFFFFF + finalVal + 1;
  }

  return finalVal;
}

Однак, якщо вам не потрібно перетворювати його в ціле число в кінці (тобто для кольорів), достатньо лише переконатися, що значення не є негативними.

Я не знайшов чіткої відповіді, без перевірки, чи вона негативна чи позитивна, що використовує доповнення двох (включені негативні числа). Для цього я показую своє рішення на один байт:

((0xFF + number +1) & 0x0FF).toString(16);

Ви можете використовувати цю інструкцію до будь-яких числових байтів, лише додаючи їх FFу відповідних місцях. Наприклад, до двох байтів:

((0xFFFF + number +1) & 0x0FFFF).toString(16);

Якщо ви хочете привести ціле масив до рядка шістнадцятковим:

s = "";
for(var i = 0; i < arrayNumber.length; ++i) {
    s += ((0xFF + arrayNumber[i] +1) & 0x0FF).toString(16);
}

Якщо ви хочете перетворити на "повне" представлення JavaScript або CSS, ви можете використовувати щось на зразок:

  numToHex = function(num) {
    var r=((0xff0000&num)>>16).toString(16),
        g=((0x00ff00&num)>>8).toString(16),
        b=(0x0000ff&num).toString(16);
    if (r.length==1) { r = '0'+r; }
    if (g.length==1) { g = '0'+g; }
    if (b.length==1) { b = '0'+b; }
    return '0x'+r+g+b;                 // ('#' instead of'0x' for CSS)
  };

  var dec = 5974678;
  console.log( numToHex(dec) );        // 0x5b2a96

Ви можете зробити щось подібне в ECMAScript 6 :

const toHex = num => (num).toString(16).toUpperCase();

Якщо ви шукаєте для перетворення великих цілих чисел, тобто чисел, більших за число.MAX_SAFE_INTEGER - 9007199254740991, то ви можете використовувати наступний код

const hugeNumber = "9007199254740991873839" // Make sure its in String
const hexOfHugeNumber = BigInt(hugeNumber).toString(16);
console.log(hexOfHugeNumber)

Це засновано на рішеннях Prestaul і Tod. Однак це узагальнення, яке враховує різний розмір змінної (наприклад, Парсинг підписаного значення з послідовного журналу мікроконтролера).

function decimalToPaddedHexString(number, bitsize)
{ 
  let byteCount = Math.ceil(bitsize/8);
  let maxBinValue = Math.pow(2, bitsize)-1;

  /* In node.js this function fails for bitsize above 32bits */
  if (bitsize > 32)
    throw "number above maximum value";

  /* Conversion to unsigned form based on  */
  if (number < 0)
    number = maxBinValue + number + 1;

  return "0x"+(number >>> 0).toString(16).toUpperCase().padStart(byteCount*2, '0');
}

Тестовий сценарій:

for (let n = 0 ; n < 64 ; n++ ) { 
     let s=decimalToPaddedHexString(-1, n); 
     console.log(`decimalToPaddedHexString(-1,${(n+"").padStart(2)}) = ${s.padStart(10)} = ${("0b"+parseInt(s).toString(2)).padStart(34)}`);
   }

Результати тесту:

decimalToPaddedHexString(-1, 0) =        0x0 =                                0b0
decimalToPaddedHexString(-1, 1) =       0x01 =                                0b1
decimalToPaddedHexString(-1, 2) =       0x03 =                               0b11
decimalToPaddedHexString(-1, 3) =       0x07 =                              0b111
decimalToPaddedHexString(-1, 4) =       0x0F =                             0b1111
decimalToPaddedHexString(-1, 5) =       0x1F =                            0b11111
decimalToPaddedHexString(-1, 6) =       0x3F =                           0b111111
decimalToPaddedHexString(-1, 7) =       0x7F =                          0b1111111
decimalToPaddedHexString(-1, 8) =       0xFF =                         0b11111111
decimalToPaddedHexString(-1, 9) =     0x01FF =                        0b111111111
decimalToPaddedHexString(-1,10) =     0x03FF =                       0b1111111111
decimalToPaddedHexString(-1,11) =     0x07FF =                      0b11111111111
decimalToPaddedHexString(-1,12) =     0x0FFF =                     0b111111111111
decimalToPaddedHexString(-1,13) =     0x1FFF =                    0b1111111111111
decimalToPaddedHexString(-1,14) =     0x3FFF =                   0b11111111111111
decimalToPaddedHexString(-1,15) =     0x7FFF =                  0b111111111111111
decimalToPaddedHexString(-1,16) =     0xFFFF =                 0b1111111111111111
decimalToPaddedHexString(-1,17) =   0x01FFFF =                0b11111111111111111
decimalToPaddedHexString(-1,18) =   0x03FFFF =               0b111111111111111111
decimalToPaddedHexString(-1,19) =   0x07FFFF =              0b1111111111111111111
decimalToPaddedHexString(-1,20) =   0x0FFFFF =             0b11111111111111111111
decimalToPaddedHexString(-1,21) =   0x1FFFFF =            0b111111111111111111111
decimalToPaddedHexString(-1,22) =   0x3FFFFF =           0b1111111111111111111111
decimalToPaddedHexString(-1,23) =   0x7FFFFF =          0b11111111111111111111111
decimalToPaddedHexString(-1,24) =   0xFFFFFF =         0b111111111111111111111111
decimalToPaddedHexString(-1,25) = 0x01FFFFFF =        0b1111111111111111111111111
decimalToPaddedHexString(-1,26) = 0x03FFFFFF =       0b11111111111111111111111111
decimalToPaddedHexString(-1,27) = 0x07FFFFFF =      0b111111111111111111111111111
decimalToPaddedHexString(-1,28) = 0x0FFFFFFF =     0b1111111111111111111111111111
decimalToPaddedHexString(-1,29) = 0x1FFFFFFF =    0b11111111111111111111111111111
decimalToPaddedHexString(-1,30) = 0x3FFFFFFF =   0b111111111111111111111111111111
decimalToPaddedHexString(-1,31) = 0x7FFFFFFF =  0b1111111111111111111111111111111
decimalToPaddedHexString(-1,32) = 0xFFFFFFFF = 0b11111111111111111111111111111111
Thrown: 'number above maximum value'

Примітка. Не надто впевнений, чому він не працює вище 32 біт

Ось моє рішення:

hex = function(number) {
  return '0x' + Math.abs(number).toString(16);
}

Питання говорить: "Як перетворити десятковий в шістнадцятковий у JavaScript" . Хоча питання не вказує, що шістнадцятковий рядок повинен починатися з префікса 0x, кожен, хто пише код, повинен знати, що 0x додається до шістнадцяткових кодів, щоб відрізняти шістнадцяткові коди від програмних ідентифікаторів та інших чисел (1234 може бути шістнадцятковим, десятковим або навіть вісімковий).

Тому, щоб правильно відповісти на це питання, для написання сценарію потрібно додати префікс 0x.

Функція Math.abs (N) перетворює негативи на позитиви, і як бонус, це не схоже на те, що хтось провів її через дроворуб.

Я відповів, що хотів, мав би специфікатор ширини поля, тому ми могли б, наприклад, показати 8/16/32/64-бітні значення, як ви їх бачили в списку шістнадцяткових програм редагування. Це справжня правильна відповідь.