JS กวดวิชา

เจเอสโฮม JS Introduction JS Where To JS เอาท์พุต งบ JS JS ไวยากรณ์ JS ความคิดเห็น ตัวแปร JS เจเอส เลท JS Const JS Operators JS เลขคณิต JS Assignment ประเภทข้อมูล JS ฟังก์ชัน JS วัตถุ JS JS Events JS Strings JS String Methods JS String Search เทมเพลตสตริง JS JS Numbers JS Number Methods JS Arrays JS Array Methods JS Array Sort JS Array Iteration JS Array Const JS Dates รูปแบบวันที่ JS JS วันที่รับเมธอด JS Date Set Methods JS Math JS สุ่ม JS Booleans JS เปรียบเทียบ JS Conditions JS Switch JS ลูปสำหรับ JS Loop สำหรับ In JS วนสำหรับ Of JS วนรอบในขณะที่ JS Break JS Iterables JS ชุด JS Maps JS Typeof JS ประเภทการแปลง JS Bitwise JS RegExp JS Errors JS ขอบเขต JS Hoisting JS โหมดเข้มงวด JS คำสำคัญนี้ JS Arrow Function JS Classes JS JSON JS Debugging คู่มือสไตล์ JS JS แนวทางปฏิบัติที่ดีที่สุด JS ความผิดพลาด JS Performance JS สงวนคำ

เวอร์ชัน JS

เวอร์ชัน JS JS 2009 (ES5) เจเอส 2015 (ES6) JS 2016 JS 2017 JS 2018 JS IE / ขอบ JS History

วัตถุ JS

คำจำกัดความของวัตถุ คุณสมบัติของวัตถุ วิธีการวัตถุ การแสดงวัตถุ อุปกรณ์เสริมวัตถุ ตัวสร้างวัตถุ ต้นแบบวัตถุ วัตถุ Iterables ชุดวัตถุ แผนที่วัตถุ การอ้างอิงวัตถุ

ฟังก์ชัน JS

คำจำกัดความของฟังก์ชัน พารามิเตอร์ฟังก์ชัน เรียกใช้ฟังก์ชัน เรียกฟังก์ชัน ฟังก์ชัน สมัคร การปิดฟังก์ชัน

JS Classes

แนะนำคลาส การสืบทอดคลาส คลาสคงที่

JS Async

JS Callbacks JS แบบอะซิงโครนัส JS Promises JS Async/รอ

JS HTML DOM

บทนำ DOM วิธี DOM เอกสาร DOM องค์ประกอบ DOM DOM HTML แบบฟอร์ม DOM DOM CSS ภาพเคลื่อนไหว DOM กิจกรรม DOM DOM Event Listener การนำทาง DOM โหนด DOM DOM Collections รายการโหนด DOM

JS เบราว์เซอร์ BOM

JS Window JS Screen JS Location JS History JS Navigator JS Popup Alert JS Timing JS Cookies

JS Web APIs

แนะนำ Web API เว็บฟอร์ม API API ประวัติเว็บ API ที่เก็บข้อมูลเว็บ Web Worker API API ดึงเว็บ เว็บ Geolocation API

JS AJAX

บทนำ AJAX AJAX XMLHttp คำขอ AJAX การตอบสนอง AJAX ไฟล์ AJAX XML AJAX PHP AJAX ASP ฐานข้อมูล AJAX แอปพลิเคชัน AJAX ตัวอย่าง AJAX

JS JSON

บทนำ JSON ไวยากรณ์ JSON JSON กับ XML ประเภทข้อมูล JSON JSON Parse JSON สตริงริฟาย วัตถุ JSON อาร์เรย์ JSON เซิร์ฟเวอร์ JSON JSON PHP JSON HTML JSON JSONP

JS กับ jQuery

ตัวเลือก jQuery jQuery HTML jQuery CSS jQuery DOM

JS กราฟิก

JS กราฟิก JS Canvas JS Plotly JS Chart.js JS Google Chart JS D3.js

ตัวอย่าง JS

ตัวอย่าง JS JS HTML DOM JS HTML อินพุต JS HTML Objects JS HTML Events JS Browser JS Editor JS แบบฝึกหัด JS Quiz ใบรับรอง JS

JS References

วัตถุ JavaScript วัตถุ HTML DOM


วิธีการสตริง JavaScript


วิธีสตริงช่วยให้คุณทำงานกับสตริงได้


วิธีการสตริงและคุณสมบัติ

ค่าดั้งเดิม เช่น "John Doe" ไม่สามารถมีคุณสมบัติหรือเมธอดได้ (เพราะไม่ใช่วัตถุ)

แต่ด้วย JavaScript เมธอดและคุณสมบัติยังใช้ได้กับค่าดั้งเดิม เนื่องจาก JavaScript ถือว่าค่าดั้งเดิมเป็นออบเจ็กต์เมื่อเรียกใช้เมธอดและคุณสมบัติ


JavaScript String Length

คุณสมบัติlengthส่งคืนความยาวของสตริง:

ตัวอย่าง

let txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
let length = txt.length;

การแยกชิ้นส่วนสตริง

มี 3 วิธีในการแยกส่วนของสตริง:

  • slice(start, end)
  • substring(start, end)
  • substr(start, length)

JavaScript สตริงชิ้น ()

slice()แยกส่วนของสตริงและส่งกลับส่วนที่แยกออกมาในสตริงใหม่

วิธีการนี้ใช้พารามิเตอร์ 2 ตัว: ตำแหน่งเริ่มต้น และตำแหน่งสิ้นสุด (ไม่รวมจุดสิ้นสุด)

ตัวอย่างนี้แบ่งส่วนของสตริงออกจากตำแหน่ง 7 ไปยังตำแหน่ง 12 (13-1):

ตัวอย่าง

let str = "Apple, Banana, Kiwi";
let part = str.slice(7, 13);

บันทึก

JavaScript นับตำแหน่งจากศูนย์

ตำแหน่งแรกคือ 0

ตำแหน่งที่สองคือ 1

ถ้าพารามิเตอร์เป็นค่าลบ ตำแหน่งจะถูกนับจากจุดสิ้นสุดของสตริง

ตัวอย่างนี้แบ่งส่วนของสตริงออกจากตำแหน่ง -12 ไปยังตำแหน่ง -6:

ตัวอย่าง

let str = "Apple, Banana, Kiwi";
let part = str.slice(-12, -6);

หากคุณละเว้นพารามิเตอร์ที่สอง เมธอดจะตัดส่วนที่เหลือของสตริงออก:

ตัวอย่าง

let part = str.slice(7);

หรือนับจากจุดสิ้นสุด:

ตัวอย่าง

let part = str.slice(-12);


สตริงย่อยสตริง JavaScript ()

substring()คล้ายslice()กับ

ความแตกต่างคือsubstring()ไม่สามารถยอมรับดัชนีเชิงลบได้

ตัวอย่าง

let str = "Apple, Banana, Kiwi";
let part = str.substring(7, 13);

หากคุณละเว้นพารามิเตอร์ที่สองsubstring()จะตัดส่วนที่เหลือของสตริงออก


JavaScript สตริงย่อย ()

substr()คล้ายslice()กับ

ข้อแตกต่างคือพารามิเตอร์ที่สองระบุความยาว ของส่วนที่แยกออกมา

ตัวอย่าง

let str = "Apple, Banana, Kiwi";
let part = str.substr(7, 6);

หากคุณละเว้นพารามิเตอร์ที่สองsubstr()จะตัดส่วนที่เหลือของสตริงออก

ตัวอย่าง

let str = "Apple, Banana, Kiwi";
let part = str.substr(7);

ถ้าพารามิเตอร์แรกเป็นค่าลบ ตำแหน่งจะนับจากจุดสิ้นสุดของสตริง

ตัวอย่าง

let str = "Apple, Banana, Kiwi";
let part = str.substr(-4);

การแทนที่เนื้อหาสตริง

วิธี การreplace()แทนที่ค่าที่ระบุด้วยค่าอื่นในสตริง:

ตัวอย่าง

let text = "Please visit Microsoft!";
let newText = text.replace("Microsoft", "W3Schools");

บันทึก

เมธอด นี้replace()จะไม่เปลี่ยนสตริงที่เรียกใช้

วิธี การreplace()ส่งกลับสตริงใหม่

โดยค่าเริ่มต้นreplace()วิธีการจะแทนที่เฉพาะรายการที่ตรงกันครั้งแรก:

ตัวอย่าง

let text = "Please visit Microsoft and Microsoft!";
let newText = text.replace("Microsoft", "W3Schools");

โดยค่าเริ่มต้นreplace()วิธีการจะคำนึงถึงขนาดตัวพิมพ์ การเขียน MICROSOFT (ตัวพิมพ์ใหญ่) จะไม่ทำงาน:

ตัวอย่าง

let text = "Please visit Microsoft!";
let newText = text.replace("MICROSOFT", "W3Schools");

หากต้องการแทนที่ไม่คำนึงถึงขนาดตัวพิมพ์ ให้ใช้นิพจน์ทั่วไปที่มี/iแฟล็ก (ไม่ละเอียดอ่อน):

ตัวอย่าง

let text = "Please visit Microsoft!";
let newText = text.replace(/MICROSOFT/i, "W3Schools");

บันทึก

นิพจน์ทั่วไปเขียนโดยไม่มีเครื่องหมายคำพูด

หากต้องการแทนที่รายการที่ตรงกันทั้งหมด ให้ใช้นิพจน์ทั่วไปที่มี/gแฟล็ก (การแข่งขันทั่วโลก):

ตัวอย่าง

let text = "Please visit Microsoft and Microsoft!";
let newText = text.replace(/Microsoft/g, "W3Schools");

บันทึก

คุณจะได้เรียนรู้มากขึ้นเกี่ยวกับนิพจน์ทั่วไปในบทJavaScript Regular Expressions


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

สตริงถูกแปลงเป็นตัวพิมพ์ใหญ่ด้วยtoUpperCase():

สตริงถูกแปลงเป็นตัวพิมพ์เล็กด้วยtoLowerCase():


JavaScript สตริง toUpperCase()

ตัวอย่าง

let text1 = "Hello World!";
let text2 = text1.toUpperCase();

JavaScript สตริง toLowerCase()

ตัวอย่าง

let text1 = "Hello World!";       // String
let text2 = text1.toLowerCase();  // text2 is text1 converted to lower

JavaScript สตริง concat()

concat() รวมสองสตริงขึ้นไป:

ตัวอย่าง

let text1 = "Hello";
let text2 = "World";
let text3 = text1.concat(" ", text2);

concat()สามารถใช้วิธีนี้แทนตัวดำเนินการบวกได้ สองบรรทัดนี้ทำเช่นเดียวกัน:

ตัวอย่าง

text = "Hello" + " " + "World!";
text = "Hello".concat(" ", "World!");

บันทึก

เมธอดสตริงทั้งหมดจะคืนค่าสตริงใหม่ พวกเขาไม่ได้แก้ไขสตริงเดิม

กล่าวอย่างเป็นทางการว่า:

สตริงไม่เปลี่ยนรูป: สตริงไม่สามารถเปลี่ยนได้ แทนที่เท่านั้น


การตัดสตริง JavaScript ()

วิธี การtrim()ลบช่องว่างจากทั้งสองด้านของสตริง:

ตัวอย่าง

let text1 = "      Hello World!      ";
let text2 = text1.trim();

JavaScript String Padding

ECMAScript 2017 ได้เพิ่มวิธีสตริงสองวิธี: padStart และpadEndเพื่อรองรับการเติมที่จุดเริ่มต้นและส่วนท้ายของสตริง


JavaScript สตริง padStart()

ตัวอย่าง

let text = "5";
let padded = text.padStart(4,0);

รองรับเบราว์เซอร์

padStart()เป็นคุณลักษณะ ECMAScript 2017

ได้รับการสนับสนุนในเบราว์เซอร์ที่ทันสมัยทั้งหมด:

Chrome Edge Firefox Safari Opera
Yes Yes Yes Yes Yes

padStart()ไม่รองรับใน Internet Explorer


JavaScript สตริง padEnd()

ตัวอย่าง

let text = "5";
let padded = text.padEnd(4,0);

รองรับเบราว์เซอร์

padEnd()เป็นคุณลักษณะ ECMAScript 2017

ได้รับการสนับสนุนในเบราว์เซอร์ที่ทันสมัยทั้งหมด:

Chrome Edge Firefox Safari Opera
Yes Yes Yes Yes Yes

padEnd()ไม่รองรับใน Internet Explorer


การแยกอักขระสตริง

มี 3 วิธีในการแยกอักขระสตริง:

  • charAt(position)
  • charCodeAt(position)
  • การเข้าถึงทรัพย์สิน [ ]

JavaScript สตริง charAt()

เมธอดส่งคืน อักขระcharAt()ที่ดัชนี (ตำแหน่ง) ที่ระบุในสตริง:

ตัวอย่าง

let text = "HELLO WORLD";
let char = text.charAt(0);

JavaScript สตริง charCodeAt()

เมธอดส่งคืนยูนิโค้ดของ อักขระcharCodeAt()ที่ดัชนีที่ระบุในสตริง:

วิธีการส่งคืนรหัส UTF-16 (จำนวนเต็มระหว่าง 0 ถึง 65535)

ตัวอย่าง

let text = "HELLO WORLD";
let char = text.charCodeAt(0);

การเข้าถึงทรัพย์สิน

ECMAScript 5 (2009) อนุญาตให้เข้าถึงคุณสมบัติ [ ] บนสตริง:

ตัวอย่าง

let text = "HELLO WORLD";
let char = text[0];

บันทึก

การเข้าถึงพร็อพเพอร์ตี้อาจ คาดเดาไม่ได้เล็กน้อย :

  • มันทำให้สตริงดูเหมือนอาร์เรย์ (แต่ไม่ใช่)
  • If no character is found, [ ] returns undefined, while charAt() returns an empty string.
  • It is read only. str[0] = "A" gives no error (but does not work!)

Example

let text = "HELLO WORLD";
text[0] = "A";    // Gives no error, but does not work

Converting a String to an Array

If you want to work with a string as an array, you can convert it to an array.

JavaScript String split()

A string can be converted to an array with the split() method:

Example

text.split(",")    // Split on commas
text.split(" ")    // Split on spaces
text.split("|")    // Split on pipe

If the separator is omitted, the returned array will contain the whole string in index [0].

If the separator is "", the returned array will be an array of single characters:

Example

text.split("")

Complete String Reference

For a complete String reference, go to our:

Complete JavaScript String Reference.

The reference contains descriptions and examples of all string properties and methods.

Test Yourself With Exercises

Exercise:

Convert the text into an UPPERCASE text:

let txt = "Hello World!";
txt = txt.;