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
ของมัน นี่เป็นตัวอย่าง
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
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 เข้าด้วยกันได้เช่นกัน นี่เป็นตัวอย่าง
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 จะถูกแปลงโดยเมธอดเหล่านี้
เมธอดเหล่านี้มีประโยชน์ในกรณีที่เราต้องการจัดเตรียมข้อมูลก่อนนำไปจัดเก็บ ยกตัวอย่างเช่น ในฐานข้อมูล นี่เป็นตัวอย่างของโปรแกรมสำหรับแปลงอีเมลให้เป็นตัวพิมพ์เล็กทั้งหมด
let emails = [
'[email protected]',
'[email protected]',
'[email protected]'
];
console.log("Sanitized emails:");
for (let email of emails) {
console.log(email.toLowerCase());
}
// Maybe save to database
นี่เป็นผลลัพธ์การทำงานของโปรแกรม
Sanitized emails:
[email protected]
[email protected]
[email protected]
ในกรณีนี้ แสดงให้เห็นว่าอีเมลสามารถอยู่ในรูปแบบของตัวพิมพ์เล็กและตัวพิมพ์ใหญ่ได้ ยกตัวอย่างเช่น [email protected]
และ [email protected]
นั้นความจริงแล้วเป็นอีเมลเดียวกัน และนี่เป็นการตรวจสอบให้แน่ใจว่าอีเมลจะถูกจัดเก็บในรูปแบบของตัวพิมพ์เล็กเสมอ ดังนั้นก่อนนำข้อมูลไปใช้งานเราต้องแปลงมันให้อยู่ในรูปแบบเดียวก่อนนั่นเอง
การตรวจสอบคำใน 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
เพื่อตรวจสอบว่ามันถูกต้องหรือไม่
// 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 ได้ ในตัวอย่างนี้เป็นการตรวจสอบว่าชื่อผู้ใช้ถูกต้องหรือไม่ โดยชื่อผู้ใช้ที่ถูกต้องจะต้องประกอบไปด้วยตัวอักษรและตัวเลข และไม่สามารถขึ้นต้นด้วยตัวเลขได้
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 [email protected] when you need help.";
console.log(str.search(/[a-z0-9][email protected]/)); // 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 นี่เป็นตัวอย่าง
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 ออกจากกันด้วยตัวแบ่ง ","
ที่ส่งเป็นอาร์กิวเมนต์ของเมธอด และผลลัพธ์ที่ได้คือเราได้อาเรย์ของชื่อทั้งหมดที่คั่นด้วยคอมมา มาดูอีกตัวอย่าง
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
นี่เป็นตัวอย่าง
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 ได้ มาดูตัวอย่าง
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 ใหม่ตามความยาวทีี่กำหนด นี่เป็นตัวอย่างการใช้งาน
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 เพื่อให้ได้ตามความยาวที่กำหนด นี่เป็นตัวอย่าง
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 ใหม่ที่มีความยาวตามจำนวนที่กำหนด ยกตัวอย่างเช่น
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 นี่เป็นตัวอย่าง
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 เมธอดเหล่านี้ถูกสร้างขึ้นมาเพื่ออำนวยความสะดวกในการเขียนโปรแกรม ซึ่งค่อนข้างจะครอบคลุมสำหรับการใช้งานทั่วไป และเราหวังว่าคุณจะได้นำมันไปใช้ในโปรแกรม