[TSxJS] ทำงานกับตัวเลข อย่าเขียนติดกัน ใช้ Numeric Separators ช่วยได้

มาใช้ Underscore (_) เป็นตัวแบ่งตัวเลขกันนะ อ่านงานสบายตา เชื่อผมสิ [Numeric Separators]

เชื่อว่าหลาย ๆ คน ที่ใช้ JavaScript และ TypeScript น่าจะต้องทำงานกับตัวเลขเป็นปกติ อยู่แล้ว และแน่นอนว่า บางครั้งจะต้องพบกับความน่าปวดหัว เมื่อเจอกับเลขหลักพันขึ้นไป เราจะต้องพิมพ์ตัวเลขติด ๆ กันไป ทำให้เราอ่านได้ยากมาก

เจอแบบนี้ก็แย่สิ

อย่าพึ่งท้อแท้ใจไปครับ การมาของ ECMAScript ES2021/ES12 ก็ได้ มี Feature เรื่อง Numeric Separators เพิ่มขึ้นมา ช่วยให้เราสามารใช้ Underscore (_) เพื่อไปแบ่งหลักข้อมูลประเภทที่เป็น Number ได้ทั้งหมด

ECMAScript ES2021/ES12 มี Feature เรื่อง Numeric Separators เพิ่มขึ้นมา

สำหรับการใช้งานก็เพียงแค่ใช้ Underscore (_) เป็นตัวแบ่งหลัก สามารถใช้ได้กับตัวเลขที่อยู่หน้า และหลังทศนิยมครับ

// A decimal integer literal with its digits grouped per thousand:
1_000_000_000_000

// A decimal literal with its digits grouped per thousand:
1_000_000.220_720

// A binary integer literal with its bits grouped per octet:
0b01010110_00111000

// A binary integer literal with its bits grouped per nibble:
0b0101_0110_0011_1000

// A hexadecimal integer literal with its digits grouped by byte:
0x40_76_38_6A_73

// A BigInt literal with its digits grouped per thousand:
4_642_473_943_484_686_707n

การใช้งาน

สำหรับในปัจจุบัน (2022–05–14) Modern Web Browser แทบทุกตัวใช้งานได้ทันที ส่วน Node.js ก็ที่ Version 16 ขึ้นไปครับ ใช้ได้แน่นอน (อันที่จริงใช้ได้ตั้งแต่ 12 กว่า ๆ แล้วครับ)

ใช้เถอะครับ จะได้ไม่ลำบากภายหลัง แต่ถ้าเป็นท่ายากมันก็ชวนสับสนนะ

การใช้งาน ระดับ Advance (ท่ายาก)

นอกจากจะใช้เพื่อแบ่งหลักตัวเลขในแบบง่าย ๆ แล้ว ยังมีวิธีใช้งานในระดับที่ชวนสับสนได้อีกด้วย เช่น

1_000_000_000           // Ah, so a billion
101_475_938.38          // And this is hundreds of millions

let fee = 123_00;       // $123 (12300 cents, apparently)
let fee = 12_300;       // $12,300 (woah, that fee!)
let amount = 12345_00;  // 12,345 (1234500 cents, apparently)
let amount = 123_4500;  // 123.45 (4-fixed financial)
let amount = 1_234_500; // 1,234,500

0.000_001 // 1 millionth
1e10_000  // 10^10000 -- granted, far less useful / in-range...

สามารถศึกษาเพิ่มเติมได้ ที่นี่

References

[embed]grammar: Numeric separators (1_000_000_000_000) | Can I use... Support tables for HTML5, CSS3… "Can I use" provides up-to-date browser support tables for support of front-end web technologies on desktop and mobile…caniuse.com

[embed]Numeric separators JavaScript now supports underscores as separators in numeric literals, increasing readability and maintainability of…v8.dev

[embed]GitHub - tc39/proposal-numeric-separator: A proposal to add numeric literal separators in… This is a proposal, the result of a merge between an earlier draft of itself and Christophe Porteneuve's…github.com