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

I encountered 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:

1. What does return (color|0); mean? What is |? in JavaScript?

2. 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.

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

I encountered 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:

1. What does return (color|0); mean? What is |? in JavaScript?

2. 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.

• javascript
• colors
• type-conversion
• rgb

1 Answer 1

| 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 pares 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" bees "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.