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

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

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

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

Сообщение Как преобразовать шестнадцатеричное число в десятичное в JavaScript появились сначала на NOP::Nuances of programming.

Похожие записи

AEGIS Algorithms Android Angular Apache Airflow Apache Druid Apache Flink Apache Spark API API Canvas AppSec Architecture Artificial Intelligence Astro Authentication Authorization AutoGPT AWS AWS Aurora AWS Boto3 AWS EC2 AWS Lambda Azure Babylon.js Backend bash Beautiful Soup Bento UI Big Data Binary Tree Browser API Bun Career Cassandra Charts ChatGPT Chrome Extension Clean Code CLI ClickHouse Coding Codux Combine Compose Computer Context Fusion Copilot Cosmo Route CProgramming cron Cryptography CSS CTF Cypress DALL-E Data Analysis Data science Database dbt dbt Cloud deno Design Design Patterns Detekt Development Distributed Systems Django Docker Docker Hub Drizzle DRY DuckDB Express FastAPI Flask Flutter For Beginners Front End Development Game Development GCN GCP Geospatial Git GitHub Actions GitHub Pages Gitlab GMS GoFr Golang Google Google Sheets Google Wire GPT-3 GPT3 Gradio Gradle Grafana Graphic Design GraphQL gRPC Guidance HMS Hotwire HTML Huawei HuggingFace IndexedDB InfoSec Interview iOS Jackknife Java JavaScript Jetpack Compose JSON Kafka Kotlin Kubernetes LangChain Laravel Linux LlaMA LLM localStorage Logging Machine Learning Magento Math Mermaid Micro Frontends Mobile Mobile App Development mondayDB MongoDB Mongoose MySQL Naming NestJS NET NetMock Networks NextJS NLP Node.js Nodejs NoSQL NPM OOP OpenAI OTP Pandas PDF PHP Playwright Plotly Polars PostgreSQL Prefect Productivity Programming Prometheus Puppeteer Pushover Python Pytorch Quarkus Rabbitmq RAG Ramda Raspberry Pi React React Native Reactor Redis REST API Revolut Riverpod RProgramming Ruby Ruby on Rails Rust Scalene SCDB ScyllaDB Selenium Servers Sklearn SLO SnowFlake Snowkase Software Architecture Software Development Solara Solid Spring Boot SQL SQLite Streamlit SudoLang Supabase Swift SwiftUI Tailwind CSS Taipy Terraform Testing Transformers TURN TypeScript Ubuntu UI Design Unix UX UX Design Vim Vite VSCode Vue Web Architecture Web Components Web Development Web Frameworks Web Scraping Web-разработка Webassembly Websocket Whisper Widgets WordPress YAML YouTube Наука о данных Разное Тренды

Go — единственный выбор для бэкенд-разработчика?

Вы пропустили

AEGIS Algorithms Android Angular Apache Airflow Apache Druid Apache Flink Apache Spark API API Canvas AppSec Architecture Artificial Intelligence Astro Authentication Authorization AutoGPT AWS AWS Aurora AWS Boto3 AWS EC2 AWS Lambda Azure Babylon.js Backend bash Beautiful Soup Bento UI Big Data Binary Tree Browser API Bun Career Cassandra Charts ChatGPT Chrome Extension Clean Code CLI ClickHouse Coding Codux Combine Compose Computer Context Fusion Copilot Cosmo Route CProgramming cron Cryptography CSS CTF Cypress DALL-E Data Analysis Data science Database dbt dbt Cloud deno Design Design Patterns Detekt Development Distributed Systems Django Docker Docker Hub Drizzle DRY DuckDB Express FastAPI Flask Flutter For Beginners Front End Development Game Development GCN GCP Geospatial Git GitHub Actions GitHub Pages Gitlab GMS GoFr Golang Google Google Sheets Google Wire GPT-3 GPT3 Gradio Gradle Grafana Graphic Design GraphQL gRPC Guidance HMS Hotwire HTML Huawei HuggingFace IndexedDB InfoSec Interview iOS Jackknife Java JavaScript Jetpack Compose JSON Kafka Kotlin Kubernetes LangChain Laravel Linux LlaMA LLM localStorage Logging Machine Learning Magento Math Mermaid Micro Frontends Mobile Mobile App Development mondayDB MongoDB Mongoose MySQL Naming NestJS NET NetMock Networks NextJS NLP Node.js Nodejs NoSQL NPM OOP OpenAI OTP Pandas PDF PHP Playwright Plotly Polars PostgreSQL Prefect Productivity Programming Prometheus Puppeteer Pushover Python Pytorch Quarkus Rabbitmq RAG Ramda Raspberry Pi React React Native Reactor Redis REST API Revolut Riverpod RProgramming Ruby Ruby on Rails Rust Scalene SCDB ScyllaDB Selenium Servers Sklearn SLO SnowFlake Snowkase Software Architecture Software Development Solara Solid Spring Boot SQL SQLite Streamlit SudoLang Supabase Swift SwiftUI Tailwind CSS Taipy Terraform Testing Transformers TURN TypeScript Ubuntu UI Design Unix UX UX Design Vim Vite VSCode Vue Web Architecture Web Components Web Development Web Frameworks Web Scraping Web-разработка Webassembly Websocket Whisper Widgets WordPress YAML YouTube Наука о данных Разное Тренды

Go — единственный выбор для бэкенд-разработчика?

AEGIS Algorithms Android Angular Apache Airflow Apache Druid Apache Flink Apache Spark API API Canvas AppSec Architecture Artificial Intelligence Astro Authentication Authorization AutoGPT AWS AWS Aurora AWS Boto3 AWS EC2 AWS Lambda Azure Babylon.js Backend bash Beautiful Soup Bento UI Big Data Binary Tree Browser API Bun Career Cassandra Charts ChatGPT Chrome Extension Clean Code CLI ClickHouse Coding Codux Combine Compose Computer Context Fusion Copilot Cosmo Route CProgramming cron Cryptography CSS CTF Cypress DALL-E Data Analysis Data science Database dbt dbt Cloud deno Design Design Patterns Detekt Development Distributed Systems Django Docker Docker Hub Drizzle DRY DuckDB Express FastAPI Flask Flutter For Beginners Front End Development Game Development GCN GCP Geospatial Git GitHub Actions GitHub Pages Gitlab GMS GoFr Golang Google Google Sheets Google Wire GPT-3 GPT3 Gradio Gradle Grafana Graphic Design GraphQL gRPC Guidance HMS Hotwire HTML Huawei HuggingFace IndexedDB InfoSec Interview iOS Jackknife Java JavaScript Jetpack Compose JSON Kafka Kotlin Kubernetes LangChain Laravel Linux LlaMA LLM localStorage Logging Machine Learning Magento Math Mermaid Micro Frontends Mobile Mobile App Development mondayDB MongoDB Mongoose MySQL Naming NestJS NET NetMock Networks NextJS NLP Node.js Nodejs NoSQL NPM OOP OpenAI OTP Pandas PDF PHP Playwright Plotly Polars PostgreSQL Prefect Productivity Programming Prometheus Puppeteer Pushover Python Pytorch Quarkus Rabbitmq RAG Ramda Raspberry Pi React React Native Reactor Redis REST API Revolut Riverpod RProgramming Ruby Ruby on Rails Rust Scalene SCDB ScyllaDB Selenium Servers Sklearn SLO SnowFlake Snowkase Software Architecture Software Development Solara Solid Spring Boot SQL SQLite Streamlit SudoLang Supabase Swift SwiftUI Tailwind CSS Taipy Terraform Testing Transformers TURN TypeScript Ubuntu UI Design Unix UX UX Design Vim Vite VSCode Vue Web Architecture Web Components Web Development Web Frameworks Web Scraping Web-разработка Webassembly Websocket Whisper Widgets WordPress YAML YouTube Наука о данных Разное Тренды

Производительность в Jetpack Compose: стабильность и неизменяемость