ใน ES6 ได้มีการเพิ่มฟังก์ชันและเมธอดสำหรับใช้กับข้อมูลชนิดสายอักขระมามากมายหลายตัว
ในบทนี้จะมาแนะนำฟังก์ชันและเมธอดเหล่านั้น
สำหรับเมธอดที่มีมาตั้งแต่ใน ES3 ดูได้ใน
บทที่
๑๓ ส่วนที่เพิ่มมาใน ES5
ดูใน
บทที่ ๒๙
String.fromCodePoint
ฟังก์ชัน String.fromCodePoint() ใช้สร้างสายอักขระขึ้นจากรหัสยูนิโค้ด สามารถใส่ต่อกันหลายตัวได้
ปกติจะใช้คู่กับตัวเลขที่เขียนในรูปเลขฐาน ๑๖ คือเขียนโดยขึ้นต้นด้วย 0x (รายละเอียดดูใน
บทที่ ๕)
เช่น ลองใส่โค้ดของอักษรไทยอยู่ในช่วงตั้งแต่ 0E00 ถึง 0E7F (
ดูรายการอักษร)
alert(String.fromCodePoint(0x0E0A)); // ได้ ช
alert(String.fromCodePoint(0x0E2A, 0x0E2D, 0x0E1A)); // ได้ สอบ
let ar = [0x0E21, 0x0E32, 0x0E01];
alert(String.fromCodePoint(...ar)); // ได้ มาก
String.raw
ปกติแล้วอักษร \ จะถูกใช้เพื่อสร้างอักษรพิเศษ เช่น \n แทนเว้นบรรทัด หรือ \' ใช้เอาไว้เลี่ยงให้ ' สามารถใส่ใน ''
แต่ถ้าเราต้องการได้อักษรที่เขียนว่า \n จริงๆนั้นมักจะต้องเติม \ อีกตัวเพื่อเลี่ยง กลายเป็น \\n แบบนี้ แล้วพอใช้
alert() จึงจะเห็นว่าแสดงผลเป็น \n จริงๆ ไม่ใช่การเว้นบรรทัด
alert("\\n\\''") // เท่ากับ \n\''
ถ้าใช้ String.raw นำหน้าจะทำให้สามารถสร้างสายอักขระที่แสดงผลออกมาทั้งๆอย่างนั้นได้โดยไม่ต้องใส่ \ เพิ่ม
String.raw ปกติต้องใช้กับสายอักขระที่สร้างด้วย `` (รายละเอียดใน
บทที่ ๓๒)
ตัวอย่างการใช้ เช่น
let s = String.raw`~\\n~`; // เท่ากับการเขียนว่า let s = '~\\\\n~'
alert(s); // ได้กรอบข้อความแสดงข้อความว่า ~\\n~
.repeat
เมธอด .repeat() เป็นการเอาสายอักขระตัวเดิมมาเรียงต่อซ้ำกันหลายตัวตามจำนวนที่กำหนด
alert('ห้า'.repeat(3)); // ได้ ห้าห้าห้า
alert('฿'.repeat(11)); // ได้ ฿฿฿฿฿฿฿฿฿฿฿
ถ้าใส่เป็นจำนวนไม่เต็มก็ถูกปัดเป็นจำนวนเต็มอยู่ดี หรือถ้าใส่สายอักขระที่ใส่ค่าตัวเลขก็จะถูกแปลงเป็นจำนวนเต็ม
alert('มา'.repeat(2.5)); // ได้ มามา
alert('๛'.repeat('9')); // ๛๛๛๛๛๛๛๛๛
จะใส่จำนวนติดลบหรือ Infinity ไม่ได้
alert('ไป'.repeat(Infinity)); // ผิดพลาด RangeError: repeat count must be less than infinity and not overflow maximum string size
alert('หา'.repeat(-1)); // ผิดพลาด RangeError: repeat count must be non-negative
ถ้าใส่ 0 หรือ NaN หรืออะไรที่แปลงเป็นตัวเลขแล้วเป็น 0 ก็จะได้สายอักขระเปล่า
'สาย'.repeat(0); // ''
'อัก'.repeat(NaN); // ''
'ขระ'.repeat('ศูนย์'); // ''
.includes
เมธอด .includes() ใช้ดูว่าสายอักขระนั้นมีคำที่ระบุอยู่หรือไม่ ให้ผลเป็น true หรือ false
let s = 'ถึงจะอยู่สุดหล้าฟ้าดิน';
alert(s.includes("อยู่")); // ได้ true
alert(s.includes("ไป")); // ได้ false
สามารถใส่ตำแหน่งที่เริ่มค้นลงในอาร์กิวเมนต์ตัวที่ ๒
let s = 'แม้จะสิ้นสิทธิ์และเสรี';
alert(s.includes("สิ้น", 3)); // ได้ true
alert(s.includes("สิ้น", 7)); // ได้ false
.startsWith และ .endsWith
เมธอด .startsWith() ใช้ตรวจดูว่าสายอักขระนั้นขึ้นต้นด้วยคำที่ระบุหรือไม่ ส่วน .endsWith()
จะดูว่าลงท้ายด้วยคำที่ระบุหรือไม่
let s = 'ไปไหนก็ไป';
alert(s.startsWith("ป")) // ได้ false
alert(s.endsWith("ป")) // ได้ true
alert(s.startsWith("ไป")) // ได้ true
alert(s.endsWith("ไป")) // ได้ true
.startsWith สามารถระบุจุดเริ่มต้นค้นได้ที่อาร์กิวเมนต์ตัวที่ ๒ เช่นเดียวกับ .includes ในขณะที่ .endsWith
นั้นจะเป็นการระบุตำแหน่งสุดท้ายที่จะค้นไปถึง
let s = 'มาได้ก็มา';
alert(s.startsWith("มา", 2)); // ได้ false
alert(s.startsWith("ได้", 2)); // ได้ true
alert(s.endsWith("ก็", 7)); // ได้ true
alert(s.endsWith("มา", 7)); // ได้ false
.padStart และ .padEnd [ES2017]
เมธอด .padStart() และ .padEnd() ได้ถูกเพิ่มเข้ามาใน ES2017
ใช้สำหรับเติมส่วนหัวหรือท้ายให้กับสายอักขระเพื่อให้ยาวตามที่ต้องการ
วิธีใช้
สายอักขระ.padStart(ความยาวที่ต้องการ, สายอักขระที่เป็นตัวเติม)
.padStart() จะเติมในส่วนด้านหน้าจนยาวเป็นจำนวนตามจำนวนที่ระบุ ส่วน .padEnd() จะเติมท้าย
alert('หมอมี'.padStart(7, "หา")); // ได้ หาหมอมี
alert('หมอชิด'.padStart(11, "ยา")); // ได้ ยายายหมอชิด
alert('หมอมี'.padEnd(8, "หมา")); // ได้ หมอมีหมา
ถ้าไม่ใส่ข้อความที่เติมจะเป็นการเติมช่องว่าง
'ขาว'.padStart(9) // กลายเป็น ' ขาว'
ถ้าเลขที่ใส่น้อยกว่าหรือเท่ากับความยาวเดิมอยู่แล้วจะไม่มีผล
alert('หมอมีกับหมอชิต'.padStart(4)) // ได้ หมอมีกับหมอชิต
alert('หมอนี่กับหมอนั่น'.padEnd(7)); // ได้ หมอนี่กับหมอนั่น
.trimStart และ .trimEnd [ES2019]
.trimStart() และ .trimEnd() เป็นเมธอดที่เพิ่มเข้ามาใน ES2019 มีหน้าที่ใคล้าย .trim() คือจะตัดเอาช่องว่างออกไป แต่
.trimStart() จะตัดเฉพาะด้านหน้า และ .trimEnd() จะตัดเฉพาะด้านหลัง
ตัวอย่าง
const s = ' กขค ';
s.trim() // กลายเป็น 'กขค'
s.trimStart() // กลายเป็น 'กขค '
s.trimEnd() // กลายเป็น ' กขค'
.matchAll [ES2020]
.matchAll() เป็นเมธอดที่เพิ่มเข้ามาใน ES2020 มีไว้ค้นหาคำที่ต้องการโดยใช้เรกูลาร์เอ็กซ์เพรชชัน โดยจะได้เป็นอิเทอเรเตอร์
ไว้ใช้กับ for๛of
เมธอดนี้จะใช้กับเรกูลาร์เอ็กซ์เพรชชันที่ใส่ตัวเลือกเสริม g ต่อท้ายเพื่อให้เป็นการค้นหาหลายตัว
ในแต่ละรอบจะได้แถวลำดับของข้อความที่ค้นเจอ ถ้าไม่มีการจัดกลุ่มวงเล็บก็จะออกมาตัวเดียว เช่น
let s = "คางามิงะฮาระ";
let reg = /[ก-ฮ]า/g;
let ss = "";
for (let x of s.matchAll(reg)) {
ss += "*" + x[0];
}
alert(ss); // ได้ *คา*งา*ฮา
ถ้ามีการจัดกลุ่มเป็นวงเล็บ ตัวแรกจะเป็นข้อความทั้งหมด แล้วตัวต่อมาก็จะเป็นตัวที่อยู่ในวงเล็บ ตามลำดับ ตัวอย่างเช่น
let s = "ฮิบาริงะซากะ";
let reg = /([ก-ฮ])([าะ])/g;
let ss1 = "", ss2 = "", ss3 = "";
for (let [a,b,c] of s.matchAll(reg)) {
ss1 += "%" + a;
ss2 += "~" + b;
ss3 += "#" + c;
}
alert(ss1); // ได้ %บา%งะ%ซา%กะ
alert(ss2); // ได้ ~บ~ง~ซ~ก
alert(ss3); // ได้ #า#ะ#า#ะ
สรุปเมธอดทั้งหมด
| ชื่อเมธอด |
ความสามารถ |
เพิ่มมาใน |
| repeat |
คัดลอกสายอักขระซ้ำๆต่อกันตามจำนวนที่ระบุ |
ES2015 |
| includes |
ดูว่าสายอักขระนั้นมีคำที่ระบุอยู่หรือไม่ (ได้ true, false) |
| startsWith |
ดูว่าสายอักขระนั้นขึ้นต้นด้วยคำที่ระบุหรือไม่ (ได้ true, false) |
| endsWith |
ดูว่าสายอักขระนั้นลงท้ายด้วยคำที่ระบุหรือไม่ (ได้ true, false) |
| padStart |
ต่ออักษรเพิ่มด้านหน้าสายอักขระให้ยาวตามที่ระบุ |
ES2017 |
| padEnd |
ต่ออักษรเพิ่มด้านหลังสายอักขระให้ยาวตามที่ระบุ |
| trimStart |
ตัดช่องว่างออกเฉพาะด้านหน้าของสายอักขระ |
ES2019 |
| trimEnd |
ตัดช่องว่างออกเฉพาะด้านหลังของสายอักขระ |
| matchAll |
ค้นหาคำที่ต้องการภายในสายอักขระนี้โดยใช้เรกูลาร์เอ็กซ์เพรชชัน (ใช้กับ for๛of) |
ES2020 |