การทำเครื่องหมายข้อความเพื่อแปล
ใช้แอตทริบิวต์ i18n เพื่อทำเครื่องหมายข้อความที่แปลได้
การทำเครื่องหมายข้อความเพื่อแปล เป็นบทเรียน Angular Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Angular Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Angular Academy มีบทเรียนทั้งหมด 4 บทเรียน
สิ่งที่การทำให้เป็นสากลช่วยแก้ไข
การทำให้เป็นสากล (i18n) คือการเตรียมแอปให้ข้อความสามารถแปลเป็นภาษาอื่นได้โดยไม่ต้องเปลี่ยนโค้ด Angular มีระบบ i18n ในตัว ซึ่งอาศัยการทำเครื่องหมายข้อความที่แปลได้ในแม่แบบด้วยแอตทริบิวต์ i18n
แอตทริบิวต์ i18n
เพิ่มแอตทริบิวต์ i18n ให้กับองค์ประกอบใด ๆ ที่มีข้อความซึ่งควรแปล Angular จะรวบรวมข้อความเหล่านี้ขณะสร้างแอปและแทนที่เนื้อหาตามภาษาท้องถิ่น
<h1 i18n>Welcome to our store</h1>
<p i18n>Choose a product to begin.</p>การแปลแอตทริบิวต์
หากต้องการแปลแอตทริบิวต์ HTML เช่น title หรือ placeholder ให้เติมคำนำหน้า i18n- ไว้ข้างหน้า
<input placeholder="Search" i18n-placeholder />
<img src="logo.png" alt="Company logo" i18n-alt />ความหมายและคำอธิบาย
คุณสามารถให้บริบทแก่นักแปลด้วยรูปแบบ i18n="meaning|description" ความหมายจะจัดกลุ่มวลีที่เหมือนกันและควรใช้คำแปลเดียวกัน ส่วนคำอธิบายจะอธิบายวิธีใช้งาน
<button i18n="cta|The main call to action on the home page">Get started</button>รหัสกำหนดเอง
เพิ่มรหัสกำหนดเองที่คงที่หลัง @@ เพื่อให้คำแปลยังคงอยู่แม้แก้ไขข้อความ หากไม่มีรหัสดังกล่าว การเปลี่ยนข้อความต้นฉบับจะสร้างรหัสใหม่และทำให้คำแปลเดิมหายไป
<h1 i18n="@@homeTitle">Welcome to our store</h1>การแทรกค่าในข้อความที่แปล
การผูกค่าภายในข้อความที่แปลจะกลายเป็นตัวยึดตำแหน่ง นักแปลจะเห็นโทเค็นที่มีชื่อและสามารถย้ายตำแหน่งให้เหมาะกับภาษาของตนได้
<p i18n>Hello, {{ name }}! You have {{ count }} new messages.</p>การทำเครื่องหมายข้อความในองค์ประกอบด้วย $localize
สำหรับสตริงใน TypeScript (ไม่ใช่แม่แบบ) ให้กำกับด้วย $localize ซึ่งจะทำเครื่องหมายสตริงเพื่อดึงออกมา เช่นเดียวกับที่แอตทริบิวต์ i18n ทำกับแม่แบบ
const greeting = $localize('Welcome back'); // tagged-template form, marked for extractionเหตุใดจึงไม่ควรต่อสตริงเข้าด้วยกัน
การเขียนข้อความตายตัวและต่อข้อความเข้าด้วยกัน ('You have ' + n + ' items') ทำให้การแปลมีปัญหา เนื่องจากลำดับคำแตกต่างกันในแต่ละภาษา และกฎพหูพจน์ก็แตกต่างกัน การทำเครื่องหมายวลีทั้งหมดด้วย i18n ช่วยรักษาไวยากรณ์ให้ครบถ้วนเพื่อให้นักแปลจัดการได้
การแปลมาร์กอัปที่ซ้อนกัน
เมื่อข้อความที่แปลได้มีองค์ประกอบลูก Angular จะรักษาองค์ประกอบเหล่านั้นไว้เป็นตัวยึดตำแหน่ง เพื่อป้องกันไม่ให้นักแปลลบมาร์กอัปโดยไม่ได้ตั้งใจ
<p i18n>Read our <a href="/terms">terms of service</a> before continuing.</p>รักษาข้อความต้นฉบับให้สะอาด
ทำเครื่องหมายข้อความในหน่วยที่เล็กที่สุดเท่าที่เหมาะสม โดยทั่วไปคือประโยคเต็มหรือป้ายกำกับ หลีกเลี่ยงการแบ่งประโยคเดียวออกเป็นบล็อก i18n หลายบล็อก เพราะแต่ละส่วนจะกลายเป็นสตริงแยกกันและแปลได้ยากขึ้น
สิ่งที่เกิดขึ้นขณะสร้างแอป
แอตทริบิวต์ i18n เองไม่ก่อให้เกิดต้นทุนขณะรัน: Angular จะแทนที่ข้อความที่ทำเครื่องหมายไว้ระหว่างการคอมไพล์สำหรับแต่ละภาษา และสร้างชุดรวมโค้ดที่ปรับให้เหมาะสมแยกกัน เราจะดึงและแปลสตริงเหล่านี้ในบทเรียนถัดไป
ตรวจสอบอย่างรวดเร็ว
คุณจะแปลแอตทริบิวต์ตัวยึดตำแหน่งอย่างไร
สรุปทบทวน
ทำเครื่องหมายข้อความในแม่แบบด้วยแอตทริบิวต์ i18n และทำเครื่องหมายแอตทริบิวต์ด้วย i18n-attr เพิ่ม meaning|description เพื่อให้บริบท และเพิ่ม @@customId เพื่อให้ได้รหัสที่คงที่ การผูกค่าจะกลายเป็นตัวยึดตำแหน่ง ส่วนสตริง TypeScript ให้ใช้ $localize การทำเครื่องหมายนี้ไม่ก่อให้เกิดต้นทุนขณะรัน
คำถามที่พบบ่อย
บทเรียน “การทำเครื่องหมายข้อความเพื่อแปล” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “การทำเครื่องหมายข้อความเพื่อแปล” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Angular Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Angular Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “การทำเครื่องหมายข้อความเพื่อแปล”
ใช้แอตทริบิวต์ i18n เพื่อทำเครื่องหมายข้อความที่แปลได้ คุณปฏิบัติ Angular Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Angular Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Angular Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน
บทเรียน “การทำเครื่องหมายข้อความเพื่อแปล” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Angular Academy นี้ได้ไหม
ได้ บทเรียน Angular Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- การทำเครื่องหมายข้อความเพื่อแปล
- การดึงและแปลข้อความ
- พหูพจน์และ Select (ICU)
- การสร้างบันเดิลตามภาษาและภูมิภาค