最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

Javascript - Converting colors (numbers -> strings) vice versa - Stack Overflow

programmeradmin1浏览0评论
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.

Share Improve this question edited Nov 5, 2020 at 10:22 peterh 1 asked Mar 14, 2012 at 3:53 VennsohVennsoh 5,0016 gold badges30 silver badges42 bronze badges
Add a ment  | 

1 Answer 1

Reset to default 7

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

发布评论

评论列表(0)

  1. 暂无评论