ไขความลับ 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 เข้าไปใน Functionlet 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