ฟังก์ชัน DataView.getUint32() ใน JavaScript

DataView.getUint32() คืออะไร

เมธอด DataView.prototype.getUint32() ใช้สำหรับ อ่านค่าจำนวนเต็มไม่มีเครื่องหมาย 32-bit (unsigned 32-bit integer) จากตำแหน่งที่กำหนดใน DataView ค่าที่อ่านได้จะอยู่ในช่วง 0 ถึง 4,294,967,295 (0x00000000 - 0xFFFFFFFF)

ไวยากรณ์ (Syntax)

dataView.getUint32(byteOffset [, littleEndian])

• byteOffset - ตำแหน่งเริ่มต้นในหน่วยไบต์ (0-indexed)
• littleEndian (optional) - true = little-endian, false = big-endian (default: false)

คืนค่า: จำนวนเต็มไม่มีเครื่องหมาย 32-bit (0 - 4294967295)

ตัวอย่างการใช้งาน

ตัวอย่างที่ 1: การอ่านค่าพื้นฐาน

const buffer = new ArrayBuffer(8);
const view = new DataView(buffer);

view.setUint32(0, 45544);
console.log(view.getUint32(0)); // 45544

ตัวอย่างที่ 2: Endianness Handling

const buffer = new ArrayBuffer(8);
const view = new DataView(buffer);
const value = 0x12345678; // 305419896

view.setUint32(0, value, false); // big-endian
view.setUint32(4, value, true);  // little-endian

console.log('BE:', view.getUint32(0, false).toString(16)); // 12345678
console.log('LE:', view.getUint32(4, true).toString(16));  // 12345678
console.log('Wrong:', view.getUint32(0, true).toString(16)); // 78563412

ตัวอย่างที่ 3: การแปลงค่า Float

const buffer = new ArrayBuffer(4);
const view = new DataView(buffer);

view.setUint32(0, 455.44); // truncate -> 455
console.log(view.getUint32(0)); // 455

ตัวอย่างที่ 4: IPv4 Address Unpacking

function unpackIPv4(buffer, offset = 0) {
  const view = new DataView(buffer);
  const num = view.getUint32(offset, false); // network byte order = big-endian
  
  return [
    (num >>> 24) & 0xFF,
    (num >>> 16) & 0xFF,
    (num >>> 8) & 0xFF,
    num & 0xFF
  ].join('.');
}

function packIPv4(ip) {
  const parts = ip.split('.').map(Number);
  if (parts.length !== 4 || parts.some(p => p < 0 || p > 255)) {
    throw new Error('Invalid IPv4');
  }
  const buffer = new ArrayBuffer(4);
  const view = new DataView(buffer);
  const num = (parts[0] << 24) | (parts[1] << 16) | (parts[2] << 8) | parts[3];
  view.setUint32(0, num, false);
  return buffer;
}

const packed = packIPv4('192.168.1.100');
console.log(unpackIPv4(packed)); // 192.168.1.100

ตัวอย่างที่ 5: Color Packing (ARGB/RGBA)

function packColor(r, g, b, a = 255) {
  // RGBA packed into uint32 (little-endian common in graphics)
  return (r << 24) | (g << 16) | (b << 8) | a;
}

function unpackColor(color, littleEndian = true) {
  const buffer = new ArrayBuffer(4);
  const view = new DataView(buffer);
  view.setUint32(0, color, littleEndian);
  
  if (littleEndian) {
    return {
      r: view.getUint8(3),
      g: view.getUint8(2),
      b: view.getUint8(1),
      a: view.getUint8(0)
    };
  } else {
    return {
      r: view.getUint8(0),
      g: view.getUint8(1),
      b: view.getUint8(2),
      a: view.getUint8(3)
    };
  }
}

const color = packColor(255, 128, 64, 200);
console.log(unpackColor(color)); // { r: 255, g: 128, b: 64, a: 200 }

ตัวอย่างที่ 6: อ่านค่าที่ยังไม่ได้ตั้งค่า

const buffer = new ArrayBuffer(4);
const view = new DataView(buffer);
console.log(view.getUint32(0)); // 0

Endianness และ Network Byte Order

Big-endian (false) = Network Byte Order - มาตรฐานสำหรับ internet protocols

// TCP/IP, UDP, DNS, HTTP/2, etc. ใช้ big-endian
const view = new DataView(buffer);
const port = view.getUint16(0, false); // port ใน network order
const ip = view.getUint32(2, false);   // IPv4 address

กรณีการใช้งานทั่วไป

• Network programming: IPv4 addresses, protocol headers, message lengths
• File formats: PNG (chunk length, CRC32), ZIP, MP4, ELF
• Graphics: Packed colors (ARGB, RGBA), texture data
• Hashing/Checksums: CRC32, Adler-32, FNV-1a (32-bit)
• Serialization: 32-bit unsigned integers
• WebAssembly: รับส่ง u32
• ID systems: 32-bit unique identifiers

กรณีพิเศษและข้อผิดพลาด

• โยน RangeError หาก byteOffset ติดลบ หรือ byteOffset + 4 > byteLength
• ค่าที่เขียนด้วย setUint32 จะถูก modulo 2^32
• JavaScript number สามารถแทนค่า uint32 ได้หมดช่วง (ไม่เกิน 2^53)
• Endianness ต้องตรงกับที่เขียน มิฉะนั้นจะได้ค่าผิด