String methods ในภาษา JavaScript

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

  • การหาความยาวของ String
  • การเชื่อมต่อ String
  • การแปลงข้อความใน String
  • การตรวจสอบคำใน String
  • การค้นหาและแทนที่คำใน String
  • การตัดช่องว่างออกจาก String
  • เมธอด split และ Array.join
  • การเข้าถึงตัวอักษรใน String
  • การจัดรูปแบบ String
  • เมธอด toString

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

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

string_length.js
let site = "marcuscode";
let name = "Metin";
let sentence = "This is a long string in JavaScript";

console.log("Length of site: " + site.length);
console.log("Length of name: " + name.length);
console.log("Length of sentence: " + sentence.length);

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

Length of site: 10
Length of name: 5
Length of sentence: 35

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

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

string_reverse.js
let site = "marcuscode";
let reversed = "";

// Reverse string
for (let i = site.length - 1; i >= 0; i--) {
    reversed += site[i];
}

console.log("Original: " + site);
console.log("Reversed: " + reversed);

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

Original: marcuscode
Reversed: edocsucram

ในตัวอย่างนี้ เป็นการใช้คำสั่ง for loop เพื่อวนจากตัวอักษรตัวสุดท้ายของ String และนำมาต่อเข้ากับตัวแปร reversed เพื่อสร้าง String แบบกลับด้าน จะเห็นว่าเราได้กำหนด Index เริ่มต้นของคำสั่ง for ให้เริ่มจากตำแหน่งสุดท้าย site.length - 1 และลดค่าลงมาเรื่อยๆ จนถึง Index ที่ตำแหน่งแรก

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

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

string_concat.js
let site = "marcus".concat("code");
let numbers = "One".concat("Two").concat("Three");
console.log(site);
console.log(numbers);

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

marcuscode
OneTwoThree

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

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

let site = "marcus" + "code";
let numbers = "One" + "Two" + "Three";

ทั้งสองรูปแบบนั้นให้ผลลัพธ์ที่เหมือนกัน แต่ในทางปฏิบัติแล้วเรามักจะใช้แบบหลังแทน

การแปลงตัวอักษรใน String

  • toLowerCase()
  • toUpperCase()
  • toLocaleLowerCase()
  • toLocaleUpperCase()

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

console.log("matteo marcus".toUpperCase());
console.log("Welcome to JavaScript".toLowerCase());

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

MATTEO MARCUS
welcome to thailand

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

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

string_tolowercase.js
let emails = [
    'Matteo@mail.com',
    'Chris123@YAHOO.COM',
    'FancyMail@Gmail.Com'
];

console.log("Sanitized emails:");
for (let email of emails) {
    console.log(email.toLowerCase());
}
// Maybe save to database

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

Sanitized emails:
matteo@mail.com
chris123@yahoo.com
fancymail@gmail.com

ในกรณีนี้ แสดงให้เห็นว่าอีเมลสามารถอยู่ในรูปแบบของตัวพิมพ์เล็กและตัวพิมพ์ใหญ่ได้ ยกตัวอย่างเช่น Matteo@mail.com และ matteo@mail.com นั้นความจริงแล้วเป็นอีเมลเดียวกัน และนี่เป็นการตรวจสอบให้แน่ใจว่าอีเมลจะถูกจัดเก็บในรูปแบบของตัวพิมพ์เล็กเสมอ ดังนั้นก่อนนำข้อมูลไปใช้งานเราต้องแปลงมันให้อยู่ในรูปแบบเดียวก่อนนั่นเอง

การตรวจสอบคำใน String

  • startsWith()
  • endsWith()
  • includes()
  • indexOf()
  • lastIndexOf()

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

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

console.log("marcuscode".startsWith("mar"));    // true
console.log("JavaScript".startsWith("java"));   // false
console.log("marcuscode".endsWith("code"));     // true
console.log("google.com".endsWith(".org"));     // false

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

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

string_startswith.js
// Delivered by a user
let url = "marcuscode.com";

if (url.startsWith("http")) {
    console.log("Great! URL is correct.");
} else {
    console.log("This is not a valid URL.");
}

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

This is not a valid URL.

กำหนดให้ค่าในตัวแปร url นั้นอาจจะเป็นค่าที่รับมาจากผู้ใช้ และเราได้ทำการตรวจสอบว่า URL ขึ้นต้นด้วย "http" หรือไม่ด้วยเมธอด startsWith และนำผลลัพธ์ที่ได้มาตรวจสอบเงื่อนไขด้วยคำสั่ง if และแสดงผลลัพธ์ของการตรวจสอบออกทางหน้าจอ

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

let str = "Imagine is important than knowledge";
console.log(str.includes("important"));     // true
console.log(str.includes("knowledge"));     // true
console.log(str.includes("JavaScript"));    // false

เมธอด includes ใช้เพื่อตรวจสอบว่าคำที่ระบุปรากฏอยู่ใน String หรือไม่ที่ตำแหน่งใดก็ได้ และจากผลลัพธ์การทำงานจะเห็นว่าทั้ง "important" และ "knowledge" นั้นปรากฏอยู่ใน String ในขณะที่ "JavaScript" นั้นไม่

และในขณะที่เมธอด includes ส่งค่ากลับเป็น Boolean ว่าคำที่ต้องการค้นหาปรากฏอยู่ใน String หรือไม่ เราสามารถใช้เมธอด indexOf และ lastIndexOf เพื่อรับเอาตำแหน่ง Index แรกที่มันปรากฏอยู่ได้ ยกตัวอย่างเช่น

console.log("marcuscode".indexOf("c"));     // 3
console.log("marcuscode".lastIndexOf("c")); // 6
console.log("marcuscode".indexOf("z")); // -1

เมธอด indexOf ส่งค่ากลับเป็น Index ของคำที่เจอใน String เป็นครั้งแรก ส่วนเมธอด lastIndexOf ส่งค่ากลับเป็น Index ของคำที่เจอใน String เป็นครั้งสุดท้ายซึ่งก็คือ "c" ที่อยู่ในส่วน "code" นั่นเอง และในกรณีที่ไม่พบเมธอดทั้งสองส่งค่ากลับเป็น -1

การค้นหาและแทนที่คำใน String

  • match()
  • search()
  • replace()

เมธอด match, search และ replace ใช้สำหรับตรวจสอบว่า String ตรงกับคำหรือรูปแบบที่กำหนดหรือไม่ หรือใช้แทนที่คำใน String เป็นคำใหม่ที่ต้องการ โดยทั่วไปแล้วเมธอดเหล่านี้มักใช้ร่วมกับ Regular expression

ก่อนเริ่มเนื้อหาในส่วนนี้ เรามาทำความเข้าใจกับคำว่า match กันก่อน; การ match ในที่นี้หมายถึงการดำเนินการตรวจสอบเนื้อหาใน String ที่ตรงกับ (matched) คำหรือรูปแบบ (Regular expression) ที่กำหนดโดยการใช้งานเมธอดเหล่านี้ ดังนั้นโปรดอย่าสับกับเมธอด match ซึ่งเป็นชื่อของเมธอดของ String

เมธอด match

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

let str = "There is a red rabbit in that tree";
console.log("Match rabbit:", str.match("rabbit"));
console.log("Match bunny:", str.match("bunny"));

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

Match rabbit: [
  'rabbit',
  index: 15,
  input: 'There is a red rabbit in that tree',
  groups: undefined
]
Match bunny: null

ในตัวอย่าง เป็นการตรวจสอบค่าของ "rabbit" และ "bunny" ภายใน String การทำงานของคำสั่งนั้นคล้ายกับเมธอด includes ถ้าหากมีการ match เกิดขึ้น เมธอดส่งค่ากลับเป็นอาเรย์ที่ประกอบไปด้วยรายละเอียดต่างๆ ของการ match และถ้าไม่จะส่งค่ากลับเป็น null แทน

นอกจากนี้ เรายังสามารถกำหนดรูปแบบการ match ด้วย Regular expression ได้ ในตัวอย่างนี้เป็นการตรวจสอบว่าชื่อผู้ใช้ถูกต้องหรือไม่ โดยชื่อผู้ใช้ที่ถูกต้องจะต้องประกอบไปด้วยตัวอักษรและตัวเลข และไม่สามารถขึ้นต้นด้วยตัวเลขได้

checking_username.js
let usernames = [
    "metin123",
    "mateo.marcus",
    "2020chris"
];

for (let username of usernames) {
    if (username.match(/^[a-z][a-z0-9]+$/)) {
        console.log(`${username} -> valid`);
    } else {
        console.log(`${username} -> invalid`);
    }
}

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

metin123 -> valid
mateo.marcus -> invalid
2020chris -> invalid

เรามีตัวแปรอาเรย์ names สำหรับเก็บรายชื่อของชื่อผู้ใช้ และใช้คำสั่ง for of เพื่อวนแต่ละค่ามาตรวจสอบด้วยเมธอด match ว่าค่านั้นมีรูปแบบตรงกับที่กำหนดใน Regular expression หรือไม่

if (username.match(/^[a-z][a-z0-9]+$/)) {
...

เราได้กำหนดรูปแบบการ match เป็น Regular expression ซึ่่งหมายความว่าชื่อผู้ใช้จะต้องประกอบไปด้วยตัวอักษรและตัวเลข และต้องขึ้นต้นด้วยตัวอักษรเท่านั้น และเนื่องจากเมธอด match ส่งค่ากลับเป็น null เมื่อไม่พบ เราสามารถใช้คำสั่ง if สำหรับตรวจสอบเงื่อนไขได้

เมธอด search

เมธอด search นั้นใช้สำหรับตรวจสอบว่า String ตรงกับรูปแบบที่กำหนดหรือไม่ มันส่งค่ากลับเป็น Index ของการ match ครั้งแรก และในกรณีที่ไม่พบส่งค่ากลับเป็น -1 การทำงานของมันนั้นคล้ายกับเมธอด indexOf แต่การใช้เมธอด search ทำให้เราสามารถกำหนดรูปแบบการค้นหาที่ซับซ้อนด้วย Regular expression ได้

มาดูตัวอย่างการค้นหาคำใน String โดยการใช้เมธอด search

let str = "In the middle of difficulty lies opportunity.";
console.log(str.search("middle"));  // 7
console.log(str.search("center"));  // -1

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

ต่อไปมาดูการใช้งานเมธอด search เพื่อตรวจสอบ String ด้วยการกำหนดรูปแบบใน Regular expression

let str = "Contact me at metin12@mail.com when you need help.";
console.log(str.search(/[a-z0-9]+@mail.com/));  // 14

let str2 = "The cat and the rat are living in this house.";
console.log(str2.search(/[\w]at/));             // 4

คำสั่งแรกเป็นการค้นหาอีเมลใน String โดยอีเมลจะต้องลงท้ายด้วย "@mail.com" เท่านั้น จากนั้นเป็นการค้นหาคำที่ลงท้ายด้วย "at" ใน String โดยที่ \w หมายถึงตัวอักษรอะไรก็ได้หนึ่งตัว และผลลัพธ์ที่ได้คือการ match จะได้ Index ของ "cat"

จากนั้นให้คุณลองลบ "cat" ออกจาก String จะเห็นว่าการ match จะได้ Index ของ "rat" เนื่องจากมันยังตรงกับรูปแบบที่กำหนดนั่นเอง และเมื่อคุณลบทั้ง "cat" และ "rat" ผลลัพธ์ที่ได้จะเป็น -1 เนื่องจากไม่มีการ match เกิดขึ้น นี่เป็นตัวอย่าง

let str3 = "The rat living in this house.";
console.log(str3.search(/[\w]at/));     // 4

let str2 = "No animals living in this house.";
console.log(str2.search(/[\w]at/));     // -1

เมธอด replace

เมธอด replace ใช้สำหรับแทนค่าคำใน String จากคำเดิมเป็นคำใหม่ โดยการกำหนดคำค้นหาเป็นข้อความหรือ Regular expression นี่เป็นตัวอย่างการใช้งานเมธอด replace สำหรับแทนที่คำใน String

let str = "This is a bold text and another bold text here.";
console.log(str.replace("bold", "italic"));

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

This is a italic text and another bold text here.

ในตัวอย่าง เป็นการใช้งานเมธอด replace เพื่อแทนที่คำว่า "bold" ที่พบครั้งแรกใน String เป็น "italic" และจะเห็นว่าเมื่อเรากำหนดคำค้นหาเป็น String นั้น การแทนที่จะทำแค่คำแรกที่พบเท่านั้น

ดังนั้นเพื่อแทนที่คำว่า "bold" ทั้งหมดใน String ด้วย "italic" เราสามารถกำหนดรูปแบบการค้นหาเป็น Regular expression ได้ ยกตัวอย่างเช่น

let str = "This is a bold text and another bold text here.";
console.log(str.replace(/bold/g, "italic"));

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

This is a italic text and another italic text here.

ในตอนนี้จากการกำหนดรูปแบบการค้นหาเป็น Regular expression ทำให้คำว่า "bold" ทั้งหมดที่พบใน String ถูกแทนที่เป็นคำที่กำหนดแล้ว การแทนที่ทั้งหมดเกิดขึ้นได้จากการกำหนด flag g ของ Regular expression ซึ่งเป็นการค้นหาและแทนที่ไปจนกว่าจะถึงจุดสิ้นสุดของ String

การตัดช่องว่างออกจาก String

  • trim()
  • trimEnd()
  • trimStart()

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

string_trim.js
let all = "    metin34    ".trim();
let start = "    metin34    ".trimStart();
let end = "    metin34    ".trimEnd();

console.log(`[${all}]`);
console.log(`[${start}]`);
console.log(`[${end}]`);

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

[metin34]
[metin34    ]
[    metin34]

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

เมธอด split และ Array.join

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

let names = "Adam,Chris,Mateo,John,Brad";
let arrayOfName = names.split(",");
console.log(arrayOfName);

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

[ 'Adam', 'Chris', 'Mateo', 'John', 'Brad' ]

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

string_split.js
let fruits = "Apple Banana Orange Grape";
console.log(fruits.split(" "));

let styleText = "margin-bottom: 1rem;color: #999;font-weight: 400;font-size: 1rem";
let styleList = styleText.split(";");
for (let item of styleList) {
    let style = item.split(":");
    console.log(style[0], "->", style[1]);
}

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

[ 'Apple', 'Banana', 'Orange', 'Grape' ]
margin-bottom ->  1rem
color ->  #999
font-weight ->  400
font-size ->  1rem

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

ในทางกลับกัน เมื่อมีอาเรย์ของ String เราสามารถเชื่อมต่อค่าในอาเรย์เข้าด้วยกันเป็น String โดยคั่นด้วยตัวอักษรที่กำหนดได้โดยการใช้งานเมธอด join นี่เป็นตัวอย่าง

array_join.js
let names = ["Adam", "Chris", "Mateo", "John", "Brad"];
let fruits = ["Apple", "Banana", "Orange", "Grape"];

console.log(names.join(","));
console.log(fruits.join("+"));

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

Adam,Chris,Mateo,John,Brad
Apple+Banana+Orange+Grape

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

การเข้าถึงตัวอักษรใน String

  • charAt()
  • charCodeAt()
  • codePointAt()

String เป็นข้อมูลแบบชุดลำดับของตัวอักษร ดังนั้นมันเมธอดสำหรับเข้าถึงตัวอักษรภายใน String ผ่าน Index ได้ มาดูตัวอย่าง

string_char.js
let name = "marcuscode";

console.log("CHAR\tCHAR CODE");
for (let i = 0; i < name.length; i++) {
    console.log(name.charAt(i) + "\t" + name.charCodeAt(i));
}

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

CHAR    CHAR CODE
m       109
a       97
r       114
c       99
u       117
s       115
c       99
o       111
d       100
e       101

ในตัวอย่าง เราได้ใช้คำสั่ง for loop เพื่อสร้าง Index ของ String จากนั้นใช้เมธอด charAt เพื่อรับเอาตัวอักษรจาก Index และเมธอด charCodeAt เพื่อรับเอารหัสตัวเลขของตัวอักษรในซึ่งเป็นรหัสใน UTF-16 และแสดงผลออกทางหน้าจอ

สำหรับเมธอด codePointAt นั้นส่งค่ากลับเป็นรหัส Unicode ของตัวอักษรในตำแหน่งที่กำหนด นี่เป็นตัวอย่าง

let emoji = "🎄🐇☀";
console.log(emoji.codePointAt(0));  // 127876
console.log(emoji.codePointAt(1));  // 57220
console.log(emoji.codePointAt(2));  // 128007

เราได้ใช้เมธอดเพื่อดูรหัสของตัวอักษร ต้นส้น กระต่าย และดวงอาทิตย์ ตามลำดับ

การจัดรูปแบบ String

  • padStart()
  • padEnd()
  • repeat()

เมธอด padStart เมธอด padEnd

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

string_padstart.js
console.log("1".padStart(5, "0"));
console.log("12".padStart(5, "0"));
console.log("5963".padStart(5, "0"));
console.log("123456".padStart(5, "0"));

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

00001
00012
05963
123456

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

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

string_padend.js
let chapters = [
    { name: "Introduction", page: 1 },
    { name: "Syntax", page: 3 },
    { name: "Data type", page: 5 },
    { name: "Variables", page: 7 },
    { name: "Control Structure", page: 10 }
];

console.log("Table of Content");
console.log("Title".padEnd(20, " "), "Page");

for (let item of chapters) {
    console.log(item.name.padEnd(20, "-"), item.page);
}

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

Table of Content
Title                Page
Introduction-------- 1
Syntax-------------- 3
Data type----------- 5
Variables----------- 7
Control Structure--- 10

ในตัวอย่าง เป็นโปรแกรมสำหรับแสดงสารบัญของหนังสือ เราใช้เมธอด padEnd เพื่อจัดความกว้างการแสดงผลของชื่อเรื่องให้เป็น 20 ตัวอักษรเสมอ ก่อนที่จะแสดงหมายเลขหน้าของหนังสือ ซึ่งเราสามารถใช้เมธอดเหล่านี้เพื่อจัดรูปแบบการแสดงผลให้มีความสวยงามได้

เมธอด repeat

เมธอด repeat ใช้สำหรับทำซ้ำ String ให้ได้รับ String ใหม่ที่มีความยาวตามจำนวนที่กำหนด ยกตัวอย่างเช่น

string_repeat.js
console.log("hello".repeat(3));
console.log("code".repeat(5));

for (let i = 1; i <= 10; i++){
    console.log(i, "*".repeat(i));
}

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

hellohellohello
codecodecodecodecode
1 *
2 **
3 ***
4 ****
5 *****
6 ******
7 *******
8 ********
9 *********
10 **********

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

เมธอด toString

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

tostring.js
let number = 12;
let array = [1, 2, 3, 4, 5];
let object = { id: 1, name: "Metin" };

console.log(number.toString());
console.log(array.toString());
console.log(object.toString());

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

12
1,2,3,4,5
[object Object]

ในตัวอย่าง เป็นการเรียกใช้งานเมธอด toString บนออบเจ็คประเภทต่างๆ ได้แก่ ตัวเลข อาเรย์ และออบเจ็ค ซึ่งการทำงานของเมธอด toString ในออบเจ็คแต่ละประเภทนั้นจะแตกต่างกันขึ้นกับการออกแบบการทำงานของมัน

เมื่อเรียกใช้งานเมธอดบนตัวเลขค่าของตัวเลขจะถูกแปลงเป็น String literal ในขณะที่เมื่อเรียกใช้บนอาเรย์นั้นค่าของอาเรย์จะถูกนำมาต่อกันเป็น String โดยคั่นด้วยเครื่องหมายคอมมา (,) และสำหรับออบเจ็คที่ไม่ได้กำหนดการทำงานของเมธอด toString ผลลัพธ์ที่ได้จะเป็น [object Object] เสมอ

และเมื่อเราเรียกใช้งานเมธอดนี้บน String ผลลัพธ์ก็ยังคงเป็น String เช่นเดิม ยกตัวอย่างเช่น

let str = "marcuscode";
console.log(str.toString());    // marcuscode

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