Javascript - Conversione di colori (numeri -> stringhe) vice versa

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; 
    } 
}; 

Hey ragazzi, ho incontrato questo pezzo di codice. È una funzione di utilità in JavaScript che converte i colori avanti e indietro tra numeri e stringhe. Ci sono 2 parti di cui non sono così sicuro,

Primo, Che cosa significa "return (color|0);"? Che cos'è |? in JavaScript?

In secondo luogo, nella linea

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

perché ne ho bisogno per assicurarsi che il numero esadecimale è imbottito fuori? Cosa stiamo cercando di ottenere qui?

---

Chiamando la funzione con un numero esadecimale come utils.parseColor(0xFFFF00), restituisce il valore stringa : "#ffff00". Passando una stringa esadecimale in stile CSS, la stessa stringa non viene modificata. La funzione accetta anche un secondo parametro opzionale toNumber, che se impostato su true, restituisce un valore numerico di colore . Ad esempio, chiamando utils.parseColor("#FFFF00", true) o utils.parseColor(0xFFFF00, true), entrambi restituiscono il numero 16776960.

Grazie, Venn.

Answer 1

| in JavaScript è bit a bit OR. In questo caso, tutto ciò che fa è forzare il numero a essere un numero intero.

Bitwise OR prende due numeri e confronta tutti i loro bit. Se uno dei bit è un 1, il risultato ha un 1 lì. Quindi, dati i due numeri binari 1100 e 1010 si otterrebbe il seguente:

1100 
1010 
---- 
1110 

Come si può vedere, il risultato ha un 1 in ogni colonna che ha un 1. Quindi | 0 non cambia il valore del numero

Tuttavia, poiché funziona con la rappresentazione binaria di numeri interi, JavaScript modifica il numero in un numero intero prima di applicarlo. Ciò significa che 2.3 | 0 è 2 in JavaScript.

È necessario assicurarsi che il numero sia riempito correttamente in quanto il formato colore prevede sei cifre. Cioè, #00F000 è valido dove non lo è #F000.

Il modo in cui funziona è semplice. Diciamo che passi in 34 come numero di colore. 0x22 è "22" come una stringa in base 16. (La chiamata a toString(n) su un numero restituisce la rappresentazione del numero della base n.) Questo è non un colore valido in quanto i colori hanno bisogno di sei cifre dopo la # (in CSS è possibile ne hanno anche tre, ma non è importante). Quindi quello che fanno è aggiungere prima cinque 0 come stringa. Ciò significa che "22" diventa "0000022". Infine, prendi gli ultimi sei caratteri da questo: 000022. (Chiamando il numero substr con un numero di indici negativo dalla fine della stringa.) Ciò fornisce loro un colore valido.

Quindi, mettendo tutto insieme, la linea

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

prende il numero che avete passato in, lo trasforma in un intero con (color | 0), lo trasforma in una stringa esadecimale con .toString(16), pastiglie esso con un gruppo di zeri, prende lo ultimo sei caratteri dalla stringa imbottita e antepone uno # ad esso.

Questo è in realtà un modo abbastanza intelligente ed elegante per scrivere questa funzione.