String ในภาษา JavaScript

ในบทนี้ คุณจะได้เรียนรู้เกี่ยวกับ String ในภาษา JavaScript เราจะพูดถึงการประกาศและใช้งาน และแนะนำการใช้งานเมธอดของ String ในเบื้องต้น นี่เป็นเนื้อหาในบทนี้

• การประกาศและใช้งาน String
• การหาความของ String
• การเชื่อมต่อ String
• การเปรียบเทียบ String
• Template string
• String slicing
• ชุดลำดับของตัวอักษร
• เมธอดของ String

การประกาศและใช้งาน String

String (สตริง) คือประเภทข้อมูลที่ใช้สำหรับเก็บข้อมูลในรูปแบบลำดับของตัวอักษรหรือข้อความ ซึ่งเป็นข้อมูลที่สามารถอธิบายได้ในรูปแบบของข้อความหรือคำพูด; String เป็นประเภทข้อมูลพื้นฐานจากคลาส String และมีเมธอดเป็นจำนวนมากที่เราสามารถใช้สำหรับจัดการกับ String ได้

ก่อนที่เราจะสามารถใช้งาน String เราจะต้องประกาศหรือสร้างมันขึ้นมาก่อน นี่เป็นตัวอย่างการประกาศ String ในภาษา JavaScript

let str1 = "This is double quote string";
let str2 = 'This is single quote string';

ในตัวอย่างเราได้ประกาศสองตัวแปรเพื่อเก็บข้อมูลประเภท String; ในภาษา JavaScript นั้นเราสามารถกำหนด String literal โดยการใช้เครื่องหมาย Double quote (") หรือ Single quote (') ซึ่งทั้งสองรูปแบบนั้นให้ผลลัพธ์ที่เหมือนกัน สำหรับในบทเรียนนี้เราจะใช้ Double quote เป็นหลัก

ส่วนข้อแตกต่างระหว่างการกำหนด String literal ของทั้งสองรูปแบบก็คือการใช้งาน Escape characters นั่นคือเมื่อเราต้องการกำหนดเครื่องหมาย " ให้เป็นเนื้อหาของ String สำหรับ String ที่ประกาศด้วย Double quote เราจะต้องทำการ Escape มัน ยกตัวอย่างเช่น

let sentence1 = "I'm a \"JavaScript\" language";
let sentence2 = 'I\'m a \'JavaScript\' language';

เนื่องจากเครื่องหมาย Double quote และ Single quote นั้นใช้สำหรับกำหนดขอบเขตของ String literal ดังนั้นเพื่อกำหนด Double quote (") เป็นเนื้อหาของ String เราต้องทำการ Escape มันด้วย \" และเช่นเดียวกัน เพื่อกำหนด Single quote (') เป็นเนื้อหาของ String เราต้องทำการ Escape มันด้วย \' ซึ่งตัวอักษรเหล่านี้มีชื่อเรียกว่า Escape characters

คุณสามารถเรียนรู้เพิ่มเติมเกี่ยวกับ Escape character ได้ในบท Escape character ในภาษา JavaScript

การหาความของ String

เนื่องจาก String นั้นเก็บข้อมูลเป็นชุดลำดับของตัวอักษร ดังนั้นเราสามารถตรวจสอบความยาวของมันได้โดยการอ่านค่าจาก Property length ของ String โดยค่าที่ส่งกลับนั้นจะเป็นจำนวนของตัวอักษรทั้งหมดที่ปรากฏใน String นี่เป็นตัวอย่างของการหาความของ String ในภาษา JavaScript

let site = "marcuscode";
let fullname = "Matteo Marcus";
let year = "2020";
console.log("Length of site: " + site.length);
console.log("Length of fullname: " + fullname.length);
console.log("Length of year: " + year.length);

นี่เป็นผลลัพธ์การทำงานของโปรแกรม

Length of site: 10
Length of fullname: 13
Length of year: 4

ในตัวอย่างเราได้ประกาศตัวแปรสามตัวสำหรับเก็บ String ที่มีความยาวที่แตกต่างกัน จากนั้นเรียกใช้งาน Property length เพื่อรับเอาความยาวของ String และแสดงผลออกทางหน้าจอ

สำหรับความยาวของ String ที่มีการกำหนด Literal ในรูปแบบของ Escape character นั้นจะนับเป็นหนึ่งตัวอักษรเท่านั้น ยกตัวอย่างเช่น

let lang = "\"JS\"";
console.log("Content: " + lang);
console.log("Length: " + lang.length);

นี่เป็นผลลัพธ์การทำงานของโปรแกรม

Content: "JS"
Length: 4

จะเห็นว่า \" ถูกนับเป็นเพียงหนึ่งตัวอักษรซึ่งเป็นสิ่งที่ถูกต้องแล้ว เพราะมันเป็นค่าที่แสดงแทนเครื่องหมาย Double quote นั่นเอง

มีหลายอย่างที่เราสามารถทำได้กับความยาวของ String ยกตัวอย่างเช่น คุณสามารถเขียนโปรแกรมเพื่อให้ผู้ใช้งานโปรแกรมตั้งชื่อของพวกเขา โดยมีเงื่อนไขอยู่ว่าชื่อนั้นต้องไม่สั้นจนเกินไป นี่เป็นตัวอย่าง

// Assume to get from user
let name = "Metin";

if (name.length < 4) {
    console.log("Name is too short! try longer name");
} else if (name.length > 16) {
    console.log("Name is too long! try shorter name");
} else {
    console.log("Nice! you can use this name.");
}

นี่เป็นผลลัพธ์การทำงานของโปรแกรม

Nice! you can use this name.

ในตัวอย่าง เป็นโปรแกรมเพื่อตรวจสอบว่าชื่อมีความยาวตามที่กำหนดระหว่าง 4 - 16 ตัวอักษรหรือไม่ ถ้ามีความยาวน้อยกว่า 4 ตัวอักษร โปรแกรมแสดงข้อความแจ้งเตือนว่าชื่อของคุณนั้นสั้นเกินไป หรือแจ้งว่ายาวเกินไปหากมากกว่า 16 ตัวอักษร

การเชื่อมต่อ String

เราสามารถเชื่อมต่อสอง String เข้าด้วยกันได้ด้วยการใช้ตัวดำเนินการ + อย่างที่รู้กันว่าตัวดำเนินการนี้เป็นตัวดำเนินการทางคณิตศาสตร์ที่ใช้สำหรับบวกตัวเลข แต่เมื่อใช้กับ String มันจะกลายมาเป็นตัวดำเนินการสำหรับเชื่อมต่อ String แทน นี่เป็นตัวอย่างของการเชื่อมต่อ String ในภาษา JavaScript

let firstName = "Mateo";
let lastName = "Marcus";
let fullname = firstName + lastName;
let lang = "Java" + "Script";

console.log(fullname);
console.log(lang);

นี่เป็นผลลัพธ์การทำงานของโปรแกรม

MateoMarcus
JavaScript

ในตัวอย่าง เป็นการเชื่อมต่อสอง String เข้าด้วยกันด้วย String literal และด้วยค่าในตัวแปร ผลลัพธ์ที่ได้จะเป็น String ใหม่จากการรวมกันของ String ทั้งสอง

การเรียกใช้ตัวดำเนินการต่อเนื่องกันในคำสั่งเดียวนั้นสามารถทำได้ เช่น ในกรณีที่เรามีหลาย String และต้องการเชื่อมต่อพร้อมกันทั้งหมดในคำสั่งเดียว

let firstName = "Mateo";
let lastName = "Marcus";
let fullname = firstName + " " +  lastName;
let numbers = "One " + "Two " + "Three " + "Four";

console.log(fullname);
console.log(numbers);

นี่เป็นผลลัพธ์การทำงานของโปรแกรม

Mateo Marcus
One Two Three Four

ในตัวอย่างนี้เป็นการเรียกใช้งานตัวดำเนินการเชื่อม String หลายครั้งเพื่อเชื่อมต่อหลาย String เข้าด้วยกันในคำสั่งเดียว การทำงานของตัวดำเนินการจะทำจากซ้ายไปขวา ยกตัวอย่างเช่น "One " และ "Two " จะถูกนำมาเชื่อมต่อกันก่อน จากนั้นนำผลลัพธ์ที่ได้ไปเชื่อมต่อกับ "Three " และ "Four" ตามลำดับ

ในการเชื่อมต่อ String ในภาษา JavaScript นั้นสิ่งหนึ่งที่คุณควรระวังก็คือเมื่อเชื่อมต่อ String กับข้อมูลประเภทอื่นๆ ค่าเหล่านั้นจะถูกแปลงเป็น String อัตโนมัติ ยกตัวอย่างเช่น

console.log(1 + "string");  // 1string
console.log("string" + 1);  // string1

ในตัวอย่างจะเห็นว่าตัวเลขจะถูกแปลงค่าเป็น String เสมอ ไม่สำคัญว่ามันจะอยู่หน้าหรือหลังตัวดำเนินการ

การเปรียบเทียบ String

การทำงานพื้นฐานอย่างหนึ่งเกี่ยวกับ String ก็คือการเปรียบเทียบ String ในภาษา JavaScript นั้นเราสามารถใช้ตัวดำเนินการเปรียบเทียบเท่ากับ ไม่เท่ากับ น้อยกว่า หรือมากกว่า ในการเปรียบเทียบ String ได้นี่เป็นตัวอย่าง

let username = "metin";
let password = "1234";

if (username == "metin") {
    console.log("Username is valid.");
} else {
    console.log("Username is invalid.");
}

if (password == "secret") {
    console.log("Password is valid.");
} else {
    console.log("Password is invalid.");
}

นี่เป็นผลลัพธ์การทำงานของโปรแกรม

Username is valid.
Password is invalid.

ในตัวอย่าง เป็นการใช้ตัวดำเนินการเปรียบเทียบเท่ากับ เพื่อตรวจสอบว่าค่าของ String ในตัวแปร username และ password นั้นเท่ากับค่าที่กำหนดหรือไม่ โดยการใช้คำสั่ง if สำหรับตรวจสอบเงื่อนไขและแสดงผลลัพธ์การเปรียบเทียบออกทางหน้าจอ

นอกจากนี้เรายังสามารถใช้ตัวดำเนินการเปรียบเทียบน้อยกว่า หรือมากกว่า ในการเปรียบเทียบค่าของ String ได้ยกตัวอย่างเช่น

console.log("bat" < "cat"); // true
console.log("TS" > "JS");   // true

ผลลัพธ์การเปรียบเทียบนั้นจะยึดตามลำดับในพจนานุกรม เนื่องจาก "Bat" นั้นมาก่อน "Cat" ดังนั้นมันจึงมีค่าน้อยกว่า "Cat" และเช่นเดียวกัน เนื่องจาก "TS" นั้นมาหลังจาก "JS" ดังนั้นมันจึงมีค่ามากกว่า "JS" นั่นเอง

ในความเป็นจริงแล้ว การเปรียบเทียบ String ในภาษา JavaScript ไม่ได้ยึดตามลำดับในพจนานุกรมเสียทีเดียว แต่มันยึดจากของรหัสของตัวอักษรที่เรียกว่า Unicode ซึ่งรหัสนี้ใช้จัดลำดับว่าตัวอักษรไหนมาก่อนและหลังในภาษา JavaScript ซึ่งตัวอักษรที่มาก่อนหมายความว่ามันมีค่าน้อยกว่าตัวอักษรที่มาทีหลัง

Template string

นอกจากการประกาศ String โดยการใช้เครื่องหมาย Double quote และ Single quote แล้ว เรายังสามารถประกาศ String ในรูปแบบของ Template string ได้ โดยการล้อมรอบ String ด้วยเครื่อหมาย Back-trick (`) นี่เป็นตัวอย่างของการประกาศ Template string ในภาษา JavaScript

let str1 = `This is a template string`;
let str2 = `I'm learning "JavaScript"`;

ในตัวอย่าง เป็นกำหนดค่าของ String ในรูปแบบของ Template string literal ตัวแปรแรก str1 นั้นเก็บค่าของ String อย่างง่าย ส่วนตัวแปรที่สองนั้นแสดงให้เห็นว่าในการกำหนดตัวอักษร Double quote หรือ Single quote ใน String เราไม่จำเป็นต้องใช้ Escape characters

นอกจากนี้ การใช้งาน Template string ยังช่วยให้สามารถแทนค่า Expression ใดๆ ลงไปใน String ได้โดยการกำหนดตัวแทนค่าในรูปแบบ ${expression} ยกตัวอย่างเช่น

let name = "Metin";
let lang = "JavaScript";
let str = `${name} is a ${lang} programmer.`;
console.log(str);

let a = 2;
let b = 3;
console.log(`The result of ${a} + ${b} is ${a + b}.`);

นี่เป็นผลลัพธ์การทำงานของโปรแกรม

Metin is a JavaScript programmer.
The result of 2 + 3 is 5.

ค่าของตัวแปร name และ lang ถูกแทนค่าลงไปใน ${name} และ ${lang} ตามลำดับ และในส่วนถัดมา ถ้าหากค่าของ Expression ไม่เป็น String มันจะถูกแปลงเป็น String อัตโนมัติก่อนการแทนค่า

สำหรับการแทนค่าใน Template string จะเห็นว่าการทำงานของมันจริงๆ แล้วเหมือนกับการเชื่อมต่อ String นั่นเอง แต่การแทนค่าในรูปแบบนี้จะช่วยทำให้โค้ดสามารถอ่านได้ง่ายขึ้น ในกรณีที่เราต้องการแทรก Expression ที่ซับซ้อนใน String

อีกคุณสมบัติหนึ่งของ Template string ก็คือมันสามารถทำให้เราประกาศ String แบบหลายบรรทัดได้โดยไม่ต้องใช้ Escape \n สำหรับการขึ้นบรรทัดใหม่ ยกตัวอย่างเช่น

let multilineStr = `This is line 1
This is line 2
This is line 3
This is the last line
`;

ในตัวอย่างนี้ เราได้ประกาศ String ที่มีเนื้อหาทั้งหมด 4 บรรทัดโดยเราสามารถใช้การขึ้นบรรทัดใหม่ได้เลย ทุกอย่างที่อยู่ภายในเครื่องหมาย ` จะกลายมาเป็นเนื้อหาของ String

การประกาศ String แบบหลายบรรทัดนั้นมีประโยชน์ในกรณีที่เราต้องการจัดให้ String ในโค้ดสามารถอ่านได้ง่าย หรือในกรณีที่ String มีการขึ้นบรรทัดใหม่เป็นจำนวนมากและต้องการการเว้นวรรค เช่น แท็บ นี่เป็นตัวอย่าง

let fontSize = 18;

let styles = `
body {
    background: #fff;
    font-family: Tahoma, Verdana, Segoe, sans-serif;
    font-size: ${fontSize}px;
    padding: 1rem;
}
`;

ในตัวอย่างเป็นการใช้งาน Template string สำหรับกำหนด CSS เพื่อจัดเก็บรูปแบบเดิมของมันเอาไว้ และมันยังทำได้เราอ่านได้ง่ายขึ้นอีกด้วย

String slicing

ในภาษา JavaScript เราสามารถตัด String ที่มีอยู่ให้เป็น String ใหม่จากช่วง Index ที่กำหนดได้โดยการใช้เมธอด slice นี่เป็นรูปแบบการใช้งานของเมธอด

let newStr = str.slice(beginIndex[, endIndex]);

เมธอด slice รับพารามิเตอร์สองตัวคือ Index เริ่มต้นและ Index สิ้นสุด (ที่ไม่รวมเมื่อ String ถูกตัด) สำหรับตัด String และส่งค่ากลับเป็น String ใหม่จากช่วงที่กำหนด นี่เป็นตัวอย่าง

let name = "marcuscode";
console.log(name.slice(0, 6));  // marcus
console.log(name.slice(3, 6));  // cus
console.log(name.slice(6));     // code

ในตัวอย่าง เป็นการใช้งานเมธอด slice สำหรับตัดเอาคำออกจาก String "marcuscode" ในคำสั่งสุดท้าย ถ้าหากเราไม่กำหนดพารามิเตอร์สำหรับ Index สิ้นสุด เมธอด slice จะตัดเอาจนถึงตัวอักษรสุดท้ายของ String

ในการใช้งานเมธอด slice สำหรับตัด String เรายังสามารถใช้ Index ที่เป็นลบได้ โดยที่ -1 หมายถึงตัวอักษรตัวสุดท้ายใน String และ -2 เป็นตัวถัดมาจากตัวสุดท้าย ตามลำดับ นี่เป็นตัวอย่าง

let fruits = "Apple Banana Orange Grape";
console.log(fruits.slice(0, 6));    // Apple
console.log(fruits.slice(-19, 12)); // Banana
console.log(fruits.slice(-12, -6)); // Orange
console.log(fruits.slice(-5));      // Grape

จะเห็นว่าเราสามารถใช้ค่า Index ที่เป็นลบโดยอ้างอิงจากตัวอักษรตัวสุดท้ายของ String ได้และสามารถใช้ Index ทั้งบวกและลบร่วมกันได้

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

let str = "Revolution";
console.log(str.substring(5, 2));  // "vol" 
console.log(str.slice(5, 2));      // ""

เนื่องจาก Index แรกมากกว่า Index ที่สอง เมธอด substring จะสลับพารามิเตอร์และตัด String เป็น str.substring(2, 5) แทน ในขณะที่เมธอด slice ทำงานตามที่เราเขียนและได้ผลลัพธ์เป็นค่าว่าง

ชุดลำดับของตัวอักษร

String นั้นเก็บข้อมูลเป็นชุดลำดับของตัวอักษรคล้ายกับอาเรย์ เราสามารถเข้าถึงตัวอักษรแต่ละตัวใน String ได้ด้วย str[index] และมันสามารถวนรอบด้วยคำสั่งวนซ้ำได้

let name = "marcuscode";
console.log("name[0]: " + name[0]);
console.log("name[1]: " + name[1]);
console.log("name[9]: " + name[name.length - 1]);

นี่เป็นผลลัพธ์การทำงานของโปรแกรม

name[0]: m
name[1]: a
name[9]: e

ในตัวอย่าง เป็นการเข้าถึงตัวอักษรใน String ด้วย Index ของมัน โดยที่ค่า Index ของ String นั้นเริ่มต้นจาก 0 สำหรับตัวอักษรตัวแรก ไปจนถึงขนาดของ String - 1 สำหรับตัวอักษรตัวสุดท้าย

String นั้นเป็นออบเจ็คที่สามารถวนรอบได้ เราสามารถใช้คำสั่ง for of สำหรับวนแต่ละตัวอักษรใน String ได้ นี่เป็นตัวอย่าง

let name = "marcuscode";
for (let ch of name) {
    console.log(ch);
}

และให้คุณลองรันมันสำหรับผลลัพธ์

เมธอดของ String

String นั้นเป็นประเภทข้อมูลจากคลาส String ซึ่งมีเมธอดเป็นจำนวนมากที่เราสามารถใช้ในการจัดการกับ String นี่เป็นตัวอย่างการใช้งานเมธอดของ String เบื้องต้น

console.log("marcuscode".includes("code"));
console.log("marcuscode".repeat(3));
console.log("marcuscode".substring(3, 6));
console.log("marcuscode".toUpperCase());
console.log("marcuscode".toLowerCase());
console.log("  marcuscode  ".trim());

นี่เป็นผลลัพธ์การทำงานของโปรแกรม

true
marcuscodemarcuscodemarcuscode
cus
MARCUSCODE
marcuscode
marcuscode

ในตัวอย่าง เป็นการใช้งานเมธอดต่างๆ ของ String เมธอด includes ใช้เพื่อตรวจสอบว่าภายใน String ประกอบไปด้วยคำที่กำหนดหรือไม่ เมธอด repeat ใช้สำหรับสร้าง String ใหม่ตามจำนวนครั้งที่กำหนด เมธอด substring ใช้สำหรับตัดส่วนของ String

ส่วนเมธอด toUpperCase และเมธอด toLowerCase นั้นใช้สำหรับแปลงข้อความเป็นตัวพิมพ์ใหญ่และตัวพิมพ์เล็กตามลำดับ และสุดท้ายเมธอด trim ใช้สำหรับตัดช่องว่างที่อยู่หน้าและหลัง String ออกไป

สำหรับการใช้งานเมธอดของ String อย่างละเอียด คุณจะได้เรียนรู้อีกครั้งในบท String methods เราจะแนะนำให้คุณรู้จักกับเมธอดที่สำคัญของ String

ในบทนี้ คุณได้เรียนรู้เกี่ยวกับ String ในภาษา JavaScript เราได้ครอบคลุมการประกาศ String ในรูปแบบต่างๆ และการดำเนินการเกี่ยวกับ String เช่น การเชื่อมต่อและการเปรียบเทียบ String เป็นต้น สุดท้ายเป็นการแนะนำการใช้งานเมธอดของ String ในเบื้องต้น