10 เรื่องของ ES6 ที่คุณควรรู้ไว้ (ตอนที่ 2 Template Literals)

10 เรื่องของ ES6 ที่คุณควรรู้ไว้ (ตอนที่ 2 Template Literals)

สวัสดีครับท่านผู้สนใจในการเขียนโปรแกรมด้วยภาษา JavaScript ทุกท่าน บทความนี้เป็นตอนที่ 2 ในซี่รีย์ชุด 10 เรื่องของ ES6 ที่คุณควรรู้ไว้ ครั้งนี้เรามาทำความรู้จักกับ Template Literals กัน มาดูกันเลยดีกว่าครับ

Template literals คืออะไร?

ผมขออธิบายความหมายของ Template literals ในแบบที่ผมเข้าใจก็แล้วกันนะครับ ส่วนตัวผมคิดว่ามันก็คือวิธีในการนำเอา expression มาใช้รวมกับ string literals นั่นเอง ทำให้เราจะได้ผลลัพธ์ออกมาเป็น string ชุดใหม่เอาไปใช้งานกันต่อไป

แล้วเจ้า string literals มันคืออะไรกันละ?

string literals คือการกำหนดให้ source code ของเรารับรู้ว่ารูปแบบอะไรคือข้อความหรือที่เรียกทับศัพท์ว่า string นั่งเอง

โดย JavaScript จะแยกแยะว่า ชุดหรือลำดับของตัวอักษรใดละคือ string มันจะดูจากสิ่งที่ถูกปิดหัวท้ายด้วยเครื่องหมาย '' (single quote) หรือ "" (double quotes) ซึ่งถ้ามันพบรูปแบบนี้เมื่อไรมันฟันธงเลยว่าข้อมูลเหล่านั้นละคือ string มาลองดูตัวอย่างกัน

var hero = 'Superman';

จากตัวอย่าง 'Superman' คือ string literal ที่มีค่าข้อมูลจริงๆ คือ Superman ส่วน '' จะไม่ถือว่าเป็นข้อมูล

แล้ว expression ละคืออะไร?

expression ในที่นี้ก็สามารถเป็นได้ทั้ง ตัวแปร, การดำเนินการทางคณิตศาสร์ เช่น + หรือผลลัพธ์ที่ได้จาก function ก็ได้เป็นต้น

Template literals ใน ES5

ใน ES5 ปกติเราจะใช้วิธีเครื่องหมาย + ในการเชื่อม string มากกว่า 1 ชุด เพื่อให้ได้เป็นผลลัพธ์ของ string ชุดใหม่ ตัวอย่างเช่น

var firstName = 'Supot';
var lastName = 'Sukvaree';

// ใช้เครื่องหมาย + ในการเชื่อมข้อความ
var tl = 'My name is ' + firstName + ' ' + lastName;

// ดูผลลัพธ์บน console
console.log(name);

เราสามารถเชื่อมผลลัพธ์ที่ได้จาก function กับข้อความได้เช่นกัน มาดูตัวอย่างกัน

function getFullname() {
  return 'Supot  Sukvaree';
}

// นำค่าที่ return กลับมาจาก function มาเชื่อมกับข้อความ
var tl = 'My name is ' + getFullname();
console.log(tl);

หรือเราสามารถเชื่อมผลลัพธ์ของการดำเนินการกับข้อความได้เหมือนกัน

var a = 5;
var b = 10;
console.log("Fifteen is " + (a + b) + " and\nnot " + (2 * a + b) + ".");

Template literals ใน ES6

ES6 มีการปรับรูปแบบไวยกรณ์ของการใช้งานนิดหน่อย นั่นคือมันจะใช้เครื่องหมาย ` ` (back-tick) ครอบส่วนของ template literal แทนการใช้งาน '' หรือ "" และใน template literal ก็สามารถที่จะมีสิ่งที่เรียกว่า place holders ไว้ภายในเครื่องหมาย ` ` ได้

หน้าตาของ place holders จะเป็นแบบนี้ ${expression} มาดูตัวอย่างการใช้งานกัน

var firstName = `Supot`;
var lastName = `Sukvaree`;
var tl = `My name is ${firstName} ${lastName}`;
console.log(tl);

การเชื่อมผลลัพธ์ที่ได้จาก function กับข้อความก็ปรับเปลี่ยนไปเล็กน้อย

function getFullname() {
  return 'Supot  Sukvaree';
}
let tl = `My name is ${getFullname()}`;
console.log(tl);

การเชื่อมผลลัพธ์ของการดำเนินการกับข้อความก็ดูสั้นลง

var a = 5;
var b = 10;
console.log(`Fifteen is ${a + b} and\nnot ${2 * a + b}.`);

Multi-line string

ในการใช้งาน template literals สิ่งหนึ่งที่เราจะมีการใช้งานและพบเจอกันอยู่บ่อยๆ ก็คือการเชื่อมข้อความหลายๆ บรรทัดเข้าด้วยกัน โดยใน ES5 เราจะใช้รูปแบบการเชื่อมข้อความหลายๆ บรรทัดเข้าด้วยกันด้วยวิธีดังนี้

var tl = 'Multi-line string in ES5'
 + 'with "\+" operator '
 + 'string line 3';
console.log(tl);

หรือใช้อีกวิธีหนึ่งได้เช่นกัน

var tl = 'Multi-line string in ES5\n\
using \\n\\';
console.log(tl); // ผลลัพธ์ของการใช้ \n\ จะทำให้มีช่องว่างเกิดขึ้นในข้อความ

ส่วนใน ES6 เราสามารถใช้ ` ` (backticks) แทนได้ แบบนี้

let tl = `Multi-line string in ES6
using \`\``;
console.log(tl);

คงพอทำให้เห็นรูปแบบการใช้งานของ template literals ใน ES6 กันไปพอสมควรนะครับ ชื่นชอบสไตร์การใช้งาน Template literals ของ ES6 หรือ ES5 กันแบบไหนก็ลองพูดคุยกันได้นะครับ ขอจบบทความนี้เพียงเท่านี้ก่อน ติดตามเรื่อง Enhanced Object Literals กันในตอนต่อไปครับ