0Pricing
React Academy · บทเรียน

การผันรูปพหูพจน์และการแทนค่า

จัดการรูปพหูพจน์ตามจำนวนและแทรกค่าแบบไดนามิกลงในข้อความที่แปลแล้ว

การผันรูปพหูพจน์และการแทนค่า เป็นบทเรียน React Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน React Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส React Academy มีบทเรียนทั้งหมด 4 บทเรียน

ยินดีต้อนรับ

ในบทเรียนนี้ คุณจะจัดการรูปพหูพจน์ตามจำนวนและแทรกค่าแบบไดนามิกลงในสตริงที่แปลแล้วโดยใช้การแทรกค่าและการรองรับพหูพจน์ของ i18next

พื้นฐานการแทรกค่า

ใช้วงเล็บปีกกาคู่ในสตริงการแปลเป็นตัวแทน ส่งออบเจ็กต์ที่มีค่าของตัวแปรเป็นอาร์กิวเมนต์ตัวที่สองให้ t()
// JSON: "greeting": "Hello, {{name}}!"
t('greeting', { name: 'Alice' }); // Hello, Alice!

ตัวแปรสำหรับการแทรกค่าหลายตัว

คุณสามารถใช้ตัวแปรสำหรับการแทรกค่าได้มากเท่าที่ต้องการในสตริงเดียว
// JSON: "summary": "You have {{count}} messages in {{folder}}"
t('summary', { count: 5, folder: 'Inbox' });
// You have 5 messages in Inbox

การหลีกอักขระ HTML

โดยค่าเริ่มต้น i18next จะหลีกอักขระ HTML ในค่าที่แทรก หากต้องการเรนเดอร์ HTML ภายในค่าที่แทรก ให้ตั้งค่า `escapeValue: false` ในการกำหนดค่าเริ่มต้น (ใน React ปลอดภัยอยู่แล้ว เนื่องจาก React จะหลีก JSX ให้)

รูปพหูพจน์

i18next รองรับรูปพหูพจน์โดยอัตโนมัติ กำหนด `key` สำหรับรูปเอกพจน์ และ `key_other` (หรือ `key_plural`) สำหรับรูปพหูพจน์ ส่ง `count` ในออบเจ็กต์การแทรกค่า
// JSON:
// "item": "{{count}} item"
// "item_other": "{{count}} items"

t('item', { count: 1 }); // 1 item
t('item', { count: 5 }); // 5 items

กฎพหูพจน์เฉพาะภาษา

แต่ละภาษามีกฎพหูพจน์แตกต่างกัน ภาษารัสเซียมีรูปพหูพจน์ 4 รูป ส่วนภาษาอาหรับมี 6 รูป i18next จะใช้กฎ CLDR ของ Unicode สำหรับแต่ละภาษาโดยอัตโนมัติ โปรดกำหนดรูปแบบที่จำเป็นทั้งหมดไว้ในไฟล์การแปล
// Russian (ru):
// key_one, key_few, key_many, key_other

รูปศูนย์

i18next ยังรองรับรูปแบบพิเศษ `key_zero` เมื่อ count เป็น 0 ทำให้ใช้ถ้อยคำแตกต่างกันได้ (เช่น 'ไม่มีรายการ' แทน '0 รายการ')
// JSON:
// "messages_zero": "No messages"
// "messages_one": "{{count}} message"
// "messages_other": "{{count}} messages"

t('messages', { count: 0 }); // No messages

คีย์แบบซ้อนที่มีรูปพหูพจน์

คุณสามารถมีคีย์พหูพจน์อยู่ภายในออบเจ็กต์แบบซ้อนได้ ใช้รูปแบบจุดเพื่อเข้าถึงคีย์เหล่านี้เช่นเดียวกับคีย์แบบซ้อนทั่วไป
// JSON: { "cart": { "items_one": "item", "items_other": "items" } }
t('cart.items', { count: 3 }); // items

การจัดรูปแบบวันที่และตัวเลข

i18next ทำงานร่วมกับ API ของ Intl เพื่อจัดรูปแบบวันที่และตัวเลขตามภาษาท้องถิ่น ใช้ i18n.format() หรือปลั๊กอิน intlify เพื่อจัดรูปแบบวันที่เป็นส่วนหนึ่งของการแปล
t('lastSeen', { date: new Date(), formatParams: {
  date: { month: 'long', day: 'numeric' }
}});

การแปลตามบริบท

ใช้ตัวเลือก `context` สำหรับรูปแบบทางไวยากรณ์ที่แตกต่างกันในแต่ละบริบท (เช่น คำที่เปลี่ยนตามเพศ) กำหนดรูปแบบ `key_male` และ `key_female` ในไฟล์การแปล
// JSON: { "hero_male": "Hero", "hero_female": "Heroine" }
t('hero', { context: 'female' }); // Heroine

ตรวจสอบอย่างรวดเร็ว

คุณจะแทรกค่าไดนามิกชื่อ 'username' ลงในสตริงการแปลด้วย i18next ได้อย่างไร

สรุปทบทวน

ใช้ {{variable}} สำหรับการแทรกค่า ใช้ key_other/key_one สำหรับรูปพหูพจน์ และใช้ key_zero สำหรับรูปศูนย์ i18next จะใช้กฎพหูพจน์ของ CLDR ใน Unicode โดยอัตโนมัติตามแต่ละภาษา ใช้บริบทสำหรับรูปแบบทางไวยากรณ์ที่แตกต่างกัน

บทเรียนถัดไป

บทเรียนถัดไป: **ตัวเปลี่ยนภาษาและการโหลดการแปลแบบขี้เกียจ** — คุณจะสร้างตัวสลับภาษาและโหลดชุดการแปลเมื่อจำเป็น

คำถามที่พบบ่อย

บทเรียน “การผันรูปพหูพจน์และการแทนค่า” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “การผันรูปพหูพจน์และการแทนค่า” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส React Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส React Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “การผันรูปพหูพจน์และการแทนค่า”

จัดการรูปพหูพจน์ตามจำนวนและแทรกค่าแบบไดนามิกลงในข้อความที่แปลแล้ว คุณปฏิบัติ React Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน React Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน React Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน

บทเรียน “การผันรูปพหูพจน์และการแทนค่า” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน React Academy นี้ได้ไหม

ได้ บทเรียน React Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

  1. การตั้งค่า react-i18next
  2. การใช้ฮุก useTranslation
  3. การผันรูปพหูพจน์และการแทนค่า
  4. ตัวสลับภาษาและการโหลดคำแปลแบบ Lazy
← กลับไปที่ React Academy