รูปแบบสกุลเงิน JavaScript (intl.numberformat)

ใน JavaScript Intl.NumberFormat() method ใช้เพื่อระบุสกุลเงินที่เราต้องการให้แสดงตัวเลข เมธอดนี้เป็นคอนสตรัคเตอร์ที่สามารถใช้เพื่อจัดรูปแบบสกุลเงินในคุณสมบัติของสไตล์

บทความนี้ระบุวิธีที่เราใช้ Intl.NumberFormat() เพื่อให้บรรลุเป้าหมายนี้ รวมทั้งแสดงโค้ดตัวอย่าง

การแยกตัวสร้างและพารามิเตอร์ต่างๆ

new Intl.NumberFormat([locales[, options]])

เพราะ Intl.NumberFormat() เป็นคอนสตรัคเตอร์ ซึ่งนำหน้าด้วยคีย์เวิร์ด "ใหม่" ของ JavaScript เพื่อสร้างอ็อบเจกต์ที่สามารถจัดรูปแบบตัวเลขเฉพาะได้

คอนสตรัคเตอร์ใช้พารามิเตอร์ทางเลือกสองตัวคือ "locales" และ "options" สถานที่จะเก็บสตริงที่มีแนวทางปฏิบัติที่ดีที่สุดในปัจจุบันของอินเทอร์เน็ต (BCP) สำหรับแท็กภาษา หรือปัจจุบันคือ BCP 47 ตัวอย่างเช่น หากเราต้องการภาษาอังกฤษแบบอเมริกัน เราจะใช้แท็กภาษา BCP 47 ของ "en-US" หากเรา ต้องการภาษาโปรตุเกสแบบบราซิล เราจะใช้ “pt-BR”

ตัวเลือกมีคุณสมบัติที่แตกต่างกัน 17 อย่าง แต่ในบทความนี้ เราจะเน้นแค่สามอย่างเท่านั้น นอกจากนี้เรายังเน้นที่รูปแบบ ซึ่งเราสามารถใช้สกุลเงินด้วย CurrencyDisplay และ CurrencySign

โค้ดตัวอย่าง

const money = 85000.50
 
// For Brazilian Reals
console.log(new Intl.NumberFormat('pr-BR', {style: 'currency', currency: 'BRL'}).format(money))
// outputs R$85,000.50
 
// For USD
console.log(new Intl.NumberFormat('en-US', {style: 'currency', currency: 'USD'}).format(money))
// outputs $85,000.50
 
// For Japanese Yen
console.log(new Intl.NumberFormat('ja-JP', { style: 'currency', currency: 'JPY' }).format(money));
// outputs ¥85,001

สิ่งที่ควรสังเกตจากโค้ดตัวอย่างด้านบนคือเราใช้ format() วิธีการส่งผ่านตัวแปรเงินของเรา เราทำเช่นนั้นหลังจากที่เราสร้างวัตถุใหม่ ซึ่งกำลังถูกใช้เพื่อจัดรูปแบบสกุลเงินของเราตามความชอบของเรา ซึ่งจะถูกส่งต่อเป็นพารามิเตอร์

สังเกตว่าเราไม่เพียงแต่ได้สัญลักษณ์ที่แท้จริงในผลลัพธ์ของเราเท่านั้น แต่เรายังได้รับรูปแบบที่เหมาะสมสำหรับสกุลเงินอีกด้วย ด้วยเงินเยนของญี่ปุ่น การเปลี่ยนแปลงในตัวอย่างนี้ถูกปัดเศษขึ้นโดยเจตนา เนื่องจากไม่คำนึงถึงหน่วยย่อย

CurrencyDisplay และ CurrencySign

คุณสมบัติทั่วไปอีกสองประการที่เราสามารถเก็บไว้ได้ภายใต้พารามิเตอร์ตัวเลือกสำหรับสกุลเงิน ได้แก่ CurrencyDisplay และ CurrencySign

81% ของผู้เข้าร่วมกล่าวว่าพวกเขารู้สึกมั่นใจมากขึ้นเกี่ยวกับโอกาสในการทำงานด้านเทคโนโลยีหลังจากเข้าร่วม bootcamp จับคู่กับ Bootcamp วันนี้

ผู้สำเร็จการศึกษาจากหลักสูตร bootcamp โดยเฉลี่ยใช้เวลาน้อยกว่าหกเดือนในการเปลี่ยนอาชีพ ตั้งแต่เริ่มต้น bootcamp ไปจนถึงหางานแรก

CurrencyDisplay จะแสดงสกุลเงินในรูปแบบต่างๆ โดยใช้ค่าต่างๆ เช่น สัญลักษณ์, สัญลักษณ์แคบ, รหัส และชื่อ

let money = 85000.50;
 
const symbol = new Intl.NumberFormat('en-USD', {
  style: 'currency',
  currency: 'USD',
  currencyDisplay: 'symbol'
}).format(money);
 
const narrowSymbol = new Intl.NumberFormat('en-USD', {
  style: 'currency',
  currency: 'USD',
  currencyDisplay: 'narrowSymbol'
}).format(money);
 
const code = new Intl.NumberFormat('en-USD', {
  style: 'currency',
  currency: 'USD',
  currencyDisplay: 'code'
}).format(money);
 
const name = new Intl.NumberFormat('en-USD', {
  style: 'currency',
  currency: 'USD',
  currencyDisplay: 'name'
}).format(money);
 
 
console.log(symbol) 
// $85,000.50
console.log(narrowSymbol)
// $85,000.50 rather than US$85,000.50
console.log(code)
// USD 85,000.50
console.log(name)
// 85,000.50 US dollars

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

let money = -8500.50;
 
const accounting = new Intl.NumberFormat('en-USD', {
  style: 'currency', 
  currency: 'USD',
  currencySign: 'accounting' 
}).format(money);
 
console.log(accounting)
// ($8,500.50)

บทสรุป

Intl.NumberFormat() method เป็นตัวสร้างที่ใช้ในการ เหนือสิ่งอื่นใด จัดรูปแบบสกุลเงินในคุณสมบัติสไตล์ของมัน เราสามารถใช้ร่วมกับ format() เพื่อแสดงสกุลเงินที่เราชื่นชอบ