Как преобразовать шестнадцатеричное число в десятичное в 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() анализирует строку и возвращает целое число указанного радикса. Она имеет два параметра.

string — анализируемая строка.
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-fd]{2})([a-fd]{2})([a-fd]{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-fd]{2})([a-fd]{2})([a-fd]{2})$/i.exec('#ff80ed'));

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

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

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

function hexToDec(hex) { return parseInt(hex, 16); } function hexToRGB(hexColor) { const result=/^#?([a-fd]{2})([a-fd]{2})([a-fd]{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-fd]{2})?([a-fd]{2})([a-fd]{2})([a-fd]{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-fd]{2})?([a-fd]{2})([a-fd]{2})([a-fd]{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'));

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

Функция parseInt()

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

admin

Добавить комментарий Отменить ответ