JavaScript おれおれ Advent Calendar 2011 – 8日目

CSSで色を表現する方法の一つにカラーコードというものがありまして、#55CC2Aみたいな感じで色を表現できますね。光の三原色RGB (Red, Green, Blue)を2桁の16進数で表現して連結したものです。

これをJavaScriptから扱うなら、そのまま16進数で0x55CC2Aみたいに扱うと見た目が似ていて楽チンそうです。（ちなみにアルファベットは大文字でも小文字でも可。）

この中から一色分だけ取得したりするには、ビット演算でムニャムニャするのが良いです。

（あるいはrgb()の形の表現でも良いでしょう。）

先に結論

// 取得
var code = 0x55cc2a;
var red   = code >> 16;         // => 0x55
var green = code >>  8 & 0xff;  // => 0xcc
var blue  = code       & 0xff;  // => 0x2a

console.log(red.toString(16));
console.log(green.toString(16));
console.log(blue.toString(16));

// 作成
var red   = 0x55;
var green = 0xcc;
var blue  = 0x2a;
var code = (red << 16) + (green << 8) + blue;  // 0x55cc2a

console.log(code.toString(16));

ビット演算をもりもり使ってますね。

(さらに…)

JavaScript おれおれ Advent Calendar 2011 – 6日目

ビット演算のOR|で一発です。

var source = -12.3;  // 実数
var result = source | 0;  // => -12

var source = "010";  // 文字列
var result = source | 0;  // => 10

これだけで実数→整数も文字列→整数も行けますし、文字列が"12a"でも"xxx"でもNaNにもなりません。

ビット演算はOR|の他にAND&とXOR^、単項のNOT~がありますが、JavaScriptではいずれも辺々を数値化し整数化してから、演算を実行します。

また0はビットが全てゼロですから、それとのORを取っても元の数値と同じ数値が返ってきます。こうして、結果的に整数化する事ができました。

ぱっと見は分かりづらいので、コメントを書くとか、まあ工夫してください。