การจัดรูปแบบตัวเลขด้วย Pipe ใน Angular

ด้วย DecimalPipe เราสามารถจัดรูปแบบตัวเลขได้ ในพารามิเตอร์แรก ของ pipe เราส่งผ่านจำนวนหลักขั้นต่ำ ในส่วนจำนวนเต็ม ในพารามิเตอร์ที่สอง ระบุจำนวนหลักขั้นต่ำใน ส่วนทศนิยม ในพารามิเตอร์ทางเลือกที่สาม กำหนดจำนวนหลักสูงสุดในส่วนทศนิยม

แม้ว่า pipe ของเราจะชื่อว่า DecimalPipe แต่สำหรับการเรียกใช้เราเขียน ดังนี้: number

มาลองใช้ในทางปฏิบัติกัน ในคลาส คอมโพเนนต์ กำหนดตัวเลขต่อไปนี้:

app/app.component.tsexport class AppComponent {
  num: number = 18;
}

ตัวอย่าง

ลองแสดงตัวเลขของเรา เพื่อให้ใน ส่วนจำนวนเต็มมีสองหลัก โดยที่ จำนวนหลักขั้นต่ำในส่วนทศนิยม จะเป็น 1:

app/app.component.html<div>{{ num | number:'2.1' }}</div>

ผลลัพธ์ของการรันโค้ด:

html<div>18.0</div>

ตัวอย่าง

ตอนนี้ลองกำหนดให้ในส่วนทศนิยม ของตัวเลขของเราแสดงสองหลัก:

app/app.component.html<div>{{ num | number:'2.2' }}</div>

ผลลัพธ์ของการรันโค้ด:

html<div>18.00</div>

ตัวอย่าง

ลองกำหนดตัวเลขใหม่:

app/app.component.tsexport class AppComponent {
  num: number = 18.67899;
}

และแสดงในเทมเพลต HTML โดยให้ใน ส่วนทศนิยมแสดงสูงสุดสองหลัก:

app/app.component.html<div>{{ num | number:'2.1-2' }}</div>

ผลลัพธ์ของการรันโค้ด:

html<div>18.68</div>

ตัวอย่าง

ตอนนี้จัดรูปแบบตัวเลขของเราใหม่ เพื่อให้ในส่วนจำนวนเต็มมีสามหลัก และ ในส่วนทศนิยมแสดงห้าหลัก:

app/app.component.html<div>{{ num | number:'3.5-6' }}</div>

ผลลัพธ์ของการรันโค้ด:

html<div>018.67899</div>

ตัวอย่าง

ลองแสดงจำนวนหลักขั้นต่ำ ในส่วนทศนิยม ซึ่งมากกว่า จำนวนที่กำหนดในตัวเลข ในกรณีของเรา แสดงหกหลัก:

app/app.component.html<div>{{ num | number:'3.6-8' }}</div>

ผลลัพธ์ของการรันโค้ดเราจะเห็นว่า DecimalPipe เพิ่มศูนย์ ในส่วนทศนิยม:

html<div>018.678990</div>

โจทย์ฝึกปฏิบัติ

typescriptnum: number = 15;

typescript'015.000'

typescriptnum: number = 12.345;

typescript'0012.345'

typescriptnum: number = 12.345;

typescript'12.3'

typescriptnum: number = 12.345;

typescript'012.34500'

typescriptnum: number = -7.261;

typescript'-007.3'

typescriptnum: number = 100.261923;

typescript'100.9226130'

typescriptnum: number = 100.926613;

typescript'0100.93'