พหูพจน์และ Select (ICU)
จัดการรูปพหูพจน์และข้อความที่แยกตามเพศ
พหูพจน์และ Select (ICU) เป็นบทเรียน Angular Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Angular Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Angular Academy มีบทเรียนทั้งหมด 4 บทเรียน
เหตุใดตัวยึดตำแหน่งธรรมดาจึงไม่เพียงพอ
"You have 1 messages" เป็นภาษาอังกฤษที่ไม่ถูกต้อง แต่ละภาษามีกฎพหูพจน์แตกต่างกัน (บางภาษามีรูปพหูพจน์หลายรูป) รวมถึงมีการใช้ถ้อยคำตามเพศหรือหมวดหมู่ Angular จัดการเรื่องนี้ด้วย รูปแบบข้อความ ICU: นิพจน์ plural และ select
นิพจน์ plural
ICU plural จะเลือกถ้อยคำตามตัวเลข คุณจะแสดงกรณีต่าง ๆ โดยแบ่งตามหมวดหมู่พหูพจน์และระบุข้อความสำหรับแต่ละกรณี
<p i18n>{count, plural,
=0 {No messages}
=1 {One message}
other {{{count}} messages}
}</p>หมวดหมู่พหูพจน์
หมวดหมู่ประกอบด้วยค่าที่ตรงกันแบบเจาะจง (=0, =1) และคำสำคัญของ CLDR ได้แก่ zero, one, two, few, many และ other ซึ่งจำเป็นต้องมี แต่ละภาษาท้องถิ่นจะใช้ชุดย่อยที่แตกต่างกันโดยอัตโนมัติ
ตัวยึดตำแหน่งแฮช
ภายในกรณีของพหูพจน์ # เป็นรูปย่อแทนตัวเลขที่กำลังจับคู่ จึงไม่ต้องเขียนการผูกค่าเดิมซ้ำ
<p i18n>{count, plural,
=1 {You have one item}
other {You have # items}
}</p>นิพจน์ select
select จะเลือกข้อความตามค่าที่เป็นสตริง เหมาะสำหรับหมวดหมู่ต่าง ๆ เช่น เพศ สถานะ หรือประเภท
<p i18n>{gender, select,
male {He replied}
female {She replied}
other {They replied}
}</p>ต้องมี other
ทั้ง plural และ select ต้องมีแขนง other ซึ่งเป็นทางเลือกสำรองเมื่อไม่มีกรณีเฉพาะใดตรงกัน และ Angular จะแสดงข้อผิดพลาดหากไม่มีแขนงนี้
การผสานกับข้อความโดยรอบ
นิพจน์ ICU สามารถอยู่ภายในข้อความแปลทั่วไปได้ ให้รวมประโยคเต็มไว้ในบล็อก i18n เดียว เพื่อให้นักแปลควบคุมลำดับคำได้
<p i18n>Hi {{ name }}, {count, plural,
=0 {you have no notifications}
other {you have # notifications}
}.</p>การซ้อน select ภายใน plural
นิพจน์ ICU สามารถซ้อนกันได้ ทำให้แสดงทั้งจำนวนและหมวดหมู่ร่วมกันได้เมื่อไวยากรณ์จำเป็นต้องใช้ทั้งสองอย่าง
{count, plural,
=0 {No guests}
other {# {type, select, vip {VIP} other {regular}} guests}
}นักแปลปรับหมวดหมู่ได้
เมื่อแปลแล้ว ภาษาแต่ละภาษาสามารถเพิ่มรูปพหูพจน์ที่ไวยากรณ์ต้องใช้ได้ (เช่น ภาษารัสเซียใช้ one, few, many) เป้าหมาย XLIFF ของหน่วย ICU จะมีแขนงที่แปลตามภาษานั้น
ICU ใน TypeScript ด้วย $localize
ไวยากรณ์ ICU ยังใช้ภายในสตริงที่กำกับด้วย $localize ได้ ดังนั้นตรรกะพหูพจน์ในโค้ดองค์ประกอบก็ยังสามารถแปลได้เช่นกัน
const label = $localize('{count, plural, =1 {1 file} other {{{count}} files}}');เหตุใด ICU จึงดีกว่า if/else ที่เขียนเอง
การเขียนตายตัวอย่าง count === 1 ? 'message' : 'messages' ตั้งอยู่บนสมมติฐานว่าทุกภาษามีพหูพจน์สองรูปแบบเหมือนภาษาอังกฤษ ICU มอบกฎให้ข้อมูล CLDR ของแต่ละภาษา ดังนั้นภาษาที่มีรูปพหูพจน์สามหรือหกรูปแบบจึงแสดงผลได้ถูกต้องโดยไม่ต้องเปลี่ยนโค้ด
ตรวจสอบอย่างรวดเร็ว
แขนง ICU ใดที่ต้องมีเสมอ
สรุปทบทวน
ICU plural เลือกข้อความตามตัวเลขโดยใช้หมวดหมู่ (=0, one, other) และใช้ # แทนจำนวน ส่วน select เลือกตามค่าสตริง ทั้งสองแบบต้องมีแขนง other สามารถซ้อนกันได้ ใช้กับ $localize ได้ และเปิดให้แต่ละภาษาใช้กฎพหูพจน์ของตนเอง
คำถามที่พบบ่อย
บทเรียน “พหูพจน์และ Select (ICU)” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “พหูพจน์และ Select (ICU)” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Angular Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Angular Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “พหูพจน์และ Select (ICU)”
จัดการรูปพหูพจน์และข้อความที่แยกตามเพศ คุณปฏิบัติ Angular Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Angular Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Angular Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน
บทเรียน “พหูพจน์และ Select (ICU)” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Angular Academy นี้ได้ไหม
ได้ บทเรียน Angular Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- การทำเครื่องหมายข้อความเพื่อแปล
- การดึงและแปลข้อความ
- พหูพจน์และ Select (ICU)
- การสร้างบันเดิลตามภาษาและภูมิภาค