ความสำคัญของ ES6 Template Strings ใน JavaScript

Template Strings (Template Literals) ES6 ใช้ backtick (`) และ ${expression} รวมสตริงได้อ่านง่าย ไม่ต้อง escape quote ไม่ต้องใช้ + ซ้ำๆ

วิธีเดิม concat() และ join()

<html> <body> <script> 
    const platform = 'Tutorix'; 
    const joinMethod = ['The', 'best', 'e-learning', 'platform', 'is', platform].join(' '); 
    document.write(joinMethod); 
    document.write("<br>"); 
    const concatMethod = " ".concat('The ', 'best ', 'e-learning ', 'platform ', 'is ', platform); 
    document.write(concatMethod); 
</script> </body> </html>

ผลลัพธ์

The best e-learning platform is Tutorix (แสดง 2 บรรทัดเหมือนกัน)

วิธี ES6 Template Strings

<html> <body> <script> 
    const platform = 'Tutorix'; 
    const templateString = `The best e-learning platform is ${platform}`; 
    document.write(templateString); 
</script> </body> </html>

ผลลัพธ์

The best e-learning platform is Tutorix

โค้ดกระชับ อ่านง่าย รองรับ multiline และ expression ภายใน ${}