10 เรื่องของ ES6 ที่คุณควรรู้ไว้ (ตอนที่ 2 Template Literals)
Tags: javascript
Published: 2021-05-17 06:00:37

---
title: 10 เรื่องของ ES6 ที่คุณควรรู้ไว้ (ตอนที่ 2 Template Literals)
published: true
description: 
tags: javascript
//cover_image: https://direct_url_to_image.jpg
---

## 10 เรื่องของ ES6 ที่คุณควรรู้ไว้ (ตอนที่ 2 Template Literals)
สวัสดีครับท่านผู้สนใจในการเขียนโปรแกรมด้วยภาษา `JavaScript` ทุกท่าน บทความนี้เป็นตอนที่ 2 ในซี่รีย์ชุด [10 เรื่องของ ES6 ที่คุณควรรู้ไว้](https://dev.to/iammen/10-es6-1-default-function-parameter-2ej) ครั้งนี้เรามาทำความรู้จักกับ Template Literals กัน มาดูกันเลยดีกว่าครับ

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

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

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

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



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

```javascript
var hero = 'Superman';
```

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



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

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


### Template literals ใน ES5

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

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

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

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

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

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

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

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

```javascript
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}` มาดูตัวอย่างการใช้งานกัน

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

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

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

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

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



### Multi-line string

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

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

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

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

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

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



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