มาลองแปลงค่าตัวเลขเป็นสกุลเงินต่างๆ ด้วยคำสั่ง "Intl.NumberFormat" ใน ภาษา JavaScript กันเถอะ!

Panupat Top — Mon, 27 Jul 2020 11:36:34 +0000

ในภาษา JavaScript มีคำสั่ง Intl.NumberFormat ที่ใช้สำหรับแปลงตัวเลขเป็นค่าต่างๆ เพื่อให้ได้ผลลัพธ์ที่เราต้องการ โดยในตัวอย่างนี้ เราจะมาแปลงตัวเลขให้กลายเป็นสกุลเงินของแต่ละประเทศด้วยคำสั่ง Intl.NumberFormat แบบง่ายๆกันครับ

ก่อนอื่นเรามาทำความรู้จักกับคำสั่งนี้ในแบบพื้นฐานง่ายๆ โดยไม่ต้องกำหนด option อะไรทั้งสิ้น ดังตัวอย่างข้างล่างนี้ครับ

const money = 3500;
const result = Intl.NumberFormat().format(money);

console.log(result); // "3,500"

จากผลลัพธ์ดังกล่าวจะสังเกตเห็นว่ามันทำการแปลง number เป็น string และเปลี่ยนรูปแบบ format โดยเพิ่มลูกน้ำเข้ามา

จากตัวอย่างก่อนหน้า เราได้เรียนรู้การใช้งานพื้นฐานของคำสั่งนี้แล้ว ทีนี้เราจะมากำหนด option เพื่อเพิ่มความสามารถให้กับคำสั่งนี้กัน โดยเราจะเขียนคำสั่งให้แปลงค่าจาก "ตัวเลข" ไปเป็น "สกุลเงิน" ของแต่ละประเทศกันครับ

โดยสิ่งที่เราต้องกำหนดก่อนเรียกใช้ จะมีด้วยกัน 3 ค่าหลักๆ ได้แก่

locale พื้นที่ประเทศที่เราจะใช้ เช่น 'th-TH', 'en-US'
currency สกุลเงินที่เราจะแสดง เช่น 'THB', 'USD'
style รูปแบบที่เราเรียกใช้ เช่น 'currency', 'unit'

const money = 555000;

const result = Intl.NumberFormat('th-TH', {
  style: 'currency',
  currency: 'THB',
}).format(money);

console.log(result); // "฿555,000.00"

จากผลลัพธ์ดังกล่าวเราจะได้รูปแบบที่เป็น "สกุลเงินไทยบาท" และแสดงตำแหน่งทศนิยมให้พร้อมเสร็จสรรพ

*** เพิ่มเติมอีกนิด แล้วถ้าเราไม่ต้องการให้แสดงตำแหน่งทศนิยมเราจะทำอย่างไร คำตอบคือเราสามารถกำหนด option เพิ่ม ด้วยคำสั่ง minimumFractionDigits และ maximumFractionDigits โดยมีค่าเท่ากับ 0

const money = 555000;

const result = Intl.NumberFormat('th-TH', {
  style: 'currency',
  currency: 'THB',
  minimumFractionDigits: 0,
  maximumFractionDigits: 0,
}).format(money);

console.log(result); // "฿555,000"

จากผลลัพธ์ดังกล่าวเราจะได้รูปแบบที่ไม่มีตำแหน่งทศนิยมแล้วครับ

DEV Community: Panupat Top

มาลองแปลงค่าตัวเลขเป็นสกุลเงินต่างๆ ด้วยคำสั่ง "Intl.NumberFormat" ใน ภาษา JavaScript กันเถอะ!