φυβλαςのβλογ
phyblas的博客



javascript เบื้องต้น บทที่ ๔๗: ฟังก์ชันและเมธอดเพิ่มเติมสำหรับสายอักขระ
เขียนเมื่อ 2020/05/13 00:04
แก้ไขล่าสุด 2021/09/28 16:42

ใน 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






-----------------------------------------

囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧

ดูสถิติของหน้านี้

หมวดหมู่

-- คอมพิวเตอร์ >> เขียนโปรแกรม >> javascript

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

目录

从日本来的名言
模块
-- numpy
-- matplotlib

-- pandas
-- manim
-- opencv
-- pyqt
-- pytorch
机器学习
-- 神经网络
javascript
蒙古语
语言学
maya
概率论
与日本相关的日记
与中国相关的日记
-- 与北京相关的日记
-- 与香港相关的日记
-- 与澳门相关的日记
与台湾相关的日记
与北欧相关的日记
与其他国家相关的日记
qiita
其他日志

按类别分日志



ติดตามอัปเดตของบล็อกได้ที่แฟนเพจ

  查看日志

  推荐日志

ตัวอักษรกรีกและเปรียบเทียบการใช้งานในภาษากรีกโบราณและกรีกสมัยใหม่
ที่มาของอักษรไทยและความเกี่ยวพันกับอักษรอื่นๆในตระกูลอักษรพราหมี
การสร้างแบบจำลองสามมิติเป็นไฟล์ .obj วิธีการอย่างง่ายที่ไม่ว่าใครก็ลองทำได้ทันที
รวมรายชื่อนักร้องเพลงกวางตุ้ง
ภาษาจีนแบ่งเป็นสำเนียงอะไรบ้าง มีความแตกต่างกันมากแค่ไหน
ทำความเข้าใจระบอบประชาธิปไตยจากประวัติศาสตร์ความเป็นมา
เรียนรู้วิธีการใช้ regular expression (regex)
การใช้ unix shell เบื้องต้น ใน linux และ mac
g ในภาษาญี่ปุ่นออกเสียง "ก" หรือ "ง" กันแน่
ทำความรู้จักกับปัญญาประดิษฐ์และการเรียนรู้ของเครื่อง
ค้นพบระบบดาวเคราะห์ ๘ ดวง เบื้องหลังความสำเร็จคือปัญญาประดิษฐ์ (AI)
หอดูดาวโบราณปักกิ่ง ตอนที่ ๑: แท่นสังเกตการณ์และสวนดอกไม้
พิพิธภัณฑ์สถาปัตยกรรมโบราณปักกิ่ง
เที่ยวเมืองตานตง ล่องเรือในน่านน้ำเกาหลีเหนือ
ตระเวนเที่ยวตามรอยฉากของอนิเมะในญี่ปุ่น
เที่ยวชมหอดูดาวที่ฐานสังเกตการณ์ซิงหลง
ทำไมจึงไม่ควรเขียนวรรณยุกต์เวลาทับศัพท์ภาษาต่างประเทศ