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 中的一個實用函數，可以在數字和字符串之間來回轉換顏色。 有兩個部分我不太確定：

1. return (color|0);什么return (color|0); 意思？ 什么是| ? 在 JavaScript 中？

2. 在行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，該列中有一個 1。所以| 0 | 0不會改變數字的值。

但是，因為它使用integers的二進制表示，所以 JavaScript 在應用它之前將數字更改為整數。 這意味着2.3 | 0 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)的十六進制字符串，用一堆零填充它，從填充的字符串中獲取最后六個字符，然后在它前面加上一個# 。

這實際上是編寫此函數的一種相當聰明和優雅的方式。