Javascript - Преобразование цветов (чисел -> строки) наоборот - PullRequest
Новая
       31

Javascript - Преобразование цветов (чисел -> строки) наоборот

6 голосов
/ 14 марта 2012 
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;
  }
};

Эй, ребята, я столкнулся с этим фрагментом кода. Это служебная функция в JavaScript, которая преобразует цвета между числами и строками. Есть 2 части, в которых я не уверен,

Во-первых, Что означает return (color|0);? Что такое |? в JavaScript?

Во-вторых, в строке 

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

почему я должен убедиться, что шестнадцатеричное число дополняется? Чего мы здесь пытаемся достичь?

Вызов функции с шестнадцатеричным числом, например utils.parseColor(0xFFFF00), возвращает строку значение: "#ffff00". Передача шестнадцатеричной строки в стиле CSS возвращает ту же строку без изменений. функция также принимает второй необязательный параметр toNumber, который, если установлено значение true, возвращает числовое значение значение цвета. Например, позвонив utils.parseColor("#FFFF00", true) или utils.parseColor(0xFFFF00, true), оба возвращают число 16776960.

Спасибо, Венна.

1 Ответ

8 голосов
/ 14 марта 2012

| в JavaScript - побитовое ИЛИ.В этом случае все, что он делает, это заставляет число быть целым числом.

Побитовое ИЛИ берет два числа и сравнивает все их биты.Если один из битов равен 1, результат имеет 1 там.Таким образом, учитывая два двоичных числа 1100 и 1010, вы получите следующее: 

1100
1010
----
1110

Как видите, результат имеет 1 в каждом столбце, который имеет 1. Поэтому | 0 не изменяется значение номера.

Однако, поскольку он работает с двоичным представлением целых чисел , JavaScript изменяет число на целое число перед его применением.Это означает, что 2.3 | 0 равно 2. В JavaScript.

Вы должны убедиться, что число дополняется правильно, потому что цветовой формат предполагает шесть цифр.То есть #00F000 действует там, где #F000 - нет.

Как это работает, просто.Допустим, вы передаете 34 в качестве номера цвета.0x22 - это "22" как строка в базе 16. (Вызов toString(n) для числа возвращает представление числа в базе n.) Это , а не допустимый цвет, потому чтоцветам нужно шесть цифр после # (в CSS также может быть три, но это не важно).Поэтому они сначала добавляют пять нулей в виде строки.Это означает, что "22" становится "0000022".Наконец, возьмите последние шесть символов из этого: 000022.(Вызов substr с отрицательным индексом отсчитывается от конца строки.) Это дает им правильный цвет.

Итак, все это вместе, строка 

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

занимаетчисло, которое вы передали, превращает его в целое число с (color | 0), превращает его в шестнадцатеричную строку с .toString(16), дополняет его набором нулей, берет last шесть символов из дополненной строкии добавляет # к нему.

На самом деле это довольно умный и элегантный способ написания этой функции.

...