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

panupatdevy

Panupat Top

Posted on July 27, 2020

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

ในภาษา 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"

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

💖 💪 🙅 🚩
panupatdevy
Panupat Top

Posted on July 27, 2020

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related