Javascript - das Konvertieren von Farben (zahlen -> Saiten) Umgekehrt

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 Leute, ich begegne diesem Stück code. Es wird eine utility-Funktion, die in JavaScript konvertieren Farben hin und her zwischen zahlen und Zeichenketten. Es sind 2 Teile, ich bin nicht so sicher,

Erste,
Was bedeutet return (color|0); bedeuten? Was ist |? in JavaScript?

Zweitens, in der Zeile

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

warum brauche ich, um sicherzustellen, dass die hexadezimale Zahl ist gepolstert aus? Was versuchen wir hier zu erreichen?

Aufruf der Funktion mit einer hexadezimalen Zahl, wie utils.parseColor(0xFFFF00), gibt den string zurück
Wert: "#ffff00". Die übergabe eines CSS-style-hexadezimal-string aus gibt die gleiche Zeichenfolge unverändert. Die
die Funktion akzeptiert auch einen zweiten, optionalen, parameter toNumber, die bei der Einstellung true, gibt einen numerischen
Farbe Wert. Zum Beispiel, ruft utils.parseColor("#FFFF00", true) oder
utils.parseColor(0xFFFF00, true), beide geben die Anzahl 16776960.

Dank,
Venn.

InformationsquelleAutor Vennsoh | 2012-03-14
  1. 7

    | in JavaScript ist das bitweise ODER. In diesem Fall werden alle es tut, ist die Kraft der Zahl um eine ganze Zahl sein.

    Bitweise ODER-Verknüpfung nimmt die beiden zahlen und vergleicht alle Ihre bits. Wenn entweder bit 1 ist, wird das Ergebnis eine 1 gibt. So, da die beiden binären zahlen 1100 und 1010, erhalten Sie das folgende:

    1100
1010
----
1110

    Wie Sie sehen können, hat das Ergebnis eine 1 in jeder Spalte, die eine 1. So | 0 ändert nicht die Wert der Zahl.

    Aber, denn es arbeitet mit der binären Darstellung der Ganzzahlen, JavaScript ändert die Zahl in eine Ganzzahl, bevor man es anwendet. Dies bedeutet, dass 2.3 | 0 2 in JavaScript.

    Müssen Sie sicherstellen, dass die Anzahl gepolstert ist richtig, weil die Farbe format erwartet sechs Ziffern. Das ist #00F000 gültig ist, wo #F000 ist nicht.

    Die Weise, die es funktioniert, ist einfach. Können sagen, Sie übergeben 34 als Ihre Farbe, die Anzahl. 0x22 ist "22" als string zur Basis 16. (Der Aufruf toString(n) auf eine Zahl, gibt die Darstellung der Zahl in der Basis n.) Dies ist nicht eine gültige Farbe, denn Farben müssen sechs Ziffern nach dem # (in CSS kann man auch drei haben, aber das ist nicht wichtig). Also, was Sie tun ist, fügen Sie zunächst fünf 0s als string. Dies bedeutet "22" wird "0000022". Endlich, die nehmen die letzten sechs Zeichen aus dieser: 000022. (Aufruf substr mit einem negativen index zählt vom Ende des Strings.) Dies gibt Ihnen eine gültige Farbe.

    Also, setzen Sie alle zusammen, die Linie

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

    nimmt die Nummer, die Sie übergeben, wandelt es in ein integer mit (color | 0), verwandelt es in eine hexadezimale Zeichenfolge mit .toString(16) pads, es mit ein paar Nullen, nimmt die letzten sechs Zeichen aus dem string und stellt eine # zu.

    Dies ist eigentlich eine ziemlich clevere und elegante Art und Weise zu schreiben, diese Funktion.

    • diese Antwort! Gut gemacht Tichon!
    InformationsquelleAutor Tikhon Jelvis
Schreibe einen Kommentar