Javascript - 转换颜色（数字 - >字符串）反之亦然 [英] Javascript - Converting colors (numbers -> strings) vice versa

问题描述

  utils.parseColor = function（color，toNumber）{
 if（toNumber === true）{
 if（typeof color ==='number' ）{
 return（color | 0）; // cut off decimal 
} 
 if（typeof color ==='string'&& color [0] ==='＃'）{
 color = color.slice 1）; 
} 
 return window.parseInt（color，16）; 
} else {
 if（typeof color ==='number'）{
 //确保我们的十六进制数填充了
 color ='＃'+（'00000 '+（color | 0）.toString（16））。substr（-6）; 
} 
 
返回颜色; 
} 
}; 
  

我遇到这段代码。它是JavaScript中的一个实用函数，它将在数字和字符串之间来回转换颜色。有两个部分，我不太确定，

首先，
return（color | 0） code>是什么意思？什么是 | ？

  color =' ＃'+（'00000'+（color | 0）.toString（16））。substr（-6）; 
  

为什么我需要确保十六进制数字已填充？

---

使用 utils的十六进制数调用函数。 parseColor（0xFFFF00），返回字符串
value：＃ffff00。传递CSS样式十六进制字符串会返回未修改的相同字符串。
函数还接受第二个可选参数 toNumber ，如果设置为 true ，则返回numeric
颜色值。例如，调用 utils.parseColor（＃FFFF00，true）或
utils.parseColor（0xFFFF00，true），都返回 16776960 。

谢谢，
Venn。 >

解决方案

| 在这种情况下，它所做的就是强制数字为整数。

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

  1100 
 1010 
 ---- 
 1110 
  

正如你所看到的，结果是每个列有一个1.因此 | 0 不会更改数字的值。

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

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

它的工作原理很简单。假设您输入 34 作为颜色编号。 0x22 是以基本16中的字符串形式的22（调用 toString n）对数字的返回表示基数 n 中的数字。）这是不是颜色需要在＃后面有六位数字（在CSS中，你也可以有三个，但这不重要）。所以他们做的是首先添加五个0作为字符串。这意味着22变为0000022。最后，从这里取最后六个字符： 000022 。 （调用 substr ，从字符串结尾算起一个负索引。）这给它们一个有效的颜色。

  color ='＃'+（'00000'+（color | 0） .toString（16））。substr（-6）; 
  

使用您传入的数字，将其转换为整数 | 0），将它转换为一个十六进制字符串与 .toString（16），填充一堆零，最后六个字符，并在其前面添加＃。

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

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;
  }
};

Hey guys, I encounter this piece of code. It is a utility function in JavaScript that will convert colors back and forth between numbers and strings. There are 2 parts that I am not so sure of,

First, What does return (color|0); mean? What is |? in JavaScript?

Secondly, in the line

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

why do I need to make sure the hexadecimal number is padded out? What are we trying to achieve here?

---

Calling the function with a hexadecimal number like utils.parseColor(0xFFFF00), returns the string value: "#ffff00". Passing a CSS-style hexadecimal string returns the same string unmodified. The function also accepts a second, optional, parameter toNumber, which if set to true, returns a numeric color value. For example, calling utils.parseColor("#FFFF00", true) or utils.parseColor(0xFFFF00, true), both return the number 16776960.

Thanks, Venn.

解决方案

| in JavaScript is bitwise OR. In this case, all it does is force the number to be an integer.

Bitwise OR takes two numbers and compares all their bits. If either bit is a 1, the result has a 1 there. So, given the two binary numbers 1100 and 1010 you would get the following:

1100
1010
----
1110

As you can see, the result has a 1 in every column that has a 1. So | 0 does not change the value of the number.

However, because it works with the binary representation of integers, JavaScript changes the number to an integer before applying it. This means that 2.3 | 0 is 2 in JavaScript.

You have to make sure the number is padded properly because the color format expects six digits. That is, #00F000 is valid where #F000 is not.

The way it works is simple. Lets say you pass in 34 as your color number. 0x22 is "22" as a string in base 16. (The call to toString(n) on a number returns the representation of the number in base n.) This is not a valid color because colors need six digits after the # (in CSS you can also have three, but that's not important). So what they do is first add five 0s as a string. This means "22" becomes "0000022". Finally, the take the last six characters from this: 000022. (Calling substr with a negative index counts from the end of the string.) This gives them a valid color.

So, putting it all together, the line

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

takes the number you passed in, turns it into an integer with (color | 0), turns it into a hexadecimal string with .toString(16), pads it with a bunch of zeroes, takes the last six characters from the padded string and prepends a # to it.

This is actually a fairly clever and elegant way to write this function.

这篇关于Javascript - 转换颜色（数字 - >字符串）反之亦然的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！