การคำนวณและจัดการข้อความขั้นเทพด้วย Operators & Template Literals

ในโลกของการทำเว็บและข้อมูล เราไม่ได้แค่เก็บค่าไว้เฉยๆ ครับ แต่เรามักจะนำค่าเหล่านั้นมาคำนวณ เช่น การหาความหนาแน่นของ Keyword (Keyword Density) หรือการสร้างประโยค Metadata แบบอัตโนมัติ วันนี้เราจะมาดูเครื่องมือที่ช่วยให้เรื่องเหล่านี้เป็นเรื่องง่ายกันครับ

1. การคำนวณพื้นฐาน (Arithmetic Operators)

ใน JavaScript เราใช้เครื่องหมายคณิตศาสตร์เหมือนที่ใช้ใน Python หรือเครื่องคิดเลขทั่วไปเลยครับ

💡 Practical Tip สำหรับสาย Data: ตัวเครื่องหมาย % มีประโยชน์มากในการเช็ก "เลขคู่/เลขคี่" เช่น ในการทำตารางสลับสีบนหน้าเว็บ (Zebra Stripes) ถ้า index % 2 === 0 ให้เป็นสีเทา เป็นต้นครับ

2. การเปรียบเทียบ (Comparison Operators)

สิ่งสำคัญที่ต่างจากภาษาอื่นคือ JavaScript มีเครื่องหมาย "เท่ากับ" สองแบบครับ:

• == (Loose Equality): เช็กแค่ "ค่า" (เช่น 5 == "5" จะได้ true ซึ่งอาจทำให้เกิด Bug ได้)
• === (Strict Equality): เช็กทั้ง "ค่า" และ "ชนิดข้อมูล" (แนะนำให้ใช้ตัวนี้เสมอ!)

console.log(10 === 10);   // true
console.log(10 === "10"); // false (เพราะตัวหนึ่งเป็นตัวเลข อีกตัวเป็นข้อความ)

3. Template Literals (Backticks) - พระเอกของบทนี้

หากคุณต้องทำ SEO หรือต้องสร้างข้อความยาวๆ ที่มีตัวแปรแทรกอยู่ การใช้เครื่องหมาย + เชื่อมข้อความแบบเดิมจะทำให้อ่านยากมากครับ

แบบเดิม (ห้ามใช้!):
const meta = "Title: " + title + " | Description: " + desc;

แบบใหม่ (Template Literals):
ใช้เครื่องหมาย **Backtick (``)** (ปุ่มที่อยู่ใต้ Esc) และใส่ตัวแปรใน${ }`

const category = "Laptop";
const count = 25;

// เขียนง่าย อ่านง่าย รองรับการขึ้นบรรทัดใหม่
const seoTitle = `หน้าหมวดหมู่: ${category} (มีสินค้าทั้งหมด ${count} รายการ)`;
console.log(seoTitle);

4. ทำไมสิ่งนี้ถึง Practical?

• สำหรับสาย SEO: คุณสามารถเขียน Script สั้นๆ เพื่อ Generate Meta Description ตามเงื่อนไขได้ง่ายๆ เช่น ถ้าสินค้าลดราคา ให้ใส่ข้อความ "ลดราคาพิเศษ" ต่อท้ายโดยใช้ Template Literals
• สำหรับสาย Data: การจัดฟอร์แมตตัวเลข เช่น การเติมสัญลักษณ์เงินตราหน้าตัวแปร หรือการสร้างรายงานสรุปผล (Summary Report) จะดูสะอาดตากว่าเดิมมาก

Workshop: Dynamic SEO Title Generator

ลองจำลองสถานการณ์ที่เราต้องสร้าง Title Tag สำหรับหน้าสินค้าแบบอัตโนมัติกันครับ:

const productName = "iPhone 15 Pro";
const currentPrice = 35000;
const originalPrice = 41000;
const stock = 5;

// คำนวณส่วนลด
const discount = originalPrice - currentPrice;

// สร้าง Title แบบ Dynamic
const dynamicTitle = `
[ซื้อเลย!] ${productName} - ราคาเพียง ${currentPrice} บาท 
(ประหยัดถึง ${discount} บาท) 
เหลือเพียง ${stock} ชิ้นสุดท้าย!
`;

console.log(dynamicTitle);

สรุป

ใน EP 3 นี้ เราได้เรียนรู้วิธีการคำนวณพื้นฐาน และที่สำคัญที่สุดคือการใช้ Template Literals (Backticks) เพื่อจัดการข้อความอย่างมีประสิทธิภาพ ซึ่งเป็นพื้นฐานสำคัญของการสร้าง Dynamic Content บนเว็บไซต์ครับ