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

สารบัญ

String length
String slice()
String substring()
String substr()
String replace()
String replaceAll()
String toUpperCase()
String toLowerCase()
String concat()
String trim()
String trimStart()
String trimEnd()
String padStart()
String padEnd()
String charAt()
String charCodeAt()
String split()

บันทึก

วิธีการ ค้นหา ของสตริงจะกล่าวถึงในบทถัดไป

ความยาวสตริงจาวาสคริปต์

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

ตัวอย่าง

let text = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
let length = text.length;

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The length Property</h2>

<p>The length of the string is:</p>
<p id="demo"></p>

<script>
let text = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
document.getElementById("demo").innerHTML = text.length;
</script>

</body>
</html>

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

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


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

JavaScript สตริงสไลซ์()

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

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

ตัวอย่าง

ตัดส่วนหนึ่งของสตริงออกจากตำแหน่ง 7 ถึงตำแหน่ง 13:

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

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The slice() Method</h2>

<p>The sliced (extracted) part of the string is:</p>
<p id="demo"></p>

<script>
let text = "Apple, Banana, Kiwi";
let part = text.slice(7,13);
document.getElementById("demo").innerHTML = part; 
</script>

</body>
</html>

บันทึก

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

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

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

ตัวอย่าง

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

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

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The slice() Method</h2>

<p>Extract a part of a string from position 7:</p>
<p id="demo"></p>

<script>
let text = "Apple, Banana, Kiwi";
let part = text.slice(7)
document.getElementById("demo").innerHTML = part;
</script>

</body>
</html>

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

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

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The slice() Method</h2>

<p>Extract a part of a string counting from the end:</p>
<p id="demo"></p>

<script>
let text = "Apple, Banana, Kiwi";
let part = text.slice(-12);
document.getElementById("demo").innerHTML = part;
</script>

</body>
</html>

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

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

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The slice() Method</h2>

<p>Extract a part of a string and return the extracted parts in a new string:</p>

<p id="demo"></p>

<script>
let text = "Apple, Banana, Kiwi";
let part = text.slice(-12,-6)
document.getElementById("demo").innerHTML = part;
</script>

</body>
</html>

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

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

ข้อแตกต่างคือค่าเริ่มต้นและสิ้นสุดที่น้อยกว่า 0 จะถือเป็น 0 นิ้ว <รหัส class="w3-codespan">สตริงย่อย().

ตัวอย่าง

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

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript String Methods</h1>
<p>The substring() method extract a part of a string and returns the extracted parts in a new string:</p>

<p id="demo"></p>

<script>
let str = "Apple, Banana, Kiwi";
document.getElementById("demo").innerHTML = str.substring(7,13);
</script>

</body>
</html>

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

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

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

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

ตัวอย่าง

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

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript String Methods</h1>
<p>The substr() method extract a part of a string
and returns the extracted parts in a new string:</p>

<p id="demo"></p>

<script>
let str = "Apple, Banana, Kiwi";
document.getElementById("demo").innerHTML = str.substr(7,6);
</script>

</body>
</html>

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

ตัวอย่าง

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

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript String Methods</h1>
<p>The substr() method extract a part of a string and returns the extracted parts in a new string:</p>

<p id="demo"></p>

<script>
let str = "Apple, Banana, Kiwi";
document.getElementById("demo").innerHTML = str.substr(7);
</script>

</body>
</html>

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

ตัวอย่าง

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

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript String Methods</h1>
<p>The substr() method extract a part of a string and returns the extracted parts in a new string:</p>

<p id="demo"></p>

<script>
let str = "Apple, Banana, Kiwi";
document.getElementById("demo").innerHTML = str.substr(-4);
</script>

</body>
</html>

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

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

ตัวอย่าง

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

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>

<body>

<h1>JavaScript String Methods</h1>
<p>Replace &quot;Microsoft&quot; with &quot;W3Schools&quot; in the paragraph below:</p>

<button onclick="myFunction()">Try it</button>

<p id="demo">Please visit Microsoft!</p>

<script>
function myFunction() {
  let text = document.getElementById("demo").innerHTML;
  document.getElementById("demo").innerHTML =
  text.replace("Microsoft","W3Schools");
}
</script>

</body>
</html>

บันทึก

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

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

วิธีการ replace() จะแทนที่การจับคู่ เฉพาะรายการแรกเท่านั้น

หากคุณต้องการแทนที่รายการที่ตรงกันทั้งหมด ให้ใช้นิพจน์ทั่วไปด้วยชุดแฟล็ก /g ดูตัวอย่างด้านล่าง

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

ตัวอย่าง

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

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript String Methods</h1>
<p>Replace "Microsoft" with "W3Schools" in the paragraph below:</p>

<button onclick="myFunction()">Try it</button>

<p id="demo">Please visit Microsoft and Microsoft!</p>

<script>
function myFunction() {
  let text = document.getElementById("demo").innerHTML; 
  document.getElementById("demo").innerHTML =
  text.replace("Microsoft","W3Schools");
}
</script>

</body>
</html>

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

ตัวอย่าง

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

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript String Methods</h1>
<p>Try to replace "Microsoft" with "W3Schools" in the paragraph below:</p>

<button onclick="myFunction()">Try it</button>

<p id="demo">Please visit Microsoft!</p>

<script>
function myFunction() {
  let text = document.getElementById("demo").innerHTML; 
  document.getElementById("demo").innerHTML =
  text.replace("MICROSOFT","W3Schools");
}
</script>

<p>The replace() method is case sensitive. MICROSOFT (with upper-case) will not be replaced.</p>

</body>
</html>

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

ตัวอย่าง

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

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript String Methods</h1>
<p>Replace "Microsoft" with "W3Schools" in the paragraph below:</p>

<button onclick="myFunction()">Try it</button>

<p id="demo">Please visit Microsoft!</p>

<script>
function myFunction() {
  let text = document.getElementById("demo").innerHTML; 
  document.getElementById("demo").innerHTML =
  text.replace(/MICROSOFT/i,"W3Schools");
}
</script>

</body>
</html>

บันทึก

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

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

ตัวอย่าง

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

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript String Methods</h1>
<p>Replace all occurrences of "Microsoft" with "W3Schools" in the paragraph below:</p>

<button onclick="myFunction()">Try it</button>

<p id="demo">Please visit Microsoft and Microsoft!</p>

<script>
function myFunction() {
  let text = document.getElementById("demo").innerHTML; 
  document.getElementById("demo").innerHTML =
  text.replace(/Microsoft/g,"W3Schools");
}
</script>

</body>
</html>

บันทึก

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

สตริง JavaScript แทนที่ทั้งหมด()

ในปี 2021 JavaScript ได้เปิดตัวเมธอดสตริง replaceAll():

ตัวอย่าง

text = text.replaceAll("Cats","Dogs");
text = text.replaceAll("cats","dogs");

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Strings</h1>
<h2>The replaceAll() Method</h2>

<p>ES2021 intoduced the string method replaceAll().</p>

<p id="demo"></p>

<script>
let text = "I love cats. Cats are very easy to love. Cats are very popular."
text = text.replaceAll("Cats","Dogs");
text = text.replaceAll("cats","dogs");

document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

replaceAll() วิธีการช่วยให้คุณสามารถระบุ นิพจน์ทั่วไปแทนสตริงที่จะแทนที่

หากพารามิเตอร์เป็นนิพจน์ทั่วไป จะต้องตั้งค่าสถานะโกลบอล (g) มิฉะนั้น TypeError ถูกส่งออกไป

ตัวอย่าง

text = text.replaceAll(/Cats/g,"Dogs");
text = text.replaceAll(/cats/g,"dogs");

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Strings</h1>
<h2>The replaceAll() Method</h2>

<p>ES2021 intoduced the string method replaceAll().</p>

<p id="demo"></p>

<script>
let text = "I love cats. Cats are very easy to love. Cats are very popular";
text = text.replaceAll(/Cats/g,"Dogs");
text = text.replaceAll(/cats/g,"dogs");

document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

บันทึก

replaceAll() เป็นคุณลักษณะ ES2021

replaceAll() ไม่ทำงานใน Internet Explorer

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

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

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

สตริง JavaScript toUpperCase()

ตัวอย่าง

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

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript String Methods</h1>
<p>Convert string to upper case:</p>

<button onclick="myFunction()">Try it</button>

<p id="demo">Hello World!</p>

<script>
function myFunction() {
  let text = document.getElementById("demo").innerHTML;
  document.getElementById("demo").innerHTML =
  text.toUpperCase();
}
</script>

</body>
</html>

สตริง JavaScript เป็น LowerCase()

ตัวอย่าง

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

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript String Methods</h1>
<p>Convert string to lower case:</p>

<button onclick="myFunction()">Try it</button>

<p id="demo">Hello World!</p>

<script>
function myFunction() {
  let text = document.getElementById("demo").innerHTML;
  document.getElementById("demo").innerHTML =
  text.toLowerCase();
}
</script>

</body>
</html>

JavaScript สตริง concat()

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

ตัวอย่าง

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

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript String</h1>
<h2>The concat() Method</h2>

<p>The concat() method joins two or more strings:</p>

<p id="demo"></p>

<script>
let text1 = "Hello";
let text2 = "World!";
let text3 = text1.concat(" ",text2);
document.getElementById("demo").innerHTML = text3;
</script>

</body>
</html>

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

ตัวอย่าง

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

บันทึก

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

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

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

ตัดแต่งสตริง JavaScript()

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

ตัวอย่าง

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

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The trim() Method</h2>

<p id="demo"></p>

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

document.getElementById("demo").innerHTML =
"Length text1 = " + text1.length + "<br>Length text2 = " + text2.length;
</script>

</body>
</html>

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

ECMAScript 2019 เพิ่มเมธอด String trimStart() ให้กับ JavaScript <p>เมธอด trimStart() ทำงานเหมือนกับ trim() แต่จะลบช่องว่างออกจากจุดเริ่มต้นของเท่านั้น สตริง.

ตัวอย่าง

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

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The trimStart() Method</h2>

<p id="demo"></p>

<script>
let text1 = "     Hello World!     ";
let text2 = text1.trimStart();

document.getElementById("demo").innerHTML =
"Length text1 = " + text1.length + "<br>Length text2 = " + text2.length;
</script>

</body>
</html>

สตริง JavaScript trimStart() ได้รับการสนับสนุนในเบราว์เซอร์สมัยใหม่ทั้งหมดตั้งแต่เดือนมกราคม 2020:


Chrome 66	Edge 79	Firefox 61	Safari 12	Opera 50
Apr 2018	Jan 2020	Jun 2018	Sep 2018	May 2018

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

ECMAScript 2019 เพิ่มวิธีสตริง trimEnd() ให้กับ JavaScript <p>เมธอด trimEnd() ทำงานเหมือนกับ trim() แต่จะลบช่องว่างออกจากส่วนท้ายของเท่านั้น สตริง.

ตัวอย่าง

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

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The trimEnd() Method</h2>

<p id="demo"></p>

<script>
let text1 = "     Hello World!     ";
let text2 = text1.trimEnd();

document.getElementById("demo").innerHTML =
"Length text1 = " + text1.length + "<br>Length text2 = " + text2.length;
</script>

</body>
</html>

สตริง JavaScript trimEnd() ได้รับการสนับสนุนในเบราว์เซอร์สมัยใหม่ทั้งหมดตั้งแต่เดือนมกราคม 2020:


Chrome 66	Edge 79	Firefox 61	Safari 12	Opera 50
Apr 2018	Jan 2020	Jun 2018	Sep 2018	May 2018

การขยายสตริง JavaScript

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

JavaScript สตริง padStart()

padStart() วิธีการแพดสตริงตั้งแต่เริ่มต้น

มันจะวางสายด้วยสายอื่น (หลายครั้ง) จนกว่าจะถึงความยาวที่กำหนด

ตัวอย่าง

แพดสตริงด้วย "0" จนกระทั่งถึงความยาว 4:

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

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The padStart() Method</h2>

<p>The padStart() method pads a string from the start.</p>
<p>It pads the string with another string (multiple times) until it reaches a given length.</p>

<p id="demo"></p>

<script>
let text = "5";
text = text.padStart(4,"0");

document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

แพดสตริงด้วย "x" จนกระทั่งถึงความยาว 4:

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

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The padStart() Method</h2>

<p>The padStart() method pads a string from the start.</p>
<p>It pads the string with another string (multiple times) until it reaches a given length.</p>

<p id="demo"></p>

<script>
let text = "5";
document.getElementById("demo").innerHTML = text.padStart(4,"x");
</script>

</body>
</html>

บันทึก

วิธีการ padStart() เป็นวิธีสตริง

หากต้องการแพดตัวเลข ให้แปลงตัวเลขเป็นสตริงก่อน

ดูตัวอย่างด้านล่าง

ตัวอย่าง

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

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The padStart() Method</h2>

<p>The padStart() method pads a string from the start.</p>
<p>It pads the string with another string (multiple times) until it reaches a given length.</p>

<p id="demo"></p>

<script>
let numb = 5;
let text = numb.toString();
document.getElementById("demo").innerHTML = text.padStart(4,0);
</script>

</body>
</html>

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

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

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


Chrome	Edge	Firefox	Safari	Opera
Yes	Yes	Yes	Yes	Yes

padStart() ไม่ได้รับการสนับสนุนใน Internet Explorer

JavaScript สตริง padEnd()

padEnd() วิธีการเพิ่มสตริงจากส่วนท้าย

มันจะวางสายด้วยสายอื่น (หลายครั้ง) จนกว่าจะถึงความยาวที่กำหนด

ตัวอย่าง

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

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The padEnd() Method</h2>

<p>The padEnd() method pads a string at the end.</p>
<p>It pads the string with another string (multiple times) until it reaches a given length.</p>

<p id="demo"></p>

<script>
let text = "5";
text = text.padEnd(4,"0");

document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

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

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The padEnd() Method</h2>

<p>The padEnd() method pads a string at the end.</p>
<p>It pads the string with another string (multiple times) until it reaches a given length.</p>

<p id="demo"></p>

<script>
let text = "5";
document.getElementById("demo").innerHTML = text.padEnd(4,"x");
</script>

</body>
</html>

บันทึก

วิธีการ padEnd() เป็นวิธีสตริง

หากต้องการแพดตัวเลข ให้แปลงตัวเลขเป็นสตริงก่อน

ดูตัวอย่างด้านล่าง

ตัวอย่าง

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

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The padEnd() Method</h2>

<p>The padEnd() method pads a string at the end.</p>
<p>It pads the string with another string (multiple times) until it reaches a given length.</p>

<p id="demo"></p>

<script>
let numb = 5;
let text = numb.toString();
document.getElementById("demo").innerHTML = text.padEnd(4,"x");
</script>

</body>
</html>

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

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

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


Chrome	Edge	Firefox	Safari	Opera
Yes	Yes	Yes	Yes	Yes

padEnd() ไม่ได้รับการสนับสนุนใน Internet Explorer

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

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

charAt(ตำแหน่ง)
charCodeAt(ตำแหน่ง)
การเข้าถึงคุณสมบัติ [ ]

จาวาสคริปต์สตริง charAt()

charAt() วิธีการส่งกลับอักขระที่ระบุ ดัชนี (ตำแหน่ง) ในสตริง:

ตัวอย่าง

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

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript String</h1>
<h2>The charAt() Method</h2>

<p>The charAt() method returns the character at a given position in a string:</p>

<p id="demo"></p>

<script>
var text = "HELLO WORLD";
document.getElementById("demo").innerHTML = text.charAt(0);
</script>

</body>
</html>

สตริง JavaScript charCodeAt()

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

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

ตัวอย่าง

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

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript String</h1>
<h2>The charCodeAt() Method</h2>

<p>The charCodeAt() method returns the unicode of the character at a given position in a string:</p>

<p id="demo"></p>

<script>
let text = "HELLO WORLD";
document.getElementById("demo").innerHTML = text.charCodeAt(0);
</script>

</body>
</html>

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

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

ตัวอย่าง

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

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<p>Property access on strings:</p>

<p>The first character in the string is:</p>
<p id="demo"></p>

<script>
let text = "HELLO WORLD";
document.getElementById("demo").innerHTML = text[0];
</script>
</body>
</html>

บันทึก

การเข้าถึงทรัพย์สินอาจ คาดเดาไม่ได้: เล็กน้อย

มันทำให้สตริงดูเหมือนอาร์เรย์ (แต่ไม่ใช่)
หากไม่พบอักขระ [ ] จะส่งกลับค่าที่ไม่ได้กำหนด ในขณะที่ charAt() จะส่งกลับสตริงว่าง
เป็นแบบอ่านอย่างเดียว str[0]="A" ไม่มีข้อผิดพลาด (แต่ใช้งานไม่ได้!)

ตัวอย่าง

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

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<p>Property acces on strings are read only:</p>

<p id="demo"></p>

<script>
let text = "HELLO WORLD";

text[0] = "A";  // Does not work

document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

การแปลงสตริงให้เป็นอาร์เรย์

ถ้าคุณต้องการทำงานกับสตริงเป็นอาร์เรย์ คุณสามารถแปลงเป็นอาร์เรย์ได้

จาวาสคริปต์แยกสตริง()

สตริงสามารถแปลงเป็นอาร์เรย์ด้วย split() วิธีการ:

ตัวอย่าง

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

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript String Methods</h1>
<p>Display the first array element, after a string split:</p>

<p id="demo"></p>

<script>
let text = "a,b,c,d,e,f";
const myArray = text.split(",");
document.getElementById("demo").innerHTML = myArray[0];
</script>

</body>
</html>

หากละเว้นตัวคั่น อาร์เรย์ที่ส่งคืนจะมีสตริงทั้งหมด ในดัชนี [0]

ถ้าตัวคั่นเป็น "" อาร์เรย์ที่ส่งคืนจะเป็นอาร์เรย์ของเดี่ยว ตัวอักษร:

ตัวอย่าง

text.split("")

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript String Methods</h1>
<h2>The split().Method</h2>

<p id="demo"></p>

<script>
let text = "Hello";
const myArr = text.split("");

text = "";
for (let i = 0; i < myArr.length; i++) {
  text += myArr[i] + "<br>"
}
document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

การอ้างอิงสตริงที่สมบูรณ์

สำหรับการอ้างอิงสตริงที่สมบูรณ์ โปรดไปที่:

อ้างอิงสตริง JavaScript ที่สมบูรณ์

การอ้างอิงประกอบด้วยคำอธิบายและตัวอย่างของคุณสมบัติสตริงและวิธีการทั้งหมด