Расширить шестнадцатеричное значение

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

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

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

Введение

В этом практическом занятии мы изучим, как расширить трехзначный цветовой код до шестизначного с использованием JavaScript. Будем использовать методы массивов, такие как map(), split() и join(), а также slice(), чтобы удалить # из начала строки, если он присутствует. Это практическое занятие поможет вам понять, как манипулировать строками и массивами в JavaScript, чтобы получить желаемый результат.


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/AdvancedConceptsGroup -.-> javascript/higher_funcs("Higher-Order Functions") subgraph Lab Skills javascript/variables -.-> lab-28292{{"Расширить шестнадцатеричное значение"}} javascript/data_types -.-> lab-28292{{"Расширить шестнадцатеричное значение"}} javascript/arith_ops -.-> lab-28292{{"Расширить шестнадцатеричное значение"}} javascript/comp_ops -.-> lab-28292{{"Расширить шестнадцатеричное значение"}} javascript/higher_funcs -.-> lab-28292{{"Расширить шестнадцатеричное значение"}} end

Как расширить трехзначный цветовой код до шестизначного

Для практики программирования откройте Терминал/SSH и введите node. Вы можете использовать следующую функцию, чтобы расширить трехзначный цветовой код до шестизначного:

const extendHex = (shortHex) =>
  "#" +
  shortHex
    .slice(shortHex.startsWith("#") ? 1 : 0)
    .split("")
    .map((x) => x + x)
    .join("");

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

  • Используйте Array.prototype.map(), String.prototype.split() и Array.prototype.join(), чтобы объединить отображенный массив.
  • Используйте Array.prototype.slice(), чтобы удалить # из начала строки, так как оно добавляется один раз.

Вот несколько примеров:

extendHex("#03f"); // '#0033ff'
extendHex("05a"); // '#0055aa'

Резюме

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