#ตัวจัดรูปแบบ (Formatters)

ตัวจัดรูปแบบ (Formatters) ใช้สำหรับแปลงข้อมูลดิบให้เป็นข้อความที่อ่านง่ายครับ/ค่ะ โดยจะนำไปใช้กับข้อมูลด้วยเครื่องหมายโคลอน (:) และสามารถเรียกใช้แบบต่อเนื่องกันได้ ซึ่งผลลัพธ์ของตัวจัดรูปแบบหนึ่งจะกลายเป็นอินพุตสำหรับตัวถัดไปครับ/ค่ะ ตัวจัดรูปแบบบางตัวรองรับพารามิเตอร์แบบค่าคงที่ (Constant Parameters) หรือพารามิเตอร์แบบไดนามิก (Dynamic Parameters) ครับ/ค่ะ

#ภาพรวม

#1. คำอธิบายไวยากรณ์

รูปแบบการเรียกใช้ตัวจัดรูปแบบพื้นฐานมีดังนี้ครับ/ค่ะ

{d.property:formatter1:formatter2(...)}

เช่น ในกรณีที่ต้องการแปลงสตริง "JOHN" ให้เป็น "John" เราจะใช้ lowerCase เพื่อแปลงตัวอักษรทั้งหมดให้เป็นตัวพิมพ์เล็กก่อน จากนั้นจึงใช้ ucFirst เพื่อแปลงตัวอักษรตัวแรกให้เป็นตัวพิมพ์ใหญ่ครับ/ค่ะ

#2. ตัวอย่าง

ข้อมูล:

{
  "name": "JOHN",
  "birthday": "2000-01-31"
}

เทมเพลต:

My name is {d.name:lowerCase:ucFirst}. I was born on {d.birthday:formatD(LL)}.

#3. ผลลัพธ์

ผลลัพธ์หลังจากเรนเดอร์:

My name is John. I was born on January 31, 2000.

#พารามิเตอร์แบบค่าคงที่ (Constant Parameters)

#1. คำอธิบายไวยากรณ์

ตัวจัดรูปแบบหลายตัวรองรับพารามิเตอร์แบบค่าคงที่ (Constant Parameters) หนึ่งตัวหรือมากกว่า ซึ่งจะคั่นด้วยเครื่องหมายจุลภาค (comma) และอยู่ในวงเล็บเพื่อปรับเปลี่ยนผลลัพธ์ครับ/ค่ะ เช่น :prepend(myPrefix) จะเพิ่มข้อความ “myPrefix” ไว้หน้าข้อความเดิมครับ/ค่ะ
ข้อควรทราบ: หากพารามิเตอร์มีเครื่องหมายจุลภาคหรือช่องว่าง จะต้องใส่เครื่องหมายอัญประกาศเดี่ยว (single quotes) ครอบไว้ เช่น prepend('my prefix') ครับ/ค่ะ

#2. ตัวอย่าง

ตัวอย่างเทมเพลต (ดูรายละเอียดการใช้งานตัวจัดรูปแบบแต่ละตัว)

#3. ผลลัพธ์

ผลลัพธ์ที่ได้จะมีคำนำหน้าที่ระบุไว้เพิ่มอยู่หน้าข้อความครับ/ค่ะ

#พารามิเตอร์แบบไดนามิก (Dynamic Parameters)

#1. คำอธิบายไวยากรณ์

ตัวจัดรูปแบบยังรองรับพารามิเตอร์แบบไดนามิก (Dynamic Parameters) ด้วยครับ/ค่ะ พารามิเตอร์เหล่านี้จะขึ้นต้นด้วยเครื่องหมายจุด (.) และไม่ต้องใส่เครื่องหมายอัญประกาศครับ/ค่ะ
มีสองวิธีในการระบุพารามิเตอร์แบบไดนามิกดังนี้ครับ/ค่ะ

• Absolute JSON Path (เส้นทาง JSON แบบสัมบูรณ์): ขึ้นต้นด้วย d. หรือ c. (หมายถึงข้อมูลหลัก หรือข้อมูลเสริม)
• Relative JSON Path (เส้นทาง JSON แบบสัมพัทธ์): ขึ้นต้นด้วยเครื่องหมายจุด (.) เพียงจุดเดียว ซึ่งบ่งชี้ว่าคุณสมบัตินั้นจะถูกค้นหาจากอ็อบเจกต์แม่ (parent object) ปัจจุบัน

ตัวอย่างเช่น:

{d.subObject.qtyB:add(d.subObject.qtyC)}

หรือสามารถเขียนเป็นเส้นทางแบบสัมพัทธ์ได้ดังนี้ครับ/ค่ะ

{d.subObject.qtyB:add(.qtyC)}

หากต้องการเข้าถึงข้อมูลจากระดับที่สูงขึ้น (อ็อบเจกต์แม่ หรือสูงกว่า) สามารถใช้เครื่องหมายจุดหลายจุดได้ครับ/ค่ะ

{d.subObject.qtyB:add(..qtyA):add(.qtyC)}

#2. ตัวอย่าง

ข้อมูล:

{
  "id": 10,
  "qtyA": 20,
  "subObject": {
    "qtyB": 5,
    "qtyC": 3
  },
  "subArray": [{
    "id": 1000,
    "qtyE": 3
  }]
}

การใช้งานในเทมเพลต:

{d.subObject.qtyB:add(d.subObject.qtyC)}      // ผลลัพธ์: 8 (5 + 3)
{d.subObject.qtyB:add(.qtyC)}                   // ผลลัพธ์: 8
{d.subObject.qtyB:add(..qtyA):add(.qtyC)}        // ผลลัพธ์: 28 (5 + 20 + 3)
{d.subArray[0].qtyE:add(..subObject.qtyC)}       // ผลลัพธ์: 6 (3 + 3)

#3. ผลลัพธ์

ตัวอย่างแต่ละรายการให้ผลลัพธ์เป็น 8, 8, 28 และ 6 ตามลำดับครับ/ค่ะ

ข้อควรทราบ: ไม่อนุญาตให้ใช้ Custom Iterators (ตัววนซ้ำแบบกำหนดเอง) หรือ Array Filters (ตัวกรองอาร์เรย์) เป็นพารามิเตอร์แบบไดนามิกครับ/ค่ะ เช่น:

{d.subObject.qtyB:add(..subArray[i].qtyE)}
{d.subObject.qtyB:add(d.subArray[i].qtyE)}