Escape characters ในภาษา JavaScript
ในบทนี้ คุณจะได้เรียนรู้เกี่ยวกับ Escape character ในภาษา JavaScript
Escape characters คืออะไร
Escape character คือตัวอักษรพิเศษที่ไม่สามารถกำหนดหรือแสดงอยู่ใน String เหมือนกับที่มันเป็นได้ อาจเป็นเพราะว่ามันเป็นตัวอักษรที่เป็นส่วนหนึ่งในไวยากรณ์ของภาษา ยกตัวอย่างเช่น เครื่องหมาย Double quote ("
) ใช้สำหรับกำหนดขอบเขต String literal ดังนั้นเพื่อกำหนดมันให้เป็นเนื้อหาของ String เราจะต้องทำการ Escape มันด้วยตัวอักษร Backslash (\
) นี่เป็นตัวอย่าง
console.log("My name is \"John\".");
เมื่อเราต้องการกำหนดค่า "
ให้เป็นเนื้อหาของ String เราจำเป็นต้อง Escape มัน นั่นเป็นเพราะว่า Double ถูกใช้โดยไวยากรณ์ของภาษาสำหรับกำหนดขอบเขตของ String literal
console.log('I\'m a "JavaScript" programmer.');
ในภาษา JavaScript เราสามารถใช้เครื่องหมาย Single quote สำหรับสร้าง String ได้ และเช่นเดียวกัน เมื่อเราต้องการกำหนดค่าของ Single quote ('
) ภายใน String เราจะต้องทำการ Escape มัน อย่างไรก็ตาม เมื่อเราใช้ Single quote ในการสร้าง String เราไม่จำเป็นต้องทำการ Escape
เครื่องหมาย Double quote ที่อยู่ภายใน และในทางกลับกันสำหรับ Double quote
นี่เป็นผลลัพธ์การทำงานของสองคำสั่งด้านบน
My name is "John".
I'm a "JavaScript" programmer.
อีกตัวอย่างหนึ่งของการใช้งาน Escape character ก็คือในกรณีที่เราต้องการให้มีการขึ้นบรรทัดใหม่ใน String แน่นอนว่าเราไม่สามารถพิมพ์มันลงไปบน String โดยตรงได้ ยกตัวอย่างเช่น
// This code gives syntax error
let myString = "First line
Second line
Third line";
จากโค้ดด้านบนจะทำให้เกิดข้อผิดพลาดขึ้นเมื่อเรารันโปรแกรม เนื่องจากว่าการขึ้นบรรทัดใหม่โดยที่ยังไม่ได้ปิด String นั้นทำให้ตัวแปรภาษาไม่สามารถเข้าใจโค้ดของเรา เพื่อแก้ปัญหานี้ เราสามารถใช้ Escape character สำหรับการขึ้นบรรทัดใหม่ได้ ยกตัวอย่างเช่น
let myString = "First line\nSecond line\nThird line\n";
ในตัวอย่างนี้ เป็นการกำหนดการขึ้นบรรทัดใหม่เป็นเนื้อหาของ String ดังนั้นเมื่อเรานำไปแสดงผลหรือคำนวณ มันหมายความว่า String นี้มีสามบรรทัดนั่นเอง
นี่เป็นตารางของ Escape characters ในภาษา JavaScript
Escape character | Description |
---|---|
\b | Backspace |
\t | Tab |
\n | Newline |
\v | Vertical tab |
\f | Form feed |
\r | Carriage return |
\" | Double quote |
\' | Single quote |
\\ | Backslash |
\nnn | Octal bit pattern |
\xnn | Hexadecimal bit pattern |
\unnnn | Four digits Unicode character |
\u{nnnn ...} | Six digits Unicode character |
จากในตารางนั้น เป็นรายการ Escape characters ทั้งหมดในภาษา JavaScript ที่เราสามารถใช้กำหนดค่าให้กับ String ได้ ยกตัวอย่าง เช่น เราสามารถกำหนดค่า Tab ด้วย \t
หรือการขึ้นบรรทัดใหม่ด้วย \n
มาดูตัวอย่างเพิ่มเติม
let users = [
{ id: 10, name: "Andril", lang: "JavaScript" },
{ id: 124, name: "Matteo", lang: "TypeScript" },
{ id: 350, name: "Chris", lang: "Python" },
{ id: 1335, name: "Georgie", lang: "Go" }
];
console.log("ID\tNAME\tLANGUAGE");
for (let user of users) {
console.log(user.id + "\t" + user.name + "\t" + user.lang);
}
นี่เป็นผลลัพธ์การทำงานของโปรแกรม
ID NAME LANGUAGE
10 Andril JavaScript
124 Matteo TypeScript
350 Chris Python
1335 Georgie Go
ในตัวอย่าง เราได้แสดงรายการของชื่อ รหัส และภาษาเขียนโปรแกรมในรูปแบบของตาราง เราได้ใช้ Tab (\t
) เพื่อจัดช่องว่างระหว่างคอลัมน์ให้เท่ากัน; Tab นั้นเป็นตัวอักษรพิเศษที่เราไม่สามารถพิมพ์ค่าของมันเข้าไปใน String โดยตรงได้
ต่อมาเป็นตัวอย่างการใช้งานตัวอักษรสำหรับการขึ้นบรรรทัดใหม่ "\n"
ซึ่งเราจะสร้างปิรามิดจากตัวเลข นี่เป็นโค้ดของโปรแกรม
console.log("Three\nTwo\nOne");
console.log("Creating pyramid of numbers");
let size = 8;
let str = "";
for (let i = 0; i < size; i++) {
for (let j = 0; j < size * 2 - 1; j++) {
let n = Math.abs(size - j - 1);
if (n <= i) {
str += n + 1;
} else {
str += " ";
}
}
str += "\n";
}
console.log(str);
นี่เป็นผลลัพธ์การทำงานของโปรแกรม
Three
Two
One
Creating pyramid of numbers
1
212
32123
4321234
543212345
65432123456
7654321234567
876543212345678
ในตัวอย่างนี้ เราแค่ต้องการแสดงให้คุณเห็นว่าเราสามารถใส่การขึ้นบรรทัดใหม่ได้ด้วย "\n"
เนื่องจากเราสร้าง String str
จากเงื่อนไขการทำงานในคำสั่ง for loop ดังนั้นการแสดงผลในทันทีด้วยฟังก์ชัน console.log
จะทำให้เกิดการขึ้นบรรทัดใหม่ทุกครั้ง ซึ่งเราไม่ต้องการแบบนั้น
str += "\n";
นั่นทำให้เราต้องเก็บค่าไว้ในตัวแปรก่อน และกำหนดการขึ้นบรรทัดใหม่ในตำแหน่งที่เราต้องการ ในกรณีนี้คือหลังจากจบแต่ละแถว และแสดงผลมันออกมาในตอนท้ายด้วยฟังก์ชัน console.log
นอกจากนี้ Escape character ยังมักจะถูกใช้ในกรณีที่เราแสดงตัวอักษรที่ไม่มีบนคีย์บอร์ด ยกตัวอย่างเช่น
console.log("\xa9 MarcusCode 2020"); // © MarcusCode 2020
console.log("5 \xd7 4 = 20"); // 5 × 4 = 20
ในตัวอย่างนี้ เป็นการกำหนดค่าให้กับ String โดยการใช้รหัสตัวอักษรในรูปแบบของเลขฐานสิบหก หลังจากนั้นแสดงข้อความออกทางหน้าจอ
โดยที่ \xa9
มีค่าเท่ากับตัวอักษร ©
และ \xd7
มีค่าเท่ากับเครื่องหมาย ×
ซึ่งเราไม่สามารถพิมพ์ได้จากคีย์บอร์ด ถึงแม้คุณอาจสามารถคัดลอกตัวอักษรเหล่านี้และใส่ลงไปบน String ได้ แต่สำหรับตัวอักษรบางตัวนั้นอาจจะมีการแสดงผลแตกต่างกันเมื่อคุณเปิดโค้ดของคุณบน Editor ที่แตกต่างกัน นี่จึงเป็นวิธีที่ปลอดภัยในการเขียนตัวอักษรที่ไม่ปกติลงใน String
นอกจากนี้ ทุกตัวอักษรในภาษา JavaScript ยังสามารถแสดงได้ในรูปแบบของ Escape character แบบเลขฐานสิบหก และรหัส Unicode ดังนี้
console.log("\x4a\x61\x76\x61\x53\x63\x72\x69\x70\x74"); // JavaScript
console.log("\u3616\u3634\u3625\u3634\u3652\u3607\u3618"); // ภาษาไทย
ในทางปฏิบัติเรามักจะไม่กำหนดค่าตัวอักษรด้วยวิธีนี้ แต่ในบางครั้ง เราอาจจะได้รับข้อมูลจากแหล่งอื่นๆ มาในรูปแบบเหล่านี้ เช่น การเรียกใช้งาน API ที่ส่งค่ากลับเป็นรหัส Unicode
เนื่องจาก Backslash นั้นเป็นตัวอักษรที่ใช้สำหรับ Escape ตัวอักษรอื่นๆ ดังนั้นเพื่อที่จะแสดงตัวอักษรนี้ภายใน String เราจะต้องทำการ Escape มันด้วยตัวมันเอง
console.log("Backslash \\ is an escape character.");
console.log("New Line is escaped with \\n.");
console.log("Tab is escaped with \\t.");
นี่เป็นผลลัพธ์การทำงานของโปรแกรม
Backslash \ is an escape character.
New Line is escaped with \n.
Tab is escaped with \t.
ในตัวอย่างนี้เป็นการแสดงค่าตัวอักษร Escape character ออกมาทางหน้าจอ; \\
นั้นใช้สำหรับกำหนด \
ภายใน String และแสดงออกมาเหมือนกับที่มันเป็น
ในบทนี้ คุณได้เรียนรู้เกียวกับ Escape character ในภาษา JavaScript และได้รู้ว่าเราจะนำมันมาใช้งานอย่างไรในการเขียนโปรแกรม