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在应用它之前会将数字更改为整数。这意味着JavaScript中2.3 | 0为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)的十六进制字符串，用一堆零填充它，取 last < / em>填充字符串中的六个字符，并在其前面添加#。

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

Javascript - 转换颜色（数字 - ＆gt;字符串）反之亦然

1 个答案: