JavaScript String Interpolation: คู่มือสำหรับผู้เริ่มต้น

JavaScript String Interpolation คือการฝัง expression ลงในสตริง ใช้ Template Literal (backticks) เพื่อฝังค่า variables, คำนวณทางคณิตศาสตร์, หรือ expressions อื่นๆ

Template Literal Syntax

ใช้ backticks ` แทน quotes ตัว expression ใส่ใน ${...}

`This is a string. Here is the value of 9 + 10: ${9 + 10}.`

Expression ${9 + 10} จะคำนวณได้ 19 แล้วฝังเข้าไปในสตริง

ตัวอย่าง String Interpolation

const address_number = "10 Downing Street";
const prime_minister_address = `The Prime Minister's address is ${address_number}.`;
console.log(prime_minister_address);
// The Prime Minister's address is 10 Downing Street

ข้อดี: syntax ชัดเจน ฝังโค้ด JS ได้ตรงในสตริง ไม่ต้อง concatenation (+)

เปรียบเทียบกับ Concatenation

const full_address = `The Prime Minister's address is `;
const address_number = `10 Downing Street`;
const prime_minister_address = full_address + address_number + ".";

Concatenation เพิ่มค่าได้แค่ท้ายสตริง Template literal ฝังได้ตรงกลาง

คำนวณทางคณิตศาสตร์ใน Template Literal

var drink1 = 2.30;
var drink2 = 2.20;
var bill = `The total cost of your drinks is $${drink1 + drink2}.`;
// The total cost of your drinks is $4.50.

Ternary Operators ใน Template Literal

Ternary operator: condition ? valueIfTrue : valueIfFalse ใช้ใน template literal ได้

var drink1 = 2.30;
var drink2 = 2.20;
var total = drink1 + drink2;
var bill = `The total cost of your drinks is $${total}. ${total > 4.00 ? "Would you like to join our coffee club? It will earn you a free coffee for every ten that you buy." : ""}`;
console.log(bill);

ถ้า total > 4.00 จะแสดงข้อความเชิญสมัครสมาชิก มิฉะนั้นแสดงแค่ราคา

สรุป

Template literals (backticks) ใช้ฝังค่าในสตริงได้ง่าย รองรับ calculations, ternary operators, variables ใช้ ${expression} สำหรับ expression ที่ต้องการฝัง