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

2 Jun 2018

Share to:

Template Literals คือ ความสามารถหนึ่งของ javascript ที่เราสามารถใช้ String ภายในเครื่องหมาย grave accent (อยู่ที่ปุ่มเปลี่ยนภาษา) ได้เช่น

let str = `My String`;

ข้อดีของมันก็คือ มันสามารถแทรกตัวแปรเข้าไปแบบนี้ได้เลย

let myStr = `My name is: ${name}`;

ภายใน ${} จะเป็นการใช้การประมวลผลของ javascript ครับ ดังตัวอย่าง

console.log(`1 and 1 make ${1 + 1}`); // ได้ผลเป็น 1 and 1 make 2

ความเจ๋งของ template literals ยังมีอีกอย่างหนึ่งครับ คือมันสามารถ run function ได้ ซึ่งเราจะเรียกมันว่า tag ไปดูตัวอย่าง Code ได้เลยครับ

const myTag = (literals, ...args) => {
    console.log('Literals: ', literals);
    console.log('args: ', args);

    return 'Result from myTag';
};

const fname = 'Thiti';
const lname = 'Yamsung';
const result = myTag `Hello ${fname}${lname}!`;

console.log(result); //Output -> Result from myTag

จะได้ผลลัพธ์คือ

Image

Suggestion blogs

พื้นฐานการเขียน JavaScript ES2015 (ES6)

ความเป็นมาของ JavaScriptเมื่อนานมาแล้ว JavaScript เป็นภาษา script ฝั่ง client ของ Netscape ซึ่งเป็น web browser ชื่อดังในสมัยนั้นครับ แล้วหลังจากนั้นไม่นาน Netscape ก็ได้นำเจ้า JavaScript นี้ไปฝากไว้กับ Ecma International ซึ่งเป็นองค์กรที่ก่อตั้งขึ้นเพื่อทำหน้าที่กำหนด standard ให้กับสิ่งต่างๆ โดยเฉพาะ เพื่อจะให้เข้ามาช่วยกำหนด standard ให้กับ JavaScript หลังจากนั้น JavaScript ก็ได้พัฒนาขึ้นมาเรื่อยๆ จนถึง JavaScript ES6

THAILAND TECH SHOW 2016

สวัสดีครับ ผมได้มีโอกาศไปงาน THAILAND TECH SHOW 2016 จัดขึ้นที่ ศูนย์ประชุมแห่งชาติสิริกิติ์ ในวันที่ 8 กันยายน 2559 - 10 กันยายน 2559

Vue.js เริ่มต้น ตอน9 (List Rendering v-for)

ในบทความนี้เราจะมาเรียนรู้การวนลูปแสดงข้อมูลในลักษณะ List ซึ่ง Vue ก็มีเครื่องมือมาให้เราใช้งานได้อย่างง่ายดาย ก็คือ v-for มันสามารถใช้งานได้ทั้ง Array และ Object มาดูตัวอย่างแรกกันเลย


Copyright © 2019 - 2024 thiti.dev |  v1.39.0 |  Privacy policy | 

Build with ❤️ and Astro.

Github profile   Linkedin profile   Instagram   X profile   Youtube channel   Telegram   Email contact   วงแหวนเว็บ