💾bitview()

show 32-bit representation of signed integers.

JS ⟩ statement ⟩ expression ⟩ operator ⟩ arithmetic ⟩ bitwise ⟩ bitview

show the 32-bit representation of an signed integer. 👉 2's complement

bitview(1234).indexed
// ₁|⁹⁸⁷⁶⁵₄₃₂₁|⁹⁸⁷⁶⁵₄₃₂₁|⁹⁸⁷⁶⁵₄₃₂₁|
// --------------------------------
// 00000000000000000000010011010010    //  1234

bitview(~1234).raw
// 11111111111111111111101100101101    // ~1234 (bits inverted)

bitview(-1234).raw
// 11111111111111111111101100101110    // -1234 (= ~x + 1)

💾 程式

• replit： bitview()

// 📅 last updated: 2022.11.05

// bit view
function bitview(n, { 
    bits = 32,              // number of bits
    leadingZeros = true,    // keep leading zeros or not
} = {}) {

    const n0 = n;    // save original number
    let view = '';

    for (let i = 0; i < bits; i++) {
        let bit = n & 1;
        view = bit + view;
        n >>= 1;
    }

    const number = (!leadingZeros) ? n0 : undefined;

    // remove leading zeros if needed
    if (!leadingZeros) view = +view + '';
        
    // return object
    let result = {
        raw: `${view}`,
        // indexed: `${positions}\n${view}`,
        equation: `(${n0})₁₀ = (${view})₂`,
    };

    // result.indexed
    Object.defineProperty(result, 'indexed', {
        get() {
            const positions = bitIndices({number: number});
            return `${positions}\n${view}`;
        }
    })

    // return an object: {raw: , indexed: , equation: }
    return result;
}

// bit position
function bitIndices({
    bits = 32,    // number of bits
    number,       // let nunber decide # of bits
} = {}) {

    const digit = [
        '₀', '₁', '₂', '₃', '₄',
        '⁵', '⁶', '⁷', '⁸', '⁹',
    ];

    let result = '';
    let i = 0;            // position index
    
    // let `number` decide # of bits
    if (number !== undefined) 
        bits = bitview(number, {leadingZeros: false}).raw.length;
    
    let n = bits;
    while (n > 0) {
        result = (i === 0 ? '|' : digit[i]) + result;
        n -= 1;
        i += 1;
        if (i > 9) i = 0;
    }

    return result + `\n${'-'.repeat(bits)}`;
}

// export
module.exports = { bitview, bitIndices };

💈範例

• replit： bitview()

const { bitview, bitIndices } = require('./helpers/bitwise.js');

// ⭐ test 32-bit signed integers
const M = 2 ** 32;           // 4294967296
const m = M/8;               //  536870912

// log
[
    bitview(M).indexed,   
    // ₁|⁹⁸⁷⁶⁵₄₃₂₁|⁹⁸⁷⁶⁵₄₃₂₁|⁹⁸⁷⁶⁵₄₃₂₁|
    // --------------------------------
    // 00000000000000000000000000000000    // M = 2^32
    
    bitview(m).indexed,    
    // ₁|⁹⁸⁷⁶⁵₄₃₂₁|⁹⁸⁷⁶⁵₄₃₂₁|⁹⁸⁷⁶⁵₄₃₂₁|
    // --------------------------------
    // 00100000000000000000000000000000    // m = M/8
    
    bitview(1234, {leadingZeros: false}).indexed,
    // |⁹⁸⁷⁶⁵₄₃₂₁|
    // -----------
    // 10011010010                         // 1234
    
    bitview(1234).indexed,
    bitview(~1234).raw,
    bitview(-1234).raw,
    // ₁|⁹⁸⁷⁶⁵₄₃₂₁|⁹⁸⁷⁶⁵₄₃₂₁|⁹⁸⁷⁶⁵₄₃₂₁|
    // --------------------------------
    // 00000000000000000000010011010010    //  1234
    // 11111111111111111111101100101101    // ~1234 (bits inverted)
    // 11111111111111111111101100101110    // -1234 (= ~x + 1)
    
    bitIndices({number: 1234}),
    // |⁹⁸⁷⁶⁵₄₃₂₁|
    // -----------
    bitview(1234, {leadingZeros: false}).raw,
    // 10011010010                         // 1234
    (1234).toString(2),                    // (same as above, but shorter)
    // 10011010010                         // 1234
    
    bitIndices(),                          // 32-bit bit indices
    // ₁|⁹⁸⁷⁶⁵₄₃₂₁|⁹⁸⁷⁶⁵₄₃₂₁|⁹⁸⁷⁶⁵₄₃₂₁|
    // --------------------------------
    
    bitview(-1).raw,
    // 11111111111111111111111111111111    // -1
    
    bitview(-2).equation,
    // (-2)₁₀ = (11111111111111111111111111111110)₂
    
    bitview(3, {leadingZeros: false}).equation,
    // (3)₁₀ = (11)₂

    '--------------------',

    // ❗ toString(2) doesn't show 2's complement for negative integers.
                                           // ┌─ ❗ minus sign (-) is kept.
    (-12).toString(2),                     // -1100    (what the ❗)
    (~~(-12)).toString(2),                 // -1100    (what the ❗)

    bitview(-1234).indexed,
    // ₁|⁹⁸⁷⁶⁵₄₃₂₁|⁹⁸⁷⁶⁵₄₃₂₁|⁹⁸⁷⁶⁵₄₃₂₁|
    // --------------------------------
    // 11111111111111111111101100101110    // -1234
    
    (-1234).toString(2),                   // -10011010010
    (-1234).toString(2).length,            // 12
    
].forEach(x => console.log(x));

🧨 雷區

num.toString(2) doesn't show 2's complement for negative integers❗

                              // ┌─ ❗ minus sign (-) is kept.
(-12).toString(2),            // -1100    (what the ❗)
(~~(-12)).toString(2),        // -1100    (what the ❗)

👥 相關

• bitwise not (~) - inverts the bits.

• double tilde (~~) - nearest integer towards 0.

📗 參考

• JavaScript: The Definitive Guide ⟩ 4.8.3 Bitwise Operators

• Cornell ⟩ Two's Complement

• Wikipedia ⟩ modulo operation, modular arithmetic

• Mastering JS ⟩ How to Trim Leading Zeros from a String in JavaScript

📘 手冊

• Bitwise NOT (~) - invert bits.

• Number.prototype.toString() - specify the radix.

🗣 討論

• Remove/ truncate leading zeros by javascript/jquery