การใช้ไปป์ในตัว
จัดรูปแบบวันที่ ตัวเลข และข้อความด้วยไปป์
การใช้ไปป์ในตัว เป็นบทเรียน Angular Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Angular Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Angular Academy มีบทเรียนทั้งหมด 4 บทเรียน
ไพป์คืออะไร
ไพป์จะแปลงข้อมูลโดยตรงในเทมเพลตเพื่อแสดงผล คุณเขียนค่า ตามด้วยอักขระไพป์ | แล้วจึงใส่ชื่อไพป์
ไพป์เหมาะสำหรับจัดรูปแบบวันที่ ตัวเลข สกุลเงิน และข้อความ โดยไม่ต้องเขียนตรรกะเพิ่มเติมในคอมโพเนนต์
ไวยากรณ์ของไพป์
รูปแบบพื้นฐานคือ {{ value | pipeName }} Angular จะส่งค่าเข้าไพป์และแสดงผลลัพธ์ที่ผ่านการแปลงแล้ว
<!-- template -->
<p>{{ "hello" | uppercase }}</p>
<!-- renders: HELLO -->ไพป์ uppercase และ lowercase
uppercase และ lowercase จะเปลี่ยนรูปแบบตัวพิมพ์ของสตริง ใช้งานง่ายและมักใช้กับป้ายกำกับและหัวข้อ
@Component({
selector: "app-demo",
template: "<p>{{ name | uppercase }}</p>"
})
export class DemoComponent {
name = "angular";
}
// renders: ANGULARไพป์ date
ไพป์ date จัดรูปแบบออบเจ็กต์ Date หรือการประทับเวลาให้เป็นสตริงที่อ่านง่าย โดยค่าเริ่มต้นจะใช้รูปแบบวันที่ระดับกลาง
<p>{{ today | date }}</p>
<!-- e.g. May 30, 2026 -->
// component
today = new Date();การจัดรูปแบบวันที่
คุณส่งสตริงรูปแบบให้ไพป์ date ได้ เช่น "shortDate", "fullDate" หรือรูปแบบกำหนดเองอย่าง "yyyy-MM-dd"
<p>{{ today | date:"yyyy-MM-dd" }}</p>
<!-- e.g. 2026-05-30 -->
<p>{{ today | date:"shortTime" }}</p>
<!-- e.g. 2:30 PM -->ไพป์ currency
ไพป์ currency จัดรูปแบบตัวเลขให้เป็นเงิน โดยค่าเริ่มต้นจะใช้ USD แต่คุณสามารถส่งรหัสสกุลเงินได้
<p>{{ price | currency }}</p>
<!-- $42.50 -->
<p>{{ price | currency:"EUR" }}</p>
<!-- €42.50 -->
// component
price = 42.5;ไพป์ number และ percent
ไพป์ number จัดรูปแบบตัวเลขด้วยตัวเลือกหลักตัวเลข ส่วน percent จะแสดงค่าเป็นเปอร์เซ็นต์
<p>{{ 3.14159 | number:"1.0-2" }}</p>
<!-- 3.14 -->
<p>{{ 0.25 | percent }}</p>
<!-- 25% -->ทำความเข้าใจ digitsInfo
ไพป์ number รับสตริง digitsInfo: minIntegerDigits.minFractionDigits-maxFractionDigits ตัวอย่างเช่น "1.2-2" จะแสดงทศนิยมสองตำแหน่งพอดีเสมอ
<p>{{ 7 | number:"1.2-2" }}</p>
<!-- 7.00 -->
<p>{{ 1234.5 | number:"1.0-0" }}</p>
<!-- 1,235 -->ไพป์ json
ไพป์ json จะแปลงออบเจ็กต์ใด ๆ เป็นสตริง JSON โดยหลักใช้สำหรับแก้ไขข้อบกพร่องของเทมเพลต เพื่อให้เห็นโครงสร้างข้อมูล
<pre>{{ user | json }}</pre>
<!-- { "id": 1, "name": "Ada" } -->
// component
user = { id: 1, name: "Ada" };ไพป์ slice
ไพป์ slice จะคืนค่าส่วนย่อยของอาร์เรย์หรือสตริง คล้ายกับ slice ของ JavaScript เหมาะสำหรับตัดรายการให้สั้นลง
<p>{{ "Angular" | slice:0:4 }}</p>
<!-- Angu -->
<li *ngFor="let item of items | slice:0:3">{{ item }}</li>การนำเข้าไพป์ในคอมโพเนนต์แบบสแตนด์อโลน
ในคอมโพเนนต์แบบสแตนด์อโลน คุณต้องนำเข้าไพป์ที่ใช้ เช่น DatePipe หรือ CurrencyPipe จาก @angular/common
import { DatePipe, CurrencyPipe } from "@angular/common";
@Component({
selector: "app-demo",
standalone: true,
imports: [DatePipe, CurrencyPipe],
template: "<p>{{ today | date }}</p>"
})
export class DemoComponent {
today = new Date();
}ตรวจสอบความเข้าใจ
ทดสอบความเข้าใจเกี่ยวกับไพป์ในตัว
สรุป
คุณได้เรียนรู้ไพป์ในตัวหลัก ได้แก่ uppercase, lowercase, date, currency, number, percent, json และ slice
ไพป์ช่วยให้การจัดรูปแบบอยู่ในเทมเพลตอย่างเป็นระเบียบและประกาศได้ชัดเจน ต่อไปคุณจะได้เรียนรู้การเชื่อมไพป์หลายตัวและการส่งอาร์กิวเมนต์ให้ไพป์
คำถามที่พบบ่อย
บทเรียน “การใช้ไปป์ในตัว” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “การใช้ไปป์ในตัว” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Angular Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Angular Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “การใช้ไปป์ในตัว”
จัดรูปแบบวันที่ ตัวเลข และข้อความด้วยไปป์ คุณปฏิบัติ Angular Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Angular Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Angular Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน
บทเรียน “การใช้ไปป์ในตัว” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Angular Academy นี้ได้ไหม
ได้ บทเรียน Angular Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- การใช้ไปป์ในตัว
- การเชื่อมไปป์และการส่งพารามิเตอร์
- การสร้างไปป์แบบกำหนดเอง
- ไปป์แบบบริสุทธิ์เทียบกับแบบไม่บริสุทธิ์