Javascript - Conversión de colores (números -> cadenas) viceversa

Question

utils.parseColor = function (color, toNumber) { 
    if (toNumber === true) { 
    if (typeof color === 'number') { 
     return (color | 0); //chop off decimal 
    } 
    if (typeof color === 'string' && color[0] === '#') { 
     color = color.slice(1); 
    } 
    return window.parseInt(color, 16); 
    } else { 
    if (typeof color === 'number') { 
     //make sure our hexadecimal number is padded out 
     color = '#' + ('00000' + (color | 0).toString(16)).substr(-6); 
    } 

    return color; 
    } 
}; 

Hola chicos, me encuentro con este fragmento de código. Es una función de utilidad en JavaScript que convertirá colores hacia adelante y hacia atrás entre números y cadenas. Hay 2 partes de las que no estoy tan seguro,

Primero, ¿Qué significa return (color|0);? ¿Cuál es |? en JavaScript?

En segundo lugar, en la línea de

color = '#' + ('00000' + (color | 0).toString(16)).substr(-6); 

¿Por qué necesito para asegurarse de que el número hexadecimal se rellena a cabo? ¿Qué estamos tratando de lograr aquí?

---

Llamar a la función con un número hexadecimal como utils.parseColor(0xFFFF00), devuelve el valor de cadena : "#ffff00". Al pasar una cadena hexadecimal de estilo CSS, se devuelve la misma cadena sin modificar. La función también acepta un segundo parámetro opcional toNumber, que si se establece en true, devuelve un valor numérico de color . Por ejemplo, llamando al utils.parseColor("#FFFF00", true) o utils.parseColor(0xFFFF00, true), ambos devuelven el número 16776960.

Gracias, Venn.

Answer 1

| en JavaScript es en modo bit OR. En este caso, todo lo que hace es forzar que el número sea un número entero.

Bitwise OR toma dos números y compara todos sus bits. Si cualquiera de los bits es un 1, el resultado tiene un 1 allí. Por lo tanto, teniendo en cuenta los dos números binarios 1100 y 1010 que se obtendría la siguiente:

1100 
1010 
---- 
1110 

Como se puede ver, el resultado tiene un 1 en cada columna que tiene un 1. Así | 0 no cambia el valor del número.

Sin embargo, como funciona con la representación binaria de enteros, JavaScript cambia el número a un número entero antes de aplicarlo. Esto significa que 2.3 | 0 es 2 en JavaScript.

Debe asegurarse de que el número esté correctamente ajustado porque el formato de color espera seis dígitos. Es decir, #00F000 es válido donde #F000 no lo es.

La forma en que funciona es simple. Digamos que pasa en 34 como su número de color. 0x22 es "22" como una cadena en la base 16. (La llamada a toString(n) en un número devuelve la representación del número en la base n.) Este es no un color válido porque los colores necesitan seis dígitos después del # (CSS en que pueda también tienen tres, pero eso no es importante). Entonces lo que hacen es primero agregar cinco ceros. Esto significa "22" se convierte en "0000022". Finalmente, tome los últimos seis caracteres de esto: 000022. (Llamar a substr con un índice negativo cuenta desde el final de la cadena.) Esto les da un color válido.

lo tanto, poner todo junto, la línea

color = '#' + ('00000' + (color | 0).toString(16)).substr(-6); 

toma el número que ha pasado en el, lo convierte en un entero con (color | 0), lo convierte en una cadena hexadecimal con .toString(16), almohadillas de TI con un grupo de ceros, toma el último seis caracteres de la cadena acolchada y le precede un #.

Esta es una forma bastante inteligente y elegante de escribir esta función.