φυβλαςのβλογ
บล็อกของ 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
ตระเวนเที่ยวตามรอยฉากของอนิเมะในญี่ปุ่น
เที่ยวชมหอดูดาวที่ฐานสังเกตการณ์ซิงหลง
บันทึกการเที่ยวญี่ปุ่นครั้งแรกในชีวิต - ทุกอย่างเริ่มต้นที่สนามบินนานาชาติคันไซ
หลักการเขียนทับศัพท์ภาษาญี่ปุ่น
ทำไมจึงไม่ควรเขียนวรรณยุกต์เวลาทับศัพท์ภาษาต่างประเทศ
ทำไมถึงอยากมาเรียนต่อนอก
เหตุผลอะไรที่ต้องใช้ภาษาวิบัติ?

บทความแต่ละเดือน

2020年

1月 2月 3月 4月
5月 6月 7月 8月
9月 10月 11月 12月

2019年

1月 2月 3月 4月
5月 6月 7月 8月
9月 10月 11月 12月

2018年

1月 2月 3月 4月
5月 6月 7月 8月
9月 10月 11月 12月

2017年

1月 2月 3月 4月
5月 6月 7月 8月
9月 10月 11月 12月

2016年

1月 2月 3月 4月
5月 6月 7月 8月
9月 10月 11月 12月

ค้นบทความเก่ากว่านั้น

ไทย

日本語

中文