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

ต่างจาก getFloat64() ที่ตรงกับ JavaScript number โดยตรง getFloat32() มี precision ต่ำกว่า และต้องแปลงกลับเป็น JavaScript number (ซึ่งเป็น float64) ตอนอ่าน

ไวยากรณ์ (Syntax)

dataView.getFloat32(byteOffset [, littleEndian])

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

คืนค่า: จำนวนจริง 32-bit แปลงเป็น JavaScript number (float64)

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

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

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

view.setFloat32(0, Math.LOG2E); // ~1.4426950408889634
console.log(view.getFloat32(0)); // 1.4426950216293335

สังเกต: ค่าที่ได้ 1.4426950216293335 แตกต่างจากค่า Math.LOG2E จริง 1.4426950408889634 เพราะความแม่นยำของ float32 ต่ำกว่า (precision loss)

ตัวอย่างที่ 2: การเขียนและอ่านค่าต่างๆ

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

view.setFloat32(0, 3.14159);
view.setFloat32(4, -123.456);
view.setFloat32(8, 1.5e10);
view.setFloat32(12, 1e-5);

console.log(view.getFloat32(0)); // 3.141590118408203
console.log(view.getFloat32(4)); // -123.45600128173828
console.log(view.getFloat32(8)); // 15000000000 (precision loss)
console.log(view.getFloat32(12)); // 0.000010000000000000001

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

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

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

console.log(view.getFloat32(0, false)); // 1.5
console.log(view.getFloat32(4, true));  // 1.5

ตัวอย่างที่ 4: ค่าพิเศษ

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

view.setFloat32(0,  Infinity);
view.setFloat32(4, -Infinity);
view.setFloat32(8,  NaN);
view.setFloat32(12, -0);

console.log(view.getFloat32(0));  // Infinity
console.log(view.getFloat32(4));  // -Infinity
console.log(view.getFloat32(8));  // NaN
console.log(view.getFloat32(12)); // 0 (แต่เป็น -0)

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

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

IEEE 754 Binary32 (Single Precision) Format

32-bit แบ่งเป็น:

• 1 bit - Sign (S)
• 8 bits - Exponent (E) - bias = 127
• 23 bits - Mantissa/Significand (M) - implicit leading 1

ค่า = (-1)^S × 1.M × 2^(E-127)

Precision Comparison: Float32 vs Float64

const exact = Math.PI; // 3.141592653589793 (float64)

const buf32 = new ArrayBuffer(4);
const view32 = new DataView(buf32);
view32.setFloat32(0, exact);
console.log('float32:', view32.getFloat32(0)); // 3.1415927410125732 (error ~8.7e-8)

const buf64 = new ArrayBuffer(8);
const view64 = new DataView(buf64);
view64.setFloat64(0, exact);
console.log('float64:', view64.getFloat64(0)); // 3.141592653589793 (exact)

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

• WebGL / WebGPU: Vertex attributes, uniforms, textures (GPU ใช้ float32 เป็นหลัก)
• WebAssembly: รับส่ง f32 ระหว่าง JS และ WASM
• Graphics/Shaders: Color values, coordinates, normals
• Audio processing: 32-bit float audio samples (professional audio)
• Memory efficiency: ประหยัดหน่วยความจำ 50% เทียบ float64
• File formats: WAV (float32), EXR, glTF, USD

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

• โยน RangeError หาก byteOffset ติดลบ หรือ byteOffset + 4 > byteLength
• คืนค่า NaN หากอ่านจากตำแหน่งที่ไม่มีข้อมูล
• Precision loss เมื่อแปลงจาก float64 (JS number) -> float32 -> float64
• Endianness ต้องตรงกับรูปแบบที่เขียนไว้