Template String

นี่คือฟีเจอร์ที่ช่วยให้การทำ string concatenation ง่ายขึ้น

มาดูตัวอย่างการ concat แบบดั้งเดิมกัน

ไม่สนุกเลยใช่มั๊ยครับ ยิ่งเจอพวก single quote เข้าไปด้วยยิ่งแล้วใหญ่ เพราะต้องใช้พวก \ เข้ามาช่วย ทำให้มีโอกาสเขียน code ผิดเยอะมาก ES6 จึงออกฟีเจอร์ที่ชื่อว่า Template Strings มาช่วยแก้ปัญหาตรงนี้

คราวนี้ง่ายกว่าเดิมแล้ว ไม่ต้องมี \ ไม่ต้องแยก variable ออกมาจาก string อีกต่อไป วิธีการเขียนก็คือ ให้ครอบ string ด้วย back ticks (`) ไม่ใช่ (‘) แบบตัวอย่างก่อนหน้านี้ และหากจะอ้างอิง variable ภายใน string ก็ให้ครอบชื่อ variable ตัวนั้นด้วย ${} เป็นอันจบ

และ template strings ยังมีของแถมมาให้เราด้วย นั่นคือ เราสามารถเขียน string แบบหลายบรรทัดได้แบบง่ายๆ ดังนี้

Default Parameters

คือวิธีในการเซตค่า default ให้กับ parameter ของฟังก์ชั่น ซึ่งทำให้เราสามารถเลี่ยง error ที่เกิดจากการ assign argument ที่มีค่าเป็น undefined เข้าไปในฟังก์ชั่นโดยรู้เท่าไม่ถึงการณ์ เพราะเมื่อไหร่ก็ตามที่ parameter มีค่าเป็น undefined มันจะใช้ค่า default ที่เซตไว้ทันที ดังตัวอย่างต่อไปนี้

ในกรณีนี้ หากมีการเรียกใช้ฟังก์ชั่น debounce แล้วดันส่งค่า wait ที่เป็น undefined เข้าไปในฟังก์ชั่น มันจะใช้ค่า 1,000 แทน

Concise Objects

ฟีเจอร์ตัวนี้มีมาเพื่อทำให้เราเขียน code ได้สั้นขึ้น (แต่ไม่ได้หมายความว่าจะดีขึ้น เพราะบางคนก็ไม่ชอบ) โดยขอยกตัวอย่าง code ดังต่อไปนี้

จะเห็นว่า ตัว key กับตัว value ใน object ที่ถูก return ออกมานั้น เหมือนกัน (username: username, email: email) ดังนั้นเราสามารถเขียน code ใหม่ได้ดังนี้

Project refactoring

เปิดไฟล์ app/containers/PromptContainer.js ขึ้นมาแล้วทำการแก้ code ดังนี้

เราได้ทำ Destructuring ตัว this.state เพื่อดึง username ออกมา จากนั้นเราก็นำมันมาใช้เพื่อการสร้าง template strings (code ข้างบนผมตั้งใจทิ้งไว้ให้มันไม่เรียบร้อย หากใครเห็นว่ามีตรงไหนควร refactor เพิ่ม ก็สามารถทำได้เลยนะครับ)

จากนั้นให้เปิดไฟล์ app/utils/githubHelpers.js แล้วทำการปรับ code ดังนี้

ครั้งนี้มีการ refactoring โดยใช้ทั้ง template strings, concise object รวมทั้ง default parameter ด้วย

สำหรับผู้ที่อยากดู code ต้นแบบ สามารถไปดูได้ที่

https://github.com/himaeng/react-fun-course/tree/master/ES04-template-strings

สรุป

ครั้งนี้เราพูดกันถึงฟีเจอร์สามตัวของ ES6 ได้แก่

Template Strings ที่ช่วยในเรื่องการจัดการกับ string concatenation

Default Parameter คือการ assign default value ให้กับ parameter ที่เป็น undefined

Concise Object ช่วยให้เรา สร้าง property ใหักับ object โดยหากชื่อ key กับ value ตรงกัน ก็สามารถเขียนรวบเป็นตัวเดียวได้เลย

1 COMMENT