String ในภาษา TypeScript

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

• การประกาศและใช้งาน String
• การเชื่อมต่อ String
• การเข้าถึงและอ่านค่าใน String
• Template literals
• เมธอดของ String

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

String นั้นมีประเภทข้อมูลเป็น string ในภาษา TypeScript มันเป็นออบเจ็คที่สร้างมาจากคลาส String ซึ่งประกอบไปด้วยเมธอดเป็นจำนวนมาก การประกาศ String นั้นสามารถทำได้หลายวิธี นี่เป็นวิธีการประกาศ String ในภาษา TypeScript

let lastName: string = "Cristo";
let firstName: string = "Mateo";

ในตัวอย่างนี้ เป็นการประกาศสองตัวแปร String สำหรับเก็บชื่อและนามสกุลของบุคคล การกำหนดเนื้อหาของ String จะต้องอยู่ภายในเครื่องหมาย Double quote (") ซึ่งเราเรียกมันว่า String literal

let fullName: string = "Mateo Cristo";
let productCode: string = "abc123";
let empty: string = "";

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

let siteName: string = "marcuscode";
console.log("Length of siteName:", siteName.length);
// => Length of siteName: 10

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

นอกจากนี้ String ยังมี Escape character ที่ใช้แทนตัวอักษรพิเศษบางตัวที่แสดงได้ยากใน String literal หรือตัวอักษรที่มีความหมายพิเศษที่ใช้งานโดยไวยากรณ์ของภาษา เช่น การขึ้นบรรทัดใหม่ แท็บ หรือตัวอักษร Double quote ที่ใช้ในการกำหนด String literal และนี่เป็นตัวอย่างการกำหนดค่าแท็บใน String

console.log("ID\tNAME");
console.log("1\tJames");
console.log("2\tSemih");

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

ID      NAME
1       James
2       Semih

เนื่องจากการกำหนดค่าของแท็บใน String literal นั้นอาจยากและมีความสับสนกับช่องว่าง ดังนั้นเราสามารถใช้ตัวอักษรพิเศษ \t ที่เรียกว่า Escape character เพื่อแสดงถึงค่าของแท็บได้

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

let message: string = "I \"love\" TypeScript";
console.log(message);
// => I "love" TypeScript

นอกจากนี้ ในการกำหนดการขึ้นบรรทัดใหม่ใน String นั้นก็จะใช้ตัวอักษรพิเศษ \n แทนเช่นเดียวกัน นี่เป็นตัวอย่างในการกำหนดการขึ้นบรรทัดใหม่ให้เป็นเนื้อหาของ String ในภาษา TypeScript

let numbers: string = "One\nTwo\nThree\n";
console.log(numbers);

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

One
Two
Three

การขึ้นบรรทัดใหม่ไม่สามารถแสดงได้โดยตรงใน String literal ในกรณีนี้ทำให้เราใช้ตัวอักษรพิเศษ \n ที่หมายถึงการขึ้นบรรทัดใหม่ อย่างไรก็ตาม มีตัวอักษรเป็นจำนวนมากที่จะต้องแสดงด้วย Escape character ใน String

Escape character จะขึ้นต้นด้วยเครื่องหมาย \ และตามด้วยหนึ่งตัวอักษรที่มีความหมายถึงตัวอักษรต่างๆ ใน String และเนื่องจากตัวอักษรเหล่านี้นี้มีเป็นจำนวนมากและเราจะไม่ครอบคลุมมันในบทนี้

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

การเชื่อมต่อ String คือการเชื่อมต่อสอง String เข้าด้วยกันและได้ผลลัพธ์เป็น String ใหม่ ซึ่งสามารถทำได้โดยใช้ตัวดำเนินการ + หรือเมธอด concat บนออบเจ็คของ String นี่เป็นตัวอย่างของการเชื่อมต่อ String ในภาษา TypeScript

let message: string = "Hello" + " Jan";
let siteName: string = "marcus" + "code";

นี่เป็นการเชื่อมต่อ String ด้วยตัวดำเนินการ + ซึ่งเป็นตัวดำเนินการที่ถูก Override เพื่อใช้งานกับ String มันส่งค่ากลับเป็น String ใหม่ที่ได้รับการเชื่อมต่อแล้ว นอกจากนี้ เรายังสามารถใช้เมธอด concat เพื่อให้ได้รับผลลัพธ์เช่นเดียวกัน

let message: string = "Hello".concat(" Jan");
let siteName: string = "marcus".concat("code");

ในตัวอย่างที่สองนี้ เป็นการเชื่อมต่อ String ด้วยเมธอด concat นี่ให้ผลลัพธ์เช่นเดียวกันกับการใช้ตัวดำเนินการ + ในการเชื่อมต่อ ซึ่งทั้งสองตัวอย่างนั้นให้ผลลัพธ์การทำงานของโปรแกรมเป็นดังนี้

Hello Jan
marcuscode

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

การเข้าถึงและอ่านค่าใน String

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

let city: string = "Brooklyn";

console.log(city);
console.log("Length:", city.length);
console.log(city[0]);
console.log(city[1]);
console.log(city[city.length - 1]);

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

Brooklyn
Length: 8
B
r
n

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

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

let city: string = "Brooklyn";
let reversed: string = "";

for (let i = 0; i < city.length; i++) {
    reversed = city[i] + reversed;
}

console.log("Original", city);
console.log("Reversed", reversed);

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

Original Brooklyn
Reversed nylkoorB

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

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

let plan: string = "Orchid";

for (let ch of plan) {
    console.log(ch);
}

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

O
r
c
h
i
d

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

let song: string = "Wildfire";
song[0] = "w";

นี่เป็นข้อผิดพลาดที่เกิดขึ้นจากการรันโปรแกรม

TypeError: Cannot assign to read only property '0' of string 'Wildfire'

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

Template literals

Template literals หรือ Template strings เป็นการกำหนดเนื้อหาของ String ด้วยเครื่องหมายแบคทิค (`) ที่อนุญาติให้มีการแทรกนิพจน์ลงไปบน String หรือเรียกว่าการแทนที่ใน String นอกจากนี้ มันยังอนุญาติให้กำหนดตัวอักษรใน String ได้โดยไม่ต้องใช้ Escape character

นี่เป็นตัวอย่างการประกาศ String ด้วย Template literals ในภาษา TypeScript

let message: string = `This is template literals string.`;
let speech: string = `Hi my name is John.`;

นี่เป็นประกาศสองตัวแปร String ที่เป็นการกำหนดค่าของ String ในรูปแบบของ Template literals ที่จะใช้เครื่องหมาย Backtick (`) แทน และในตอนนี้ทั้งสองตัวแปรยังไม่ได้มีอะไรพิเศษไปจากการประกาศตัวแปรด้วย String ในรูปแบบปกติ

ในการใช้งาน Template strings เราสามารถแทรกนิพจน์ลงไปในเนื้อหาของ String ได้ในรูปแบบ ${exp} โดยที่ exp สามารถเป็น Literal ตัวแปร หรือนิพจน์ใดๆ ในภาษา TypeScript โดยค่าของมันจะถูกแปลงเป็น String ก่อนการแทนที่ นี่เป็นตัวอย่าง

let name: string = "John";
let age: number = 30;

let message = `My name is ${name} and I'm ${age} years old.`;
console.log(message);

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

My name is John and I'm 30 years old.

ในตัวอย่างนี้ เป็นโปรแกรมแสดงคำทักทายชื่อและอายุออกทางหน้าจอ และเราได้แทรกนิพจน์ ${name} และ ${age} ให้เป็นการแทนค่าลงใน String ซึ่งนี่จะถูกแทนที่ด้วยค่าในตัวแปรทั้งสอง หากสังเกตจะเห็นว่านี่ไม่แตกต่างจากการเชื่อมต่อ String ด้วยตัวดำเนินการ + โดยการเขียนเช่นนี้

let message = "My name is " + name + " and I'm " + age + " years old.";

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

let a: number = 2;
let b: number = 3;

console.log(`Let's a = ${a}, b = ${b}, then a + b would be ${a + b}.`);

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

Let's a = 2, b = 3, then a + b would be 5.

นี่เป็นการแสดงผลรวมของค่าในตัวแปร a และ b โดยใช้การแทนที่ใน String สำหรับสร้างผลลัพธ์ในรูปแบบคำอธิบาย จะเห็นว่าแม้ประเภทข้อมูลของนิพจน์ทั้งหมดจะเป็นตัวเลข แต่มันจะถูกแปลงเป็น String อัตโนมัติโดยการทำงานของ Template literals

นอกจากนี้ อย่างที่ได้บอกไปก่อนหน้าว่า Template literals ทำให้เราสามารถกำหนดค่าของ String แบบหลายบรรทัดโดยใช้การขึ้นบรรทัดใหม่ได้โดยที่ไม้ต้องใช้ตัวอักษร Escape character \n นี่เป็นตัวอย่าง

let lyrics: string = `I'll be your angel
You'll be my flower girl
When it gets painful
I'll take all I can endure`;

console.log(lyrics);

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

I'll be your angel
You'll be my flower girl
When it gets painful
I'll take all I can endure

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

Template literals นั้นสามารถใช้ได้กับเกือบทุกตัวอักษรโดยที่ไม่ต้องทำการ Escape ก่อน ยกเว้น Backtick (`) นั่นเป็นเพราะว่ามันใช้เป็นตัวกำหนดขอบเขตให้กับ Template literals อยู่แล้ว และตัวอักษร $, { และ } ที่ใช้เมื่อต้องการแทรกนิพจน์

เมธอดของ String

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

console.log("marcuscode".toLowerCase());
console.log("marcuscode".toUpperCase());
console.log(" TypeScript ".trim());
// => marcuscode
// => MARCUSCODE
// => TypeScript

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

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

console.log("marcuscode".includes("cus"));
console.log("marcuscode".startsWith("mar"));
console.log("marcuscode".endsWith("you"));
// => true
// => true
// => false

เราใช้เมธอด includes เพื่อตรวจสอบว่าคำที่ระบุเป็นส่วนหนึ่งของ String หรือไม่ ส่วนเมธอด startsWith และ endsWith ใช้เพื่อตรวจสอบว่าคำที่ระบุได้เริ่มต้นหรือจบใน String หรือไม่ ในตัวอย่าง คำสั่งสุดท้ายให้ผลลัพธ์เป็น false เนื่องจาก "marcuscode" ไม่ได้จบด้วยคำว่า "you"

สำหรับตัวอย่างการใช้งานเมธอดของ String เพิ่มเติมนั้นคุณสามารถอ่านได้ที่บท เมธอดของ String ในภาษา JavaScript

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