การจัดรูปแบบตัวเลข วันที่ และสกุลเงิน
n() สำหรับตัวเลข d() สำหรับวันที่ รูปแบบวันเวลา และ numberFormats แยกตาม locale
การจัดรูปแบบตัวเลข วันที่ และสกุลเงิน เป็นบทเรียน Vue Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Vue Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Vue Academy มีบทเรียนทั้งหมด 4 บทเรียน
ตัวเลขและวันที่แตกต่างกันตาม locale
1,000.50 ใน US คือ 1.000,50 ในพื้นที่ส่วนใหญ่ของยุโรป วันที่และสกุลเงินก็แตกต่างกันเช่นกัน Vue I18n ครอบ API Intl ของเบราว์เซอร์ เพื่อให้ตัวเลข วันที่ และจำนวนเงินแสดงผลได้อย่างถูกต้องตาม locale
การตั้งค่า numberFormats
กำหนดรูปแบบตัวเลขที่ตั้งชื่อไว้สำหรับแต่ละ locale ในตัวเลือก numberFormats ของ createI18n รูปแบบที่ตั้งชื่อแต่ละรูปแบบคือออบเจ็กต์ตัวเลือกของ Intl.NumberFormat
const i18n = createI18n({
locale: "en",
numberFormats: {
en: {
currency: { style: "currency", currency: "USD" },
decimal: { style: "decimal", minimumFractionDigits: 2 },
},
},
})ฟังก์ชัน n()
จัดรูปแบบตัวเลขด้วย n(value, formatName) จาก useI18n() หรือใช้ $n ในแม่แบบ ฟังก์ชันนี้ใช้รูปแบบที่ตั้งชื่อไว้สำหรับ locale ที่ใช้งานอยู่
const { n } = useI18n()
n(1234.5, "decimal") // "1,234.50" in enการจัดรูปแบบสกุลเงิน
รูปแบบ currency จะเพิ่มสัญลักษณ์และการแบ่งกลุ่มหลักที่ถูกต้อง รหัสสกุลเงินในการตั้งค่ารูปแบบจะควบคุมว่าสัญลักษณ์ใดจะแสดง
const { n } = useI18n()
n(49.99, "currency") // "$49.99" in enผลลัพธ์สกุลเงินตาม locale
เพิ่มรูปแบบที่ตั้งชื่อเดียวกันไว้ใต้แต่ละ locale พร้อมการตั้งค่าที่เหมาะกับ locale นั้น การเปลี่ยน locale จะเปลี่ยนการแบ่งกลุ่มหลัก เครื่องหมายทศนิยม และตำแหน่งสัญลักษณ์โดยอัตโนมัติ
numberFormats: {
en: { currency: { style: "currency", currency: "USD" } },
tr: { currency: { style: "currency", currency: "TRY" } },
}
// n(49.99, "currency") => "$49.99" (en) or "TRY 49,99" style (tr)เปอร์เซ็นต์
รูปแบบ percent จะคูณค่าด้วย 100 และเติมเครื่องหมายเปอร์เซ็นต์ตาม locale
numberFormats: {
en: { percent: { style: "percent", maximumFractionDigits: 1 } },
}
n(0.256, "percent") // "25.6%"การตั้งค่า datetimeFormats
การจัดรูปแบบวันที่ทำงานคล้ายกับตัวเลข ให้กำหนดรูปแบบวันที่ที่ตั้งชื่อไว้ใต้ datetimeFormats โดยแต่ละรูปแบบเป็นออบเจ็กต์ตัวเลือกของ Intl.DateTimeFormat
const i18n = createI18n({
locale: "en",
datetimeFormats: {
en: {
short: { year: "numeric", month: "short", day: "numeric" },
long: { dateStyle: "full", timeStyle: "short" },
},
},
})ฟังก์ชัน d()
จัดรูปแบบวันที่ด้วย d(value, formatName) (หรือ $d ในแม่แบบ) ส่งออบเจ็กต์ Date หรือประทับเวลา
const { d } = useI18n()
d(new Date("2026-05-29"), "short") // "May 29, 2026" in enวันที่ตาม locale
เช่นเดียวกับตัวเลข ให้จัดเตรียมรูปแบบวันที่ที่ตั้งชื่อไว้สำหรับแต่ละ locale การเรียกใช้แบบเดียวกันจะให้ลำดับวันที่และชื่อเดือนตามภาษานั้นเมื่อ locale เปลี่ยน
datetimeFormats: {
en: { short: { year: "numeric", month: "short", day: "numeric" } },
tr: { short: { year: "numeric", month: "short", day: "numeric" } },
}
// d(date, "short") => "May 29, 2026" (en) / "29 May 2026" (tr)การใช้ตัวช่วยจัดรูปแบบในแม่แบบ
ในแม่แบบ ให้ใช้ $n และ $d พร้อมค่ากับรูปแบบที่ตั้งชื่อไว้
<template>
<p>Total: {{ $n(total, "currency") }}</p>
<p>Updated: {{ $d(updatedAt, "short") }}</p>
</template>ตัวเลือกแบบอินไลน์สำหรับใช้ครั้งเดียว
นอกเหนือจากรูปแบบที่ตั้งชื่อแล้ว คุณสามารถส่งออบเจ็กต์ตัวเลือกแบบอินไลน์เป็นอาร์กิวเมนต์ตัวที่สอง เพื่อจัดรูปแบบแบบใช้ครั้งเดียวโดยไม่ต้องกำหนดไว้ใน config
const { n, d } = useI18n()
n(0.5, { style: "percent" }) // "50%"
d(new Date(), { weekday: "long" }) // "Friday"ตรวจสอบความเข้าใจ
ตรวจสอบความเข้าใจของคุณเกี่ยวกับการจัดรูปแบบตามภูมิภาค
ทบทวน
คุณได้เรียนรู้การจัดรูปแบบตามภูมิภาค:
- กำหนดรูปแบบที่ตั้งชื่อไว้ภายใต้
numberFormatsและdatetimeFormatsสำหรับแต่ละภูมิภาค n(value, name)/$nใช้จัดรูปแบบตัวเลข เช่น รูปแบบทศนิยม สกุลเงิน และเปอร์เซ็นต์d(value, name)/$dใช้จัดรูปแบบวันที่- การเปลี่ยน
localeจะเปลี่ยนการจัดกลุ่มตัวเลข เครื่องหมายทศนิยม สัญลักษณ์ และลำดับวันที่โดยอัตโนมัติ - คุณยังสามารถส่งออบเจ็กต์ตัวเลือกแบบอินไลน์เพื่อจัดรูปแบบแบบใช้ครั้งเดียวได้
คำถามที่พบบ่อย
บทเรียน “การจัดรูปแบบตัวเลข วันที่ และสกุลเงิน” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “การจัดรูปแบบตัวเลข วันที่ และสกุลเงิน” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Vue Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Vue Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “การจัดรูปแบบตัวเลข วันที่ และสกุลเงิน”
n() สำหรับตัวเลข d() สำหรับวันที่ รูปแบบวันเวลา และ numberFormats แยกตาม locale คุณปฏิบัติ Vue Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Vue Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Vue Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน
บทเรียน “การจัดรูปแบบตัวเลข วันที่ และสกุลเงิน” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Vue Academy นี้ได้ไหม
ได้ บทเรียน Vue Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- การตั้งค่า vue-i18n และไฟล์ข้อความ
- คอมโพสิเบิล useI18n และฟังก์ชัน t()
- การผันรูปพหูพจน์และข้อความที่เชื่อมโยง
- การจัดรูปแบบตัวเลข วันที่ และสกุลเงิน