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)，墊它與一堆零，取最後填充字符串中的六個字符，並將其前置#。

這實際上是一個相當聰明和優雅的寫這個函數的方法。