ไขความลับ Tagged Template Literals

ตั้งแต่การเกิดขึ้นของ Node.js เรียกได้ว่าเป็นจุดเริ่มต้นของยุคสมัยที่อะไร ๆ ก็ใช้ Javascript ๆ ทำให้โลกของ Javascript หมุนเร็วยิ่งกว่าโลกหมุนรอบตัวเอง ทำให้มาตรฐานของภาษา Javascript ให้เขียนได้ดีขึ้น (ลองนึกถึงการใช้ var อันแสนวุ่นวาย เมื่อครั้งอดีตไม่นานมานี้) ทำให้ Syntax ต่าง ๆ ได้รับการพัฒนาไปมากรวมไปถึง Framework ต่าง ๆ รวมไปถึงการเขียน CSS ในภาษา Javascript

CSS-In-JS

อ่านไม่ผิดหรอกครับ เราเขียน CSS ใน Javascript ได้แล้วครับ โดยเมื่อไม่นานนี้ผมได้ไปร่วมงาน React BKK#2.0 ได้เข้าฟังในหัวข้อ Styled Components: Change your CSS styling mindset [React Bangkok 2.0.0] จึงได้พบกับ Syntax อันแปลกประหลาดที่ไม่ทราบหลักการทำงานมาก่อน

//เพียงเขียนแค่นี้เราจะได้ React Component
//แต่เบื้องหลัง มันคืออะไรกันแน่เนี่ย!!
const Title = styled.h1`
   font-size: 1.5em;
   text-align: center;
   color: palevioletred;
`;

render(
  <Title>Styled Component</Title>
);

เบื้องหลังการเขียน Syntax แบบนี้เรียกว่า Tagged Template Literals

หากใครเขียน React อยากแนะนำให้ลองเขียน https://www.styled-components.com ดูครับ มันช่วยกำจัด className ออกไปได้เยอะครับ ทำให้เขียนแล้วดูสะอาดขึ้น สื่อความหมายจาก Tag ได้ดียิ่งขึ้นครับ หรืออยากจะลอง https://github.com/emotion-js/emotion ตัวนี้ก็ไม่ว่ากันครับ

เริ่มสร้าง Tagged Template Literals กันดีกว่า

let user = {
 firstName: “Joseph”,
 lastName: “Zimmerman”,
 nickname: “Zim”
}
// ค่าของ strings จะได้เป็นดังนี้
// [ 'My name is ', ' ', ', but my friends call me ', '.' ]
// ค่าของ values จะได้เป็นดังนี้
// [ 'Joseph', 'Zimmerman', 'Zim' ]
function tag(strings, …values) {
  return strings.reduce(function(combined, string, i) {
    return combined + string + values[i]
  }, “”)
}
// ใช้งานฟังก์ชัน Tag จากโยน strings กับ args เข้าไปใน Function
let result = tag`My name is ${user.firstName} ${user.lastName},               
                 but my friends call me ${user.nickname}.`
console.log(result)
// Result 
// My name is Joseph Zimmerman,               
   but my friends call me ${user.nickname}.

หวังว่าบทความนี้จะให้ประโยชน์ให้กับทุกคนนะครับ เจอกันใหม่บทความหน้านะครับ

อ้างอิง

https://appendto.com/2017/02/advanced-javascript-es2015-template-strings-with-tagged-templates/

https://www.youtube.com/watch?v=f-RdM4J9OxQ&index=11&list=PLxIUSORh0EQOdSv_je3Fhy8lmY0g1TG3u