Преобразование шестнадцатеричного кода в строку RGB

JavaScriptJavaScriptBeginner
Практиковаться сейчас

This tutorial is from open-source community. Access the source code

💡 Этот учебник переведен с английского с помощью ИИ. Чтобы просмотреть оригинал, вы можете перейти на английский оригинал

Введение

В этом практическом занятии мы изучим, как преобразовать шестнадцатеричный цветовой код в строку rgb() или rgba() с использованием JavaScript. Мы узнаем, как использовать побитовые операторы и маскирование для извлечения значений RGB из шестнадцатеричного кода. Практическое занятие также затронет вопрос обработки трехзначных и шестизначных шестнадцатеричных кодов и внедрения значения альфа в результирующую строку.


Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL javascript(("JavaScript")) -.-> javascript/BasicConceptsGroup(["Basic Concepts"]) javascript(("JavaScript")) -.-> javascript/AdvancedConceptsGroup(["Advanced Concepts"]) javascript/BasicConceptsGroup -.-> javascript/variables("Variables") javascript/BasicConceptsGroup -.-> javascript/data_types("Data Types") javascript/BasicConceptsGroup -.-> javascript/arith_ops("Arithmetic Operators") javascript/BasicConceptsGroup -.-> javascript/comp_ops("Comparison Operators") javascript/BasicConceptsGroup -.-> javascript/cond_stmts("Conditional Statements") javascript/BasicConceptsGroup -.-> javascript/obj_manip("Object Manipulation") javascript/AdvancedConceptsGroup -.-> javascript/higher_funcs("Higher-Order Functions") javascript/AdvancedConceptsGroup -.-> javascript/spread_rest("Spread and Rest Operators") javascript/AdvancedConceptsGroup -.-> javascript/template_lit("Template Literals") subgraph Lab Skills javascript/variables -.-> lab-28375{{"Преобразование шестнадцатеричного кода в строку RGB"}} javascript/data_types -.-> lab-28375{{"Преобразование шестнадцатеричного кода в строку RGB"}} javascript/arith_ops -.-> lab-28375{{"Преобразование шестнадцатеричного кода в строку RGB"}} javascript/comp_ops -.-> lab-28375{{"Преобразование шестнадцатеричного кода в строку RGB"}} javascript/cond_stmts -.-> lab-28375{{"Преобразование шестнадцатеричного кода в строку RGB"}} javascript/obj_manip -.-> lab-28375{{"Преобразование шестнадцатеричного кода в строку RGB"}} javascript/higher_funcs -.-> lab-28375{{"Преобразование шестнадцатеричного кода в строку RGB"}} javascript/spread_rest -.-> lab-28375{{"Преобразование шестнадцатеричного кода в строку RGB"}} javascript/template_lit -.-> lab-28375{{"Преобразование шестнадцатеричного кода в строку RGB"}} end

Преобразование шестнадцатеричного кода в RGB

Для преобразования шестнадцатеричного цветового кода (с или без префикса #) в строку RGB следуйте этим шагам:

  1. Откройте Терминал/SSH и введите node, чтобы начать практиковаться в написании кода.
  2. Используйте оператор побитового сдвига вправо и маскируйте биты с оператором & (логическое И).
  3. Если цветовой код трехзначный, сначала преобразуйте его в шестизначную версию.
  4. Если вместе с шестизначным шестнадцатеричным кодом указано значение альфа, верните строку rgba().

Вот JavaScript-код для преобразования:

const hexToRGB = (hex) => {
  let alpha = false,
    h = hex.slice(hex.startsWith("#") ? 1 : 0);
  if (h.length === 3) h = [...h].map((x) => x + x).join("");
  else if (h.length === 8) alpha = true;
  h = parseInt(h, 16);
  return (
    "rgb" +
    (alpha ? "a" : "") +
    "(" +
    (h >>> (alpha ? 24 : 16)) +
    ", " +
    ((h & (alpha ? 0x00ff0000 : 0x00ff00)) >>> (alpha ? 16 : 8)) +
    ", " +
    ((h & (alpha ? 0x0000ff00 : 0x0000ff)) >>> (alpha ? 8 : 0)) +
    (alpha ? `, ${h & 0x000000ff}` : "") +
    ")"
  );
};

Вы можете использовать функцию hexToRGB в следующих примерах:

hexToRGB("#27ae60ff"); // 'rgba(39, 174, 96, 255)'
hexToRGB("27ae60"); // 'rgb(39, 174, 96)'
hexToRGB("#fff"); // 'rgb(255, 255, 255)'

Резюме

Поздравляем! Вы завершили практическое занятие по преобразованию шестнадцатеричного кода в RGB. Вы можете выполнить больше практических занятий в LabEx, чтобы улучшить свои навыки.