¿Cómo convertir un código de color de 3 dígitos a un código de color de 6 dígitos usando JavaScript?

En este artículo, estamos convirtiendo un código HEX de color de tres dígitos en un código HEX de color de seis dígitos usando JavaScript. Para resolver este problema, primero copiamos los dígitos individuales y los pegamos en posiciones consecutivas. Por ejemplo, #34E se convertirá en #3344EE y #E90 se convertirá en #EE9900.

Pasos para convertir un código de color de 3 dígitos a un código de color de 6 dígitos:

Paso 1: El código de color está en formato de string. Por lo tanto, aplique el método de división en la string. Después de aplicar el método de división, obtuvimos una array de elementos.

<script>
  
var digit = "39E"
  
digit = digit.split("")
  
console.log(digit)
  
// ["#", "3", "9", "E"]
</script>

Producción:

["#", "3", "9", "E"]

Paso 2: ahora aplique el método de mapa e itere sobre la array y devuelva cada elemento concatenándose a sí mismo y verifique si el elemento es «#», luego no devuelva el resultado concatenado, solo devuelva el elemento.

<script>
  
var digit = "#39E";
  
digit = digit.split("").map((item)=>{
    if(item == "#"){return item}
        return item + item;
})
  
console.log(digit)
  
// ["#", "33", "99", "EE"]
</script>

Producción:

["#", "33", "99", "EE"]

Paso 3: ahora use el método de combinación para convertir todos los elementos de la array en una sola string.

<script>
  
var digit = "#39E"
  
digit = digit.split("").map((item)=>{
    if(item == "#"){return item}
        return item + item;
}).join("")
  
console.log(digit)
<script>

Producción:

"#3399EE"

Paso 4: en el paso anterior, estamos convirtiendo «# 39E» , pero podemos ver que el primer elemento de este código es «#», pero si el usuario no proporciona el «#», entonces debe verificar si el primer elemento es «#» y concatene con el código resultante. Y este es nuestro código completo.

<script>
  
var digit = "#39E"
  
digit = digit.split("").map((item)=>{
    if(item == "#"){return item}
        return item + item;
}).join("")
  
if(digit[0] != "#"){
    digit = "#" + digit;
}
  
console.log(digit)
</script>

Producción:

#3399EE