26

16進数（実際には16進数）を表す文字列を受け取り、それらを追加するコードがいくつかあります。たとえば、を追加する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'

連結後も16進値は文字列0xであるため、数値に変更してから追加し、16進形式に戻す必要があります。#追加する数値が最初に16進文字列である場合、またはこれがすべて開始する前に16進色からを削除することを考慮に入れる場合は、さらに多くの手順があります。

確かに、そのような単純な16進計算を行うためのより簡単な方法があります！(parseInt("0x"+"aaaaaa",16)+0x010101).toString(16)明確にするために、速記のようにすべてを1行にまとめるだけではなく、実際に実行する操作を減らすことを意味します。

JavaScriptを取得して、すべての数学演算で10進数の使用を停止し、代わりに16進数を使用する方法はありますか？または、JSをhexでより簡単に動作させる他の方法はありますか？

4

4 に答える 4

37

いいえ、デフォルトで 10 進数ではなく 16 進整数形式を使用するように 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
于 2012-06-13T21:32:48.360 に答える
12

これはどう：

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

parseInt を使用する場合、0x プレフィックスを追加する必要はありません。

于 2012-06-13T21:00:08.213 に答える
7

受け入れられた答えは間違っていると思います。16 進数の色表現は線形ではありません。代わりに、R、G、B に 2 つの文字の 3 つのセットが与えられます。

そのため、整数を足すだけで RGB が正しく足し算されると期待することはできません。

For Example

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

これらの数値を追加すると、緑がより緑になります。緑を追加しても、赤が増加するはずはありません。しかし、受け入れられた答えが行っていることを行うことで、整数を1つの数値として扱うだけで、合計がfよりも大きい数値、f + 1 = 10を繰り越すことができます。

you get `015400` so by adding greens the RED increased .... WRONG

005500 + 00ff00 を追加すると、= 00ff00 になります。最大緑にさらに緑を追加することはできません。

于 2018-02-20T23:59:34.633 に答える