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。

谢谢， 维恩。

Answer 1

|在JavaScript中是按位或。在这种情况下，它所做的只是强制该数字为整数。按位或取两个数字并比较它们的所有位。如果任一位是1，那么结果在那里是1。因此，考虑到两个二进制数1100和1010，你会得到如下：

1100 
1010 
---- 
1110 

正如你所看到的，结果在具有1所以| 0不改变值每列都有1的数字。

但是，因为它适用于整数的二进制表示形式，所以JavaScript在应用它之前将其数字更改为整数。这意味着2.3 | 0在JavaScript中是2。

您必须确保数字填充正确，因为颜色格式需要六位数字。也就是说，#00F000是有效的，其中#F000不是。

它的工作方式很简单。假设你通过34作为你的颜色编号。 0x22是"22"作为基数为16的字符串。（toString(n)在一个数字上的呼叫返回基于n的数字的表示。）这是而不是有效的颜色，因为颜色需要六位数字后#（在CSS中可以也有三个，但这并不重要）。所以他们所做的是首先添加五个0作为一个字符串。这意味着"22"变成"0000022"。最后，从这个最后的六个字符：000022。 （调用substr，从字符串末尾开始计算负索引。）这给它们一个有效的颜色。

所以，把他们放在一起，行

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

带您传递的数量，把它变成一个整数，(color | 0)，把它变成一个十六进制的字符串.toString(16)，垫它与一堆零，取最后填充字符串中的六个字符，并将其前置#。

这实际上是一个相当聪明和优雅的写这个函数的方法。