我有一些代码,它采用表示十六进制数字的字符串(实际上是十六进制颜色)并将它们相加。例如,添加 aaaaaa
和 010101
会得到输出 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 更轻松地使用十六进制吗?
最佳答案
不,没有办法告诉 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'
正如评论者所提到的,上述解决方案充满了问题,因此下面是一个函数,它可以进行正确的输入验证并在检查溢出时单独添加颜色 channel 。
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
关于javascript - 在 Javascript 中更轻松地处理十六进制字符串和十六进制值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11023144/