Как преобразовать шестнадцатеричное число в десятичное в JavaScript

---

Функция parseInt()

Чтобы преобразовать шестнадцатеричное число в десятичное, вызовите функцию parseInt(), передав шестнадцатеричное число и 16 в качестве первого и второго аргументов: parseInt(hex, 16). Например:

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

console.log(hexToDec('f')); // 15
console.log(hexToDec('abc')); // 2748
console.log(hexToDec(345)); // 837

Функция parseInt() анализирует строку и возвращает целое число указанного радикса. Она имеет два параметра.

1. string  —  анализируемая строка.
2. radix  —  целое число от 2 до 36, представляющее собой радикс/базис строки.

Функция parseInt() игнорирует пробелы в переданной ей строке.

console.log(parseInt('   a', 16)); // 10
console.log(parseInt('   cd', 16)); // 205

Если переданная строка не является допустимым числом в указанном радиксе, parseInt() не выдает ошибку, а возвращает NaN.

console.log(parseInt('js', 16)); // NaN

// 'a' не существует в базисе 10
console.log(parseInt('a', 10)); // NaN

// 5 не существует в базисе 2 
console.log(parseInt(5, 2)); // NaN

Если радикс не находится в диапазоне между 2 и 36, то функция parseInt() также вернет NaN.

console.log(parseInt(54, 1));
console.log(parseInt('aa', 37));
console.log(parseInt(10, 50));

Если радикс является недопустимым числом или не установлен, а строка начинается с 0x или 0X, то радикс принимается равным 16. Если же строка начинается с любого другого значения, радикс принимается равным 10.

// предполагается базис 10 
console.log(parseInt('45')); // 45
console.log(parseInt('36', 'invalid')); // 36

// 'f' и 'b' НЕ существуют в предполагаемом базисе 10 
console.log(parseInt('ff')); // NaN
console.log(parseInt('bb', 'invalid')); // NaN

// 'f' и 'b' существуют в предполагаемом базисе 16 
console.log(parseInt('0xff')); // 255
console.log(parseInt('0Xbb', 'invalid')); // 187

Пример: преобразование шестнадцатеричного кода в RGB(A)

Одним из распространенных способов конвертирования шестнадцатеричных значений в десятичные является преобразование шестнадцатеричного кода цвета в его эквивалент в формате RGB. Вот как это можно сделать:

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

function hexToRGB(hexColor) {
  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hexColor);
  return {
    r: hexToDec(result[1]),
    g: hexToDec(result[2]),
    b: hexToDec(result[3]),
  };
}

// { r: 255, g: 128, b: 237 }
console.log(hexToRGB('#ff80ed'));

// { r: 195, g: 151, b: 151 }
console.log(hexToRGB('#c39797'));

// { r: 255, g: 255, b: 255 }
console.log(hexToRGB('#ffffff'));

Мы создали многократно используемую функцию hexToRGB(), чтобы эту логику можно было легко повторить.

Мы используем регулярное выражение для поиска и разделения двухбуквенного кода, обозначающего красный (R), зеленый (G) и синий (B) цвета. Вызываем метод exec(), чтобы найти совпадения этого регулярного выражения в указанном шестнадцатеричном коде цвета:

/**
[
  '#ff80ed',
  'ff',
  '80',
  'ed',
  index: 0,
  input: '#ff80ed',
  groups: undefined
]
 */
console.log(/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec('#ff80ed'));

После их разделения используем метод hexToDec() для преобразования каждого из них в его десятичный эквивалент.

Мы возвращаем объект со свойствами r, g и b, содержащими значения для красного, зеленого и синего цветов соответственно.

В зависимости от конкретного случая мы также можем вернуть строку rgb() вместо объекта. Зачастую это уместно для цветной анимации, поскольку некоторые библиотеки анимации работают со значениями RGB, а не с шестнадцатеричными кодами цветов.

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

function hexToRGB(hexColor) {
  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hexColor);
  const r = hexToDec(result[1]);
  const g = hexToDec(result[2]);
  const b = hexToDec(result[3]);

  return `rgb(${r}, ${g}, ${b})`;
}

// rgb(255, 128, 237)
console.log(hexToRGB('#ff80ed'));

// rgb(195, 151, 151)
console.log(hexToRGB('#c39797'));

// rgb(255, 255, 255)
console.log(hexToRGB('#ffffff'));

Мы можем модифицировать функцию для определения альфа-значения в шестнадцатеричном коде и преобразования кода цвета в формат RGBA. Будем использовать альфа-значение 1, если оно не указано.

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

function hexToRGBA(hexColor) {
  const regex = /^#?([a-f\d]{2})?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i;

  const result = regex.exec(hexColor);  const alphaHex = result[1];
  const a = alphaHex ? hexToDec(alphaHex) / 255 : 1;
  const r = hexToDec(result[2]);
  const g = hexToDec(result[3]);
  const b = hexToDec(result[4]);

  return { r, g, b, a };
}

// { r: 255, g: 128, b: 237, a: 1 }
console.log(hexToRGBA('#ff80ed'));

// { r: 195, g: 151, b: 151, a: 1 }
console.log(hexToRGBA('#c39797'));

// { r: 255, g: 128, b: 237, a: 0.8666666666666667 }
console.log(hexToRGBA('#ddff80ed'));

// { r: 195, g: 151, b: 151, a: 0.6901960784313725 }
console.log(hexToRGBA('#b0c39797'));

Можно также возвращать строку rgba() вместо объекта:

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

function hexToRGBA(hexColor) {
  const regex = /^#?([a-f\d]{2})?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i;
  const result = regex.exec(hexColor);

  const alphaHex = result[1];
  const a = alphaHex ? hexToDec(alphaHex) / 255 : 1;
  const r = hexToDec(result[2]);
  const g = hexToDec(result[3]);
  const b = hexToDec(result[4]);

  return `rgba(${r}, ${g}, ${b}, ${a.toFixed(3)})`;
}

// rgba(255, 128, 237, 1.000)
console.log(hexToRGBA('#ff80ed'));

// rgba(195, 151, 151, 1.000)
console.log(hexToRGBA('#c39797'));

// rgba(255, 128, 237, 0.867)
console.log(hexToRGBA('#ddff80ed'));

// rgba(195, 151, 151, 0.690)
console.log(hexToRGBA('#b0c39797'));

Читайте также:

• 11 сверхполезных советов для JavaScript разработки
• Манипуляции с битами. Игра в истину
• Как удалить одинаковые данные из отсортированного массива

Читайте нас в Telegram, VK и Дзен

---

Перевод статьи Coding Beauty: How to Convert Hex to Decimal in JavaScript