在Javascript中更容易使用十六进制字符串和十六进制值

我将获取表示十六进制数（实际上是十六进制颜色）的字符串并添加它们。因此，添加

aaaaaa

+

010101

=

abababab

。我的方法似乎过于冗长和复杂：

var hexValue = "aaaaaa";
hexValue = "0x" + hexValue;
hexValue = parseInt(hexValue , 16);
hexValue = hexValue + 0x010101;
hexValue = hexValue.toString(16);
document.write(hexValue); // outputs 'ababab'

• （JsFiddle:）

在连接

0x

之后，十六进制值仍然是一个字符串，因此我必须将其更改为数字，然后我可以添加，然后我必须将其更改回十六进制格式！如果我要添加的数字也是一个十六进制字符串，或者如果您考虑到我在所有这些开始之前从十六进制颜色中删除

#

，那么还有更多的步骤

当然有一种方法可以用更少的步骤来实现这一点！（我并不是说把所有的内容都放在一行

（parseInt（“0x”+“aaaaa”，16）+0x010101）。我的意思是，使用字符串（16）

或速记，实际上做的操作更少。）

---

有没有办法让Javascript停止在所有数学运算中使用十进制而改用十六进制？或者有其他方法可以让Javascript更容易地使用十六进制吗？

这个方法怎么样：

var hexValue=“aaaaaa”；
hexValue=（parseInt（hexValue，16）+0x010101）.toString（16）；
document.writeln（hexValue）；//输出“ababab”

否，无法告诉JavaScript语言默认使用十六进制整数格式而不是十进制格式。您的代码非常简洁，但请注意，当您使用带基的“parseInt”时，不需要在“0x”基指示符前面加上前缀

以下是我如何处理您的问题：

函数addHexColor（c1、c2）{
var hexStr=（parseInt（c1，16）+parseInt（c2，16））.toString（16）；
而（hexStr.length<6）{hexStr='0'+hexStr；}//Zero pad。
返回hextr；
}
addHexColor（'AAAAA'，'010101'）；//=>'阿巴巴
addHexColor（'010101'，'010101'）；//=>'020202'

我认为公认的答案是错误的。十六进制颜色表示不是线性的。但相反，R、G和B被赋予3组两个字符

所以你不能只加一个整数就指望RGB加起来是正确的

For Example

n1 = '005500'; <--- green
n2 = '00ff00'; <--- brighter green

---

添加005500+00ff00应导致，=00ff00。你不能在最大绿色中添加更多的绿色。

对于那些想要在不超出单个元组界限的情况下添加和减去十六进制颜色的函数的人，我几分钟前编写了这个函数来实现这一点：

export function shiftColor(base, change, direction) {
  const colorRegEx = /^\#?[A-Fa-f0-9]{6}$/;

  // Missing parameter(s)
  if (!base || !change) {
    return '000000';
  }

  // Invalid parameter(s)
  if (!base.match(colorRegEx) || !change.match(colorRegEx)) {
    return '000000';
  }

  // Remove any '#'s
  base = base.replace(/\#/g, '');
  change = change.replace(/\#/g, '');

  // Build new color
  let newColor = '';
  for (let i = 0; i < 3; i++) {
    const basePiece = parseInt(base.substring(i * 2, i * 2 + 2), 16);
    const changePiece = parseInt(change.substring(i * 2, i * 2 + 2), 16);
    let newPiece = '';

    if (direction === 'add') {
      newPiece = (basePiece + changePiece);
      newPiece = newPiece > 255 ? 255 : newPiece;
    }
    if (direction === 'sub') {
      newPiece = (basePiece - changePiece);
      newPiece = newPiece < 0 ? 0 : newPiece;
    }

    newPiece = newPiece.toString(16);
    newPiece = newPiece.length < 2 ? '0' + newPiece : newPiece;
    newColor += newPiece;
  }

  return newColor;
}

导出函数shiftColor（基本、更改、方向）{
常量colorRegEx=/^\#？[A-Fa-f0-9]{6}$/；
//缺少参数
如果（！base | |！change）{
返回“000000”；
}
//无效参数
如果（！base.match（colorRegEx）| |！change.match（colorRegEx））{
返回“000000”；
}
//删除任何“#”
底座=底座。替换（/\\\\\/g，，）；
更改=更改。替换（/\\\\\/g，，）；
//打造新的色彩
让newColor=''；
for（设i=0；i<3；i++）{
const basePiece=parseInt（base.substring（i*2，i*2+2），16）；
const changepoice=parseInt（change.substring（i*2，i*2+2），16）；
让newPiece=''；
如果（方向=='添加'）{
新件=（基本件+变更件）；
纽件=纽件>255？255：纽件；
}
如果（方向=='sub'）{
新件=（基件-换件）；
纽件=纽件<0？0：纽件；
}
newPiece=newPiece.toString（16）；
纽件=纽件。长度<2？'0'+纽件：纽件；
newColor+=新件；
}
返回新颜色；
}

---

您将基础颜色作为参数1传递，将更改作为参数2传递，然后根据您的意图将“add”或“sub”作为最后一个参数。

“让Javascript停止在所有数学运算中使用十进制，而改用十六进制”-否。JS不使用这两个参数。它实际上是二进制的。你说的是弦乐，这很好。如果将0x010101添加到0xFFFF，会发生什么情况？或者0x000100到0x00FF00-你会得到一些奇怪的结果，因为这里实际上有三个八位组对，它们应该分别求和，极限值>00。你说的一切都是真的，但我认为这更多的是一个评论而不是一个答案，因为你实际上没有提供问题的答案。如果您在这里提供了一个解决方案——正如您所描述的那样，正确地执行它——那么它甚至应该是公认的答案。事实上，我会投反对票……如果你把它改成评论或回答问题，我会很高兴地改变它。这应该是公认的答案，它实际上提供了一个有效的解决方案。

export function shiftColor(base, change, direction) {
  const colorRegEx = /^\#?[A-Fa-f0-9]{6}$/;

  // Missing parameter(s)
  if (!base || !change) {
    return '000000';
  }

  // Invalid parameter(s)
  if (!base.match(colorRegEx) || !change.match(colorRegEx)) {
    return '000000';
  }

  // Remove any '#'s
  base = base.replace(/\#/g, '');
  change = change.replace(/\#/g, '');

  // Build new color
  let newColor = '';
  for (let i = 0; i < 3; i++) {
    const basePiece = parseInt(base.substring(i * 2, i * 2 + 2), 16);
    const changePiece = parseInt(change.substring(i * 2, i * 2 + 2), 16);
    let newPiece = '';

    if (direction === 'add') {
      newPiece = (basePiece + changePiece);
      newPiece = newPiece > 255 ? 255 : newPiece;
    }
    if (direction === 'sub') {
      newPiece = (basePiece - changePiece);
      newPiece = newPiece < 0 ? 0 : newPiece;
    }

    newPiece = newPiece.toString(16);
    newPiece = newPiece.length < 2 ? '0' + newPiece : newPiece;
    newColor += newPiece;
  }

  return newColor;
}