JavaScript พื้นฐาน - การใช้ Template Literals

ในโลกของการเขียนโปรแกรม JavaScript การจัดการกับข้อความและสตริงเป็นเรื่องที่หลีกเลี่ยงไม่ได้ ในอดีต การเชื่อมต่อสตริงมักจะทำผ่านการใช้เครื่องหมาย '+' ซึ่งอาจทำให้โค้ดดูไม่สละสวยและยากต่อการอ่าน โดยเฉพาะอย่างยิ่งเมื่อต้องการเชื่อมโยงตัวแปรหรือแสดงผลข้อความหลายบรรทัด แต่ใน ES6 (ECMAScript 2015) JavaScript ได้แนะนำ `Template Literals` มาเป็นเครื่องมือทรงพลังที่ช่วยให้การจัดการสตริงเป็นเรื่องง่ายและยืดหยุ่นมากขึ้น

#### Template Literals คืออะไร?

`Template Literals` คือรูปแบบของสตริงใน JavaScript ที่ถูกเขียนขึ้นโดยใช้เครื่องหมาย backticks (`` ` ``) แทนที่จะใช้เครื่องหมายอัญประกาศเดี่ยว (' ') หรืออัญประกาศคู่ (" "). ความพิเศษของ `Template Literals` อยู่ที่การช่วยให้เราสามารถแทรกรูปแบบสตริงแบบเรียบง่ายและชัดเจนมากขึ้น โดยไม่ต้องใช้เครื่องหมายบวกในการเชื่อมต่อ นอกจากนี้ยังสามารถแทรกตัวแปรลงไปในสตริงได้อย่างสะดวกด้วยการใช้ `${}`

#### การใช้งานพื้นฐานของ Template Literals

ลองเปรียบเทียบระหว่างการเชื่อมโยงสตริงด้วยเครื่องหมายบวกกับ `Template Literals`:

   // แบบเดิม
   const name = 'John';
   const message = 'Hello, ' + name + '! Welcome to JavaScript basics.';
   console.log(message);

   // ใช้ Template Literals
   const messageWithTemplate = `Hello, ${name}! Welcome to JavaScript basics.`;
   console.log(messageWithTemplate);

โค้ดแบบใช้ `Template Literals` จะดูสะอาดและอ่านง่ายมากขึ้น

ในบางครั้งเราต้องการเขียนข้อความหลายบรรทัด ซึ่งการใช้เครื่องหมายอัญประกาศในการจัดการอาจดูยุ่งยาก แต่ `Template Literals` ช่วยให้สามารถเขียนได้ง่าย ๆ เพียงตามด้านล่าง:

   // ข้อความหลายบรรทัด
   const multiLine = `This is the first line.
   This is the second line.
   And this is the third line.`;
   console.log(multiLine);

ไม่ต้องมีการใช้ `\n` หรือการเชื่อมสตริงหลาย ๆ ต่อกันอีกต่อไป

`Template Literals` สามารถใช้ expressions ภายในสตริงได้ ซึ่งหมายความว่าสามารถทำการคำนวณหรือประมวลผลเล็ก ๆ น้อย ๆ ได้ก่อนที่จะประมวลผลให้เป็นสตริง เช่น:

   const a = 5;
   const b = 10;
   const result = `The sum of ${a} and ${b} is ${a + b}.`;
   console.log(result);

มันไม่เพียงแค่เชื่อมสตริง แต่ยังคำนวณค่าให้เสร็จก่อนที่จะแสดงผล

#### Template Literals กับการใช้งานจริง

ในการสร้างหรือจัดการ HTML ด้วย JavaScript การใช้ `Template Literals` สามารถช่วยให้การอ่านโค้ดเร็วและเป็นธรรมชาติขึ้น ดังตัวอย่าง:

   const title = 'Welcome to my Website';
   const body = 'This is my first website using JavaScript and HTML combining.';
   const htmlContent = `
     <div class="container">
       <h1>${title}</h1>
       <p>${body}</p>
     </div>`;
   document.body.innerHTML = htmlContent;

จะเห็นได้ว่าการเขียน HTML ใน JavaScript นั้นเป็นระเบียบมากขึ้นด้วย `Template Literals`

เมื่อรับข้อมูล JSON จาก API การแปลงข้อมูลให้เป็นรูปแบบที่เข้าใจง่ายอาจยุ่งยาก Template Literals สามารถจัดการกับปัญหานี้ได้อย่างมีประสิทธิภาพ:

   const data = {
     name: 'Alice',
     age: 25,
     job: 'Software Developer'
   };

   const userInfo = `
     User Information:
     Name: ${data.name}
     Age: ${data.age}
     Job: ${data.job}
   `;

   console.log(userInfo);

การแสดงผลข้อมูล JSON ซึ่งเคยลำบาก จะกลายเป็นเรื่องง่ายดาย

#### สรุป

`Template Literals` ถือเป็นเครื่องมือสำคัญที่นักพัฒนาควรจะคุ้นเคย เพื่อลดความซับซ้อนและเพิ่มความชัดเจนในการเขียน JavaScript ทำให้การจัดการสตริงและข้อความในโปรเจคเกิดประสิทธิภาพสูงสุด

สำหรับผู้ที่สนใจเรียนรู้เพิ่มเติมเกี่ยวกับ JavaScript และการพัฒนาโปรแกรม ไม่ว่าจะเป็นผู้เริ่มต้นหรือผู้ที่อยากยกระดับทักษะของคุณ การมาเรียนที่ Expert-Programming-Tutor (EPT) จะเป็นจุดเริ่มต้นที่ดีในการพัฒนาความรู้ด้านการเขียนโปรแกรมให้ก้าวหน้าและทันสมัยมากยิ่งขึ้น ที่นี่มีครูผู้สอนที่มีประสบการณ์และนำวิธีการเรียนรู้ที่เน้นการปฏิบัติจริง ถ้าคุณสนใจ อย่ารอช้าที่จะเรียนรู้และก้าวสู่ความสำเร็จในสายงานนี้

หมายเหตุ: ข้อมูลในบทความนี้อาจจะผิด โปรดตรวจสอบความถูกต้องของบทความอีกครั้งหนึ่ง บทความนี้ไม่สามารถนำไปใช้อ้างอิงใด ๆ ได้ ทาง EPT ไม่ขอยืนยันความถูกต้อง และไม่ขอรับผิดชอบต่อความเสียหายใดที่เกิดจากบทความชุดนี้ทั้งทางทรัพย์สิน ร่างกาย หรือจิตใจของผู้อ่านและผู้เกี่ยวข้อง

หากเจอข้อผิดพลาด หรือต้องการพูดคุย ติดต่อได้ที่ https://m.me/expert.Programming.Tutor/