φυβλαςのβλογ
บล็อกของ phyblas



javascript เบื้องต้น บทที่ ๑๓: การจัดการกับสายอักขระ
เขียนเมื่อ 2019/07/31 23:23


ในบทที่ ๓ ได้แนะนำวิธีการสร้างสายอักขระในเบื้องต้นไปแล้ว

สำหรับในบทนี้จะแนะนำคำสั่งต่างๆที่ใช้ช่วยในการจัดการกับสายอักขระเพิ่มเติมอีก



การเข้าถึงสมาชิกแต่ละตัวในสายอักขระ

สายอักขระนั้นทีลักษณะคล้ายแถวลำดับ ตรงที่สามารถเข้าถึงตัวอักษรในสายอักขระได้โดยอาศัยเลขลำดับ
หรืออาจใช้ charAt แล้วใส่เลขลำดับเหมือนกัน
var str = "น้ำขึ้นให้รีบตัก";
alert(str[0]); // ได้ น
alert(str[3]); // ได้ ข
alert(str[30]); // ได้ undefined

ข้อแตกต่างคือกรณีที่เลขที่ใส่ไปนั้นมากกว่าเลขลำดับสุดท้ายของสายอักขระจะได้สายอักขระเปล่ามา แทนที่จะเป็น undefined
var str = "น้ำมันราดกองไฟ";
alert("+" + str.charAt(0) + "+"); // ได้ +น+
alert("+" + str.charAt(30) + "+"); // ได้ ++



การเข้าถึงสมาชิกในสายอักขระทีละหลายตัว

การเข้าถึงสายอักขระทีละหลายตัวสามารถใช้เมธอด slice ได้เช่นเดียวกับในแถวลำดับ แต่นอกจากนี้ยังมีเมธอด substring ซึ่งมีความสามารถคล้ายๆกัน

การใช้ slice กับ substring นั้นทำได้โดยกำหนดลำดับจุดต้นและจุดปลายเหมือนกัน
var str = "น้ำลดตอผุด";
alert(str.substring(0, 3)); // ได้ น้ำ
alert(str.substring(3, 5)); // ได้ ลด
alert(str.slice(5, 7)); // ได้ ตอ
alert(str.slice(7)); // ได้ ผุด

แต่ข้อแตกต่างจะเกิดในกรณีที่เลขจุดปลายมากกว่า ถ้าเป็น substring จะสลับจุดต้นกับจุดปลาย แต่ถ้าเป็น slice จะได้สายอักขระเปล่า
var str = "น้ำนิ่งไหลลึก";
alert("@" + str.substring(7, 3) + "@"); // ได้ @นิ่ง@
alert("@" + str.slice(7, 3) + "@"); // ได้ @@

นอกจากนี้ยังมีเมธอด substr ซึ่งคล้ายกับ substring แต่จะต่างกันตรงที่จะกำหนดจุดเริ่มต้นกับความยาวของอักษรที่ต้องการ
var str = "น้ำพึ่งเรือเสือพึ่งป่า";
alert(str.substr(7, 4)); // ได้ เรือ
alert(str.substr(11, 8)); // ได้ เสือพึ่ง


จำนวนตัวอักษรในสายอักขระ

หากต้องการรู้ว่าสายอักขระนี้ยาวกี่ตัวสามารถดูได้ที่พรอเพอร์ตี length เช่นเดียวกับในแถวลำดับ อักษรทุกตัวนับหมด แม้แต่ช่วงว่าง
var str = "ยำใหญ่ใส่สารพัด วางจานจัดหลายเหลือตรา";
alert(str.length); // ได้ 37
var str = "ยำใหญ่ใส่สารพัด  วางจานจัดหลายเหลือตรา  ";
alert(str.length); // ได้ 40



การเชื่อมต่อสายอักขระ

สายอักขระนั้นหากนำมาบวกกันก็จะเป็นการเอามาต่อกัน นอกจากนี้ก็อาจต่อสายอักขระโดยใช้เมธอด .concat เช่นเดียวกับที่ใช้ในแถวลำดับ
var s1 = "น้ำมาปลากินมด";
var s2 = "น้ำลดมดกินปลา";
alert(s1 + " " + s2); // ได้ น้ำมาปลากินมด น้ำลดมดกินปลา
var s3 = "น้ำใสไหลเย็นเห็นตัวปลา";
var s4 = "แหวกว่ายประทุมมาอยู่ไหวไหว";
alert(s3.concat(" ", s4)); // ได้ น้ำใสไหลเย็นเห็นตัวปลา แหวกว่ายประทุมมาอยู่ไหวไหว



การแปลงตัวพิมพ์เล็กพิมพ์ใหญ่

ตัวอักษรภาษาอังกฤษหรือภาษาต่างๆที่ใช้อักษรโรมันสามารถจะมีแบ่งเป็นอักษรตัวพิมพ์เล็กพิมพ์ใหญ่ สามารถแปลงตัวอักษรทั้งสายอักขระให้กลายเป็นตัวพิมพ์ใหญ่ทั้งหมดหรือพิมพ์เล็กทั้งหมดได้โดยใช้เมธอด .toUpperCase และ .toLowerCase

ตัวอย่าง
alert("Gấu Trắng".toLowerCase()); // ได้ gấu trắng
alert("Gấu Trắng".toUpperCase()); // ได้ GẤU TRẮNG


รหัสอักษร

ตัวอักษรแต่ละตัวนั้นมีรหัสยูนิโค้ดอยู่

สามารถหาค่าเลขลำดับของอักษรในยูนิโค้ดได้โดยใช้เมธอด charCodeAt เมธอดนี้จะหารหัสอักษรของอักษรในตำแหน่งที่กำหนด แต่ถ้าไม่ระบุตำแหน่งจะเป็นการหารหัสอักษรของอักษรตัวแรกในสายอักขระ
alert("กา".charCodeAt()); // ได้ 3585
alert("กา".charCodeAt(1)); // ได้ 3634

หากต้องการสร้างตัวอักษรขึ้นจากเลขยูนิโค้ด สามารถทำได้โดยฟังก์ชัน String.fromCharCode
alert(String.fromCharCode(3586)); // ได้ ข
alert(String.fromCharCode(3632)); // ได้ ะ


การหาตำแหน่งของคำที่ต้องการในสายอักขระ

สายอักขระมีเมธอดที่สามารถใช้ในการหาคำที่ต้องการจากภายในสายอักขระ นั่นคือ IndexOf และ lastIndexOf

ทั้ง ๒ เมธอดนี้จะค้นหาคำที่เราต้องการแล้วให้ค่าตำแหน่งเริ่มต้นของคำมา
var s = "เมื่อยามรักน้ำต้มผักยังว่าหวาน เมื่อถูกเลิกน้ำตาลหวานยังบอกขม";
var i1 = s.indexOf("หวาน");
var i2 = s.lastIndexOf("หวาน");
alert(i1); // ได้ 26
alert(i2); // ได้ 49
alert(s.slice(0, i1 + 4)); // ได้ เมื่อยามรักน้ำต้มผักยังว่าหวาน
alert(s.substr(i2)); // ได้ หวานยังบอกขม


การแทนที่สายอักขระ

หากมีข้อความบางส่วนที่ต้องการให้ถูกแทนที่ด้วยข้อความอีกคำสามารถใช้เมธอด replace
alert("-a-a-".replace("a", "o")); // ได้ -o-a-

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

จริงๆแล้ว .replace จะใช้ความสามารถได้อย่างเต็มที่เมื่อใช้ร่วมกับเรกูลาร์เอ็กซ์เพรชชัน (regex) ซึ่งจะกล่าวถึงในบทถัดไป



การแบ่งสายอักขระ

เมื่อต้องการจะแบ่งสายอักขระออกเป็นส่วนๆโดยใช้ตัวแยกบางอย่างในสายอักขระเป็นตัวกำหนดจุดแบ่งอาจใช้เมธอด split
alert("hanabi".split("a")); // ได้ h,n,bi

เมธอด .split นี้ก็สามารถใช้กับเรกูลาร์เอ็กซ์เพรชชันเพื่อให้ใช้งานได้ยืดหยุ่นขึ้น เช่นเดียวกับเมธอด .replace

วิธีการใช้เมธอด .replace กับ .split ในระดับสูงขึ้นนั้นจะอธิบายในบทหน้า



สรุปเมธอดที่ใช้ในสายอักขระ

เมธอด ความหมาย
charAt เอาตัวหนังสือในตำแหน่งที่ระบุในสายอักขระ
slice เอาบางส่วนของสายอักขระตามจุดเริ่มและจุดปลายที่กำหนด
substring เอาบางส่วนของสายอักขระตามจุดเริ่มและจุดปลายที่กำหนด
substr เอาบางส่วนของสายอักขระตามจำนวนที่กำหนด
concat เชื่อมต่อสายอักขระเข้าด้วยกัน
toLowerCase แปลงตัวพิมพ์ใหญ่ในสายอักขระเป็นตัวพิมพ์เล็กทั้งหมด
toUpperCase แปลงตัวพิมพ์เล็กในสายอักขระเป็นตัวพิมพ์ใหญ่ทั้งหมด
charCodeAt หารหัสอักษรของตัวอักษรในตำแหน่งที่กำหนดในสายอักขระ
indexOf หาตำแหน่งเริ่มของคำที่ต้องการในสายอักขระ เอาตัวแรกที่เจอก่อนจากทางซ้าย
lastIndexOf หาตำแหน่งเริ่มของคำที่ต้องการในสายอักขระ เอาตัวแรกที่เจอก่อนจากทางขวา
replace แทนที่สายอักขระที่กำหนดด้วยตัวที่ต้องการ
split แยกสายอักขระออกจากกันด้วยตัวที่กำหนด




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

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

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

หมวดหมู่

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

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

สารบัญ

รวมคำแปลวลีเด็ดจากญี่ปุ่น
python
-- numpy
-- matplotlib

-- pandas
-- pytorch
maya
การเรียนรู้ของเครื่อง
-- โครงข่าย
     ประสาทเทียม
javascript
บันทึกในญี่ปุ่น
บันทึกในจีน
-- บันทึกในปักกิ่ง
บันทึกในไต้หวัน
บันทึกในยุโรปเหนือ
บันทึกในประเทศอื่นๆ
เรียนภาษาจีน
qiita
บทความอื่นๆ

บทความแบ่งตามหมวด



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

  ค้นหาบทความ

  บทความแนะนำ

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

ไทย

日本語

中文