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 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 และได้รู้ว่าเราจะนำมันมาใช้งานอย่างไรในการเขียนโปรแกรม