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中的实用程序函数,可以在数字和字符串之间来回转换颜色.有两部分我不太确定,

首先,什么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中是按位OR.在这种情况下,它只是将数字强制为整数.

按位OR取两个数字并比较它们的所有位.如果任一位为1,则结果为1.因此,给定两个二进制数1100和1010,您将得到以下结果:

1100
1010
----
1110

正如您所看到的,结果在每列中都有一个1,因此| 0不会更改数字的值.

但是,因为它适用于整数的二进制表示,JavaScript在应用它之前会将数字更改为整数.这意味着2.3 | 0JavaScript 中为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),用一堆零填充它,从填充字符串中取出最后六个字符并将其添加#到其中.

这实际上是编写此函数的一种相当聪明和优雅的方式.