การผันรูปพหูพจน์และข้อความที่เชื่อมโยง
ไวยากรณ์กฎพหูพจน์ @:key|@:key การผันตามจำนวน และข้อความที่เชื่อมโยงด้วย @:path
การผันรูปพหูพจน์และข้อความที่เชื่อมโยง เป็นบทเรียน Vue Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Vue Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Vue Academy มีบทเรียนทั้งหมด 4 บทเรียน
การนับขึ้นอยู่กับภาษา
"1 รายการ" แต่ "5 รายการ" — และภาษาอื่นอาจมีรูปแบบมากกว่านี้ การเขียนรูปพหูพจน์แบบตายตัวทำให้ได้สตริงที่ไม่เป็นธรรมชาติอย่าง "5 รายการหรือหลายรายการ" Vue I18n มี การผันรูปพหูพจน์ ในตัว เพื่อเลือกรูปแบบที่เหมาะสมตามจำนวน
รูปพหูพจน์คั่นด้วยเครื่องหมายไปป์
เขียนรูปแบบต่าง ๆ ไว้ในสตริงข้อความเดียว โดยคั่นด้วยอักขระไปป์ (|) สำหรับภาษาอังกฤษ โดยทั่วไปจะมีสองหรือสามรูปแบบ
const en = {
items: "no items | one item | {count} items",
}การเลือกรูปพหูพจน์ด้วยจำนวน
ส่งตัวเลขเป็นอาร์กิวเมนต์ที่สองให้กับ t Vue I18n จะเลือกรูปแบบที่ตรงกันตามจำนวนนั้น
const { t } = useI18n()
t("items", 0) // "no items"
t("items", 1) // "one item"
t("items", 9) // "9 items"กฎพหูพจน์เริ่มต้น
เมื่อมีสามรูปแบบ กฎคือ 0 ใช้รูปแบบแรก 1 ใช้รูปแบบที่สอง และค่าอื่น ๆ ใช้รูปแบบที่สาม เมื่อมีสองรูปแบบ ค่า 0 และค่าหลายรายการจะถูกรวมเป็นรูปแบบเดียวกัน
const en = {
// two-form version: 0 and N share the plural
files: "no file | one file | {count} files",
}ตัวแทนค่า {count}
ภายในข้อความพหูพจน์ ตัวแทนค่าพิเศษ {count} (หรือ {n}) จะถูกเติมด้วยตัวเลขที่คุณส่งมา เพื่อให้คุณแสดงจำนวนนั้นได้
const en = { photos: "no photos | {count} photo | {count} photos" }
t("photos", 3) // "3 photos"พหูพจน์ในแม่แบบ
ในแม่แบบ ให้ใช้ $t โดยส่งจำนวนเป็นอาร์กิวเมนต์ที่สอง เช่นเดียวกับในสคริปต์
<template>
<p>{{ $t("items", cartCount) }}</p>
</template>การรวมจำนวนกับค่าที่ระบุชื่อ
คุณสามารถส่งทั้งจำนวนและตัวแทนค่าที่ระบุชื่อได้ โดยส่งจำนวนพร้อมกับออบเจ็กต์ค่า
const en = { greeting: "Hi {name}, no messages | Hi {name}, {count} messages" }
t("greeting", 2, { named: { name: "Ada" } })
// or per API: t("greeting", { name: "Ada" }, 2)ข้อความที่เชื่อมโยงคืออะไร
บางครั้งคำแปลหนึ่งควรฝังคำแปลอื่นไว้เพื่อหลีกเลี่ยงการทำซ้ำ ข้อความที่เชื่อมโยง จะอ้างอิงคีย์อื่นด้วยไวยากรณ์ @:
const en = {
brand: "Acme",
welcome: "Welcome to @:brand",
}การแก้ค่าลิงก์
เมื่อคุณแปล welcome โทเค็น @:brand จะถูกแทนที่ด้วยค่าที่แปลแล้วของ brand เมื่อเปลี่ยน brand เพียงครั้งเดียว ข้อความที่เชื่อมโยงทั้งหมดจะอัปเดต
t("welcome") // "Welcome to Acme"
// change brand -> all linked messages reflect itการเชื่อมโยงด้วยคีย์ซ้อน
ลิงก์ทำงานกับคีย์ซ้อนที่มีจุดคั่นได้เช่นกัน หากจำเป็น ให้ใส่การอ้างอิงที่มีหลายคำไว้ในวงเล็บ
const en = {
app: { name: "MyApp" },
footer: "Thanks for using @:(app.name)",
}ตัวปรับแต่งบนลิงก์
ข้อความที่เชื่อมโยงรองรับตัวปรับแต่ง เช่น @.upper เพื่อแปลงค่าที่เชื่อมโยง (เป็นตัวพิมพ์ใหญ่ ตัวพิมพ์เล็ก หรือขึ้นต้นด้วยตัวพิมพ์ใหญ่)
const en = {
brand: "acme",
banner: "@.upper:brand sale!", // "ACME sale!"
}ตรวจสอบความเข้าใจ
ตรวจสอบความเข้าใจของคุณเกี่ยวกับพหูพจน์และลิงก์
สรุปทบทวน
คุณได้เรียนรู้เรื่องพหูพจน์และการนำข้อความกลับมาใช้:
- แยกรูปพหูพจน์ด้วย
|:"no items | one item | {count} items" - ส่งจำนวนให้กับ
t(key, count)เพื่อเลือกรูปแบบที่ถูกต้อง - ตัวแทนค่า
{count}จะแสดงจำนวน - ข้อความที่เชื่อมโยงจะนำคีย์อื่นกลับมาใช้ผ่าน
@:otherKey(ใช้@:(nested.key)สำหรับคีย์ซ้อน) - ตัวปรับแต่งอย่าง
@.upperจะแปลงค่าที่เชื่อมโยง
คำถามที่พบบ่อย
บทเรียน “การผันรูปพหูพจน์และข้อความที่เชื่อมโยง” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “การผันรูปพหูพจน์และข้อความที่เชื่อมโยง” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Vue Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Vue Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “การผันรูปพหูพจน์และข้อความที่เชื่อมโยง”
ไวยากรณ์กฎพหูพจน์ @:key|@:key การผันตามจำนวน และข้อความที่เชื่อมโยงด้วย @:path คุณปฏิบัติ Vue Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Vue Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Vue Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน
บทเรียน “การผันรูปพหูพจน์และข้อความที่เชื่อมโยง” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Vue Academy นี้ได้ไหม
ได้ บทเรียน Vue Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- การตั้งค่า vue-i18n และไฟล์ข้อความ
- คอมโพสิเบิล useI18n และฟังก์ชัน t()
- การผันรูปพหูพจน์และข้อความที่เชื่อมโยง
- การจัดรูปแบบตัวเลข วันที่ และสกุลเงิน