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

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

Эй, ребята, я встречаюсь с этим фрагментом кода. Это функция утилиты в 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.

Thanks, Venn.

Answer 1

| в 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 вы можете также есть три, но это не важно). Итак, что они делают, сначала добавьте пять 0s как строку. Это означает, что "22" становится "0000022". Наконец, возьмите последние шесть символов из этого: 000022. (Вызов substr с отрицательным индексом с конца строки.) Это дает им допустимый цвет.

Таким образом, положить все это вместе, линия

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

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

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