เวลาแบบสัมพันธ์และพหูพจน์
ใช้ RelativeTimeFormat และ PluralRules
เวลาแบบสัมพันธ์และพหูพจน์ เป็นบทเรียน JavaScript Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน JavaScript Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส JavaScript Academy มีบทเรียนทั้งหมด 4 บทเรียน
Intl.RelativeTimeFormat
Intl.RelativeTimeFormat สร้างวลีอย่าง "ผ่านมาแล้ว 3 วัน" หรือ "ในอีก 2 ชั่วโมง" ในภาษาของผู้ใช้
const rtf = new Intl.RelativeTimeFormat("en-US");
console.log(rtf.format(-1, "day")); // "1 day ago"
console.log(rtf.format(2, "hour")); // "in 2 hours"ค่าลบสำหรับอดีต ค่าบวกสำหรับอนาคต
เครื่องหมายของตัวเลขจะกำหนดทิศทาง โดยค่าลบหมายถึงอดีต และค่าบวกหมายถึงอนาคต
const rtf = new Intl.RelativeTimeFormat("en-US");
console.log(rtf.format(-3, "week")); // "3 weeks ago"
console.log(rtf.format(5, "minute")); // "in 5 minutes"ตัวเลือก numeric
numeric: "auto" ใช้คำที่เป็นธรรมชาติ เช่น "เมื่อวาน" หรือ "พรุ่งนี้" แทน "1 วันที่แล้ว"
const rtf = new Intl.RelativeTimeFormat("en-US", { numeric: "auto" });
console.log(rtf.format(-1, "day")); // "yesterday"
console.log(rtf.format(0, "day")); // "today"เวลาแบบสัมพันธ์ตามภูมิภาค
เมื่อเปลี่ยนภูมิภาค ระบบจะแปลทั้งวลีให้โดยอัตโนมัติ
console.log(new Intl.RelativeTimeFormat("es").format(-2, "day")); // "hace 2 dias"
console.log(new Intl.RelativeTimeFormat("fr").format(3, "hour")); // "dans 3 heures"การเลือกหน่วยที่เหมาะสม
แอปจริงจะเลือกหน่วยที่ใหญ่ที่สุดเท่าที่เหมาะสม ให้คำนวณส่วนต่างเป็นวินาที แล้วไล่ลดลงผ่านหน่วยต่าง ๆ
function ago(date) {
const diff = (date - Date.now()) / 1000;
const rtf = new Intl.RelativeTimeFormat("en-US", { numeric: "auto" });
if (Math.abs(diff) < 60) return rtf.format(Math.round(diff), "second");
if (Math.abs(diff) < 3600) return rtf.format(Math.round(diff / 60), "minute");
return rtf.format(Math.round(diff / 3600), "hour");
}
console.log(ago(new Date(Date.now() - 90000)));Intl.PluralRules
การทำให้เป็นพหูพจน์มีอะไรมากกว่าการเติม "s" Intl.PluralRules จะแมปตัวเลขไปยังหมวดหมู่ เช่น "one" หรือ "other" ตามแต่ละภาษา
const pr = new Intl.PluralRules("en-US");
console.log(pr.select(1)); // "one"
console.log(pr.select(2)); // "other"
console.log(pr.select(0)); // "other"การสร้างข้อความพหูพจน์
ใช้หมวดหมู่เพื่อเลือกคำที่ถูกต้อง
const pr = new Intl.PluralRules("en-US");
const forms = { one: "item", other: "items" };
function label(n) { return n + " " + forms[pr.select(n)]; }
console.log(label(1)); // "1 item"
console.log(label(5)); // "5 items"ภาษาที่มีรูปพหูพจน์มากกว่า
หลายภาษามีหมวดหมู่พหูพจน์หลายแบบ ตัวอย่างเช่น ภาษาโปแลนด์แยก "few" และ "many" ออกจากกัน ตรรกะภาษาอังกฤษที่เขียนตายตัวจึงใช้ไม่ได้
const pr = new Intl.PluralRules("pl");
console.log(pr.select(1)); // "one"
console.log(pr.select(3)); // "few"
console.log(pr.select(5)); // "many"พหูพจน์ของเลขลำดับ
ส่ง type: "ordinal" เพื่อรับหมวดหมู่สำหรับเลขลำดับ เช่น ลำดับที่ 1, 2 และ 3
const pr = new Intl.PluralRules("en-US", { type: "ordinal" });
const suffix = { one: "st", two: "nd", few: "rd", other: "th" };
function ordinal(n) { return n + suffix[pr.select(n)]; }
console.log(ordinal(1), ordinal(2), ordinal(3), ordinal(11)); // 1st 2nd 3rd 11thการใช้ร่วมกับตัวเลข
ใช้ PluralRules คู่กับ NumberFormat เพื่อสร้างข้อความบอกจำนวนที่แปลและจัดรูปแบบตามภาษาได้อย่างสมบูรณ์
const nf = new Intl.NumberFormat("en-US");
const pr = new Intl.PluralRules("en-US");
const forms = { one: "file", other: "files" };
function msg(n) { return nf.format(n) + " " + forms[pr.select(n)]; }
console.log(msg(1000)); // "1,000 files"Intl.ListFormat
คุณสมบัติเพิ่มเติม: Intl.ListFormat เชื่อมรายการเข้าด้วยกันด้วยคำเชื่อมที่ถูกต้องตามภูมิภาค
const lf = new Intl.ListFormat("en-US", { type: "conjunction" });
console.log(lf.format(["red", "green", "blue"])); // "red, green, and blue"ตรวจสอบความเข้าใจ
ทดสอบเวลาแบบสัมพันธ์และพหูพจน์
ทบทวน: เวลาแบบสัมพันธ์และพหูพจน์
คุณจัดรูปแบบเวลาแบบสัมพันธ์ด้วย RelativeTimeFormat รวมถึง numeric: "auto" เลือกขีดจำกัดของหน่วย ผันคำเป็นพหูพจน์ได้ถูกต้องด้วย PluralRules ในหลายภาษาและสำหรับเลขลำดับ และเชื่อมรายการด้วย ListFormat ต่อไปคือการเรียงลำดับตามภูมิภาค
เรียนรู้ JavaScript ด้วย AI tutor — ฟรี
เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป
- คอร์ส
- 59
- บทเรียน
- 200
คำถามที่พบบ่อย
บทเรียน “เวลาแบบสัมพันธ์และพหูพจน์” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “เวลาแบบสัมพันธ์และพหูพจน์” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส JavaScript Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส JavaScript Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “เวลาแบบสัมพันธ์และพหูพจน์”
ใช้ RelativeTimeFormat และ PluralRules คุณปฏิบัติ JavaScript Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน JavaScript Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน JavaScript Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน
บทเรียน “เวลาแบบสัมพันธ์และพหูพจน์” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน JavaScript Academy นี้ได้ไหม
ได้ บทเรียน JavaScript Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- การจัดรูปแบบตัวเลขและสกุลเงิน
- การจัดรูปแบบวันที่และเวลา
- เวลาแบบสัมพันธ์และพหูพจน์
- การเรียงลำดับตามท้องถิ่น