More appropriate way to loop over hex values

Question

I'm populating a container with different symbols using an icon font. I want to know if there is a better way to iterate through hexadecimal values than to create a custom array and do it like this:

var hexPlaceValue1=0, hexPlaceValue2=0;
var hexArray = ['0','1','2','3','4','5','6','7','8','9','a','b','c','d','e','f'];

for(var i=0;i through something;i++){
    if(hexPlaceValue1 == 15) {
        var $glyph = $('<div class="glyph" data-glyph-index="' + i + '">&#xe' + String('00' + hexArray[hexPlaceValue2] + hexArray[hexPlaceValue1]).slice(-3) + ';</div>');
        hexPlaceValue1 = 0;
        hexPlaceValue2++;
    } else {
        var $glyph = $('<div class="glyph" data-glyph-index="' + i + '">&#xe' + String('00' + hexArray[hexPlaceValue2] + hexArray[hexPlaceValue1]).slice(-3) + ';</div>');
        hexPlaceValue1++;
    }
}

Obviously, this can lead to problems if more icons are introduced (granted, it would have to be a lot.) I just want to know if there is an more efficient way of doing this.

score 2 · Answer 1 · answered Jun 08 '17 at 14:45

Javascript, like most (all?) programing languages, knows how to handle Hexadecimal.

for (i=0x0; i < 0x30; i++) { print("0x0" + i.toString(16) +" = " + i) }

Output:

0x00 = 0
0x01 = 1
0x02 = 2
0x03 = 3
0x04 = 4
0x05 = 5
0x06 = 6
0x07 = 7
0x08 = 8
0x09 = 9
0x0a = 10
0x0b = 11
0x0c = 12
0x0d = 13
0x0e = 14
0x0f = 15
0x010 = 16
[...]
0x026 = 38
0x027 = 39
0x028 = 40
0x029 = 41
0x02a = 42
0x02b = 43
0x02c = 44
0x02d = 45
0x02e = 46
0x02f = 47

And then one can play with padding, see google or this question: Pad a number with leading zeros in JavaScript

Matt · Accepted Answer · 2014-02-05T17:54:56.687

0

Based on the logic in your for loop, it looks essentially like you want to do:

for(var i=0;i through something;i++) {
   var hex = '&#x' + (0xe000|i).toString(16);
   var $glyph = $('<div class="glyph" data-glyph-index="'+i+'">'+hex+';</div>');
}

As long as i<4096 (0x1000) then the most significant hex digit remains as e.

edited Feb 05 '14 at 17:54

answered Feb 04 '14 at 20:47

Matt

18,194
1
49
61

Can you explain this syntax: `(0ex000|i)` – smilebomb Feb 05 '14 at 17:58
1

@jefffabiny Anything preceded by `0x` denotes a [hexadecimal number](http://en.wikipedia.org/wiki/Hexadecimal). `|` is a [bitwise OR](http://en.wikipedia.org/wiki/Bitwise_operation#OR) operator. Basically `(0xe000|i).toString(16)` will take `i`, convert it to hexadecimal, 0-pad it to 3 characters, and prepend an `e`. The same as your loop was doing. Hope that helps. – Matt Feb 05 '14 at 18:03

score 0 · Answer 3 · answered Feb 04 '14 at 20:53

0

You can iterate over ascii codes like this instead of having hardcoded array:

// Instead of this
// var hexArray = ['0','1','2','3','4','5','6','7','8','9','a','b','c','d','e','f'];

// You can use this:
for (var i=48; i<71; i++){
    console.log( i, String.fromCharCode(i) );
    // Skip 58 to 64 char codes as they are non alphanumeric
    if (i == 57) i =64;
}

You can find char code tables on the internet, here is one link

answered Feb 04 '14 at 20:53

Goran.it

5,001
2
19
25

He's using `` notation because he's using a font, a font may have a drawing < 32 (not printable) or at another character forbidden in HTML (he's not limited AFAWK at alphanumeric characters). He can't just simply use `String.fromCharCode` for this. – Adriano Repetti Feb 04 '14 at 20:56
I know that, I've just added a sample how to replace initial hardcoded array. – Goran.it Feb 04 '14 at 20:57

More appropriate way to loop over hex values

3 Answers3