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

2 Jun 2018,
Share: 

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

Vue.js เริ่มต้น ตอน6 (Computed Properties and Watchers)

ก่อนหน้านี้เราได้เรียนรู้กันไปแล้วว่าใน Template จะจัดการเกี่ยวกับการแสดงผล ซึ่งในบางครั้งเราจําเป็นต้องนํา Logic บางอย่างใส่เข้าไปใน Template ด้วย ซึ่งเราก็จะใส่ไปแบบนี้

เริ่มต้น PlatformIO

สวัสดีครับ บทความนี้ผมจะมาเรียนรู้กันนะครับว่า PlatformIO คืออะไร, การ Install เพื่อใช้งานกับ Visual Studio Code (VSCode) รวมไปถึงการสร้าง Project และใช้งานเบื้องต้น

Relative path in react

สวัสดีครับ สําหรับบทความนี้ผมจะยกตัวอย่างการทํา Relative path ใน React ครับ เนื่องจากเมื่อไม่นานมานี้ผมเจอเหตุการคือเว็บที่เราเขียนด้วย React ไม่ได้อยู่ใน Root path เช่น เว็บไซต์เราไปอยู่ใน path "/profile/" ไม่ได้อยู่ใน "/"


Copyright © 2019 - 2026 thiti.dev |  v1.61.0 |  Privacy policy | 

Build with ❤️ and Astro.

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