Extender Valor Hexadecimal

JavaScriptJavaScriptBeginner
Practicar Ahora

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

💡 Este tutorial está traducido por IA desde la versión en inglés. Para ver la versión original, puedes hacer clic aquí

Introducción

En este laboratorio, exploraremos cómo extender un código de color de 3 dígitos a un código de color de 6 dígitos utilizando JavaScript. Utilizaremos métodos de matriz como map(), split() y join() junto con slice() para eliminar el # del inicio de la cadena si está presente. Este laboratorio te ayudará a entender cómo manipular cadenas y matrices en JavaScript para obtener una salida deseada.


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{{"Extender Valor Hexadecimal"}} javascript/data_types -.-> lab-28292{{"Extender Valor Hexadecimal"}} javascript/arith_ops -.-> lab-28292{{"Extender Valor Hexadecimal"}} javascript/comp_ops -.-> lab-28292{{"Extender Valor Hexadecimal"}} javascript/higher_funcs -.-> lab-28292{{"Extender Valor Hexadecimal"}} end

Cómo extender un código de color de 3 dígitos a un código de color de 6 dígitos

Para practicar la codificación, abre la Terminal/SSH y escribe node. Puedes utilizar la siguiente función para extender un código de color de 3 dígitos a un código de color de 6 dígitos:

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

Para convertir un código hexadecimal de color RGB de 3 dígitos a la forma de 6 dígitos, sigue estos pasos:

  • Utiliza Array.prototype.map(), String.prototype.split() y Array.prototype.join() para unir la matriz mapeada.
  • Utiliza Array.prototype.slice() para eliminar # del inicio de la cadena ya que se agrega una vez.

Aquí hay algunos ejemplos:

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

Resumen

¡Felicidades! Has completado el laboratorio de Extender el Valor Hexadecimal. Puedes practicar más laboratorios en LabEx para mejorar tus habilidades.