Функция 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-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
