在 Javascript 中更轻松地处理十六进制字符串和十六进制值

新手上路,请多包涵

我有一些代码采用表示十六进制数字的字符串 - 实际上是十六进制颜色 - 并将它们相加。例如,添加 aaaaaa010101 给出输出 ababab

但是,我的方法似乎不必要地冗长和复杂:

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

0x 拼接后的十六进制值还是一个字符串,所以我要把它改成一个数字, 然后 我可以加,然后我必须把它改 十六进制格式!如果我添加到它的数字是一个十六进制字符串开头,或者如果您考虑到我在所有这些开始之前从十六进制颜色中删除了 # ,则还有更多步骤。

肯定有更简单的方法来进行这种简单的十六进制计算!需要说明的是,我的意思并不是像 (parseInt("0x"+"aaaaaa",16)+0x010101).toString(16) 那样将所有内容都放在一行中,或者使用速记 - 我的意思是实际上做的操作更少。

有什么方法可以让 javascript 停止在其所有数学运算中使用十进制并改用十六进制吗?或者是否有其他方法可以使 JS 更容易地使用十六进制?

原文由 brentonstrine 发布,翻译遵循 CC BY-SA 4.0 许可协议

阅读 1.3k
2 个回答

不,没有办法告诉 JavaScript 语言默认使用十六进制整数格式而不是十进制。您的代码尽可能简洁,但请注意,当您将“parseInt”与一个基数一起使用时,您不需要在前面加上“0x”基数指示符。

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

 function addHexColor(c1, c2) {
  var hexStr = (parseInt(c1, 16) + parseInt(c2, 16)).toString(16);
  while (hexStr.length < 6) { hexStr = '0' + hexStr; } // Zero pad.
  return hexStr;
}

addHexColor('aaaaaa', '010101'); // => 'ababab'
addHexColor('010101', '010101'); // => '020202'

正如一位评论者所提到的,上面的解决方案充满了问题,因此下面是一个函数,它进行适当的输入验证并在检查溢出时分别添加颜色通道。

 function addHexColor2(c1, c2) {
  const octetsRegex = /^([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/i
  const m1 = c1.match(octetsRegex)
  const m2 = c2.match(octetsRegex)
  if (!m1 || !m2) {
    throw new Error(`invalid hex color triplet(s): ${c1} / ${c2}`)
  }
  return [1, 2, 3].map(i => {
    const sum = parseInt(m1[i], 16) + parseInt(m2[i], 16)
    if (sum > 0xff) {
      throw new Error(`octet ${i} overflow: ${m1[i]}+${m2[i]}=${sum.toString(16)}`)
    }
    return sum.toString(16).padStart(2, '0')
  }).join('')
}

addHexColor2('aaaaaa', 'bogus!') // => Error: invalid hex color triplet(s): aaaaaa / bogus!
addHexColor2('aaaaaa', '606060') // => Error: octet 1 overflow: aa+60=10a

原文由 maerics 发布,翻译遵循 CC BY-SA 4.0 许可协议

这个怎么样:

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

如果使用 parseInt,则无需添加 0x 前缀。

原文由 HBP 发布,翻译遵循 CC BY-SA 3.0 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题