Jaynarol Blog

ว่าด้วยเรื่อง ES6 : Template & Destructuring

บทความนี้เราจะมาต่อกันด้วยเรื่องการเชื่อม String แบบใหม่

และการสร้างตัวแปรประเภท Array, Object ในรูปแบบที่ง่ายขึ้นครับ

 

Template Literals

 

Multiline Strings

ใน ES 6 การใช้งาน String ที่มีการเชื่อมตัวแปรหรือหลายบรรทัดเราจะไม่ใช้ ‘…’ หรือ “…” แล้วนะครับ

แต่เราจะแทนที่ด้วย ... หรือที่เรียกกันในชื่อ grave accent

(สำหรับคนที่ไม่สามารถกดในแป้มพิมพ์ให้กด alt + 96 แทนครับ)

สามารถขึ้นบรรทัดใหม่ได้เลย ไม่ต้องมี + ให้เกะกะแล้ว

 

 

String Substitution

การเชื่อมระหว่างตัวแปรกับ String ก็สามารถใส่ ${varname} ลงไปได้เลย

 

 

Custom Substitution

ใน ${…} ยังสามารถใช้คำนวน เรียกฟังชั่นได้อีกด้วย โค้ดที่เขียนออกมาดูง่ายและคลีนมากๆ

 

 

Tagged Templates

หัวข้อนี้อาจเห็นภาพยากสักนิด การ Taged Teamplated ก็คือการแตกชุดข้อความโดยแยกตัวแปรกับ String ออกจากกัน

จากนั้นก็ส่งค่าทั้งสองส่วนที่อยู่ในรูป Array ไปให้ฟังชั่นที่เรากำหนดไว้ด้านหน้า

 

 

Raw strings

ฟังชั่นนี้มีหน้าที่ดึงข้อความที่ต้องการออกมาให้อยู่ในรูปแบบดิบๆ

กล่าวคือ พวกตัวอักษรพิเศษที่ขึ้นต้นด้วย ทั้งหลาย จะไม่ถูกดำเนินการและกลายเป็นข้อความธรรมดา (จาก n => \n)

 

 

 

Destructuring Assignment

 

Array Matching

ใน ES6 การกำหนดค่าให้กันระหว่าง Array สามารถจับคู่กันได้เลยโดยอัตโนมัติ

 

 

Object Matching

Object ก็เช่นกันสามารถจับคู่กำหนดค่ากันได้เลย สะดวกมาก

 

 

Parameter Context Matching

ES6 ยังรองรับการส่ง Parameter ที่เป็น Array หรือ Object เข้าไปยัง Function พร้อมกำหนดค่าของแค่ละคู่ให้อีกด้วย

 

 

Fail-Soft Destructuring

เพื่อป้องกันการจับคู่กับตัวแปรต้นทางผิดพลาดและไม่ได้ค่าตามที่คาดหวัง

ES6 ให้เราสามารถกำหนดค่า Default ของตัวแปรปลายทางไว้ก่อนได้ด้วย

 

ปิดท้าย

บทความนี้เราได้เห็นการเชื่อม String ในรูปแบบต่างๆที่ทำให้โค้ดเราสะอาดมากยิ่งขึ้น

โดยเฉพาะการขึ้นบรรทัดใหม่ ในสมัยก่อนเป็นอะไรที่ชวนหงุดหงิดมาก (+ เต็มไปหมด)

ตอนแรกตั้งใจว่าจะตัดให้บทความนี้เป็นบทความสุดท้ายของเรื่อง ES6

เพราะฟีเจอร์หลักๆที่ควรรู้ก็แทบจะหมดแล้ว

แต่…สุดท้ายก็ทำไม่ได้ 555

ไหนๆก็เริ่มเขียนมาแล้ว เอาให้มันสุดเลยดีกว่า ไว้เจอกันใหม่บทความหน้าครับ 🙂