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

สารบัญ

สตริง JavaScript ใช้สำหรับจัดเก็บและจัดการข้อความ

สตริง JavaScript มีอักขระตั้งแต่ศูนย์ขึ้นไปที่เขียนอยู่ภายในเครื่องหมายคำพูด

ตัวอย่าง

let text = "John Doe";

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

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>

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

<script>
let text = "John Doe";  // String written inside quotes
document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

คุณสามารถใช้เครื่องหมายคำพูดเดี่ยวหรือคู่:

ตัวอย่าง

let carName1 = "Volvo XC60";  
  // Double quotes
let carName2 = 'Volvo XC60';  // Single quotes

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

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<p>Strings are written inside quotes. You can use single or double quotes:</p>

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

<script>
let carName1 = "Volvo XC60"; // Double quotes
let carName2 = 'Volvo XC60'; // Single quotes

document.getElementById("demo").innerHTML =
carName1 + " " + carName2; 
</script>

</body>
</html>

คุณสามารถใช้เครื่องหมายคำพูดภายในสตริงได้ ตราบใดที่มันไม่ตรงกับเครื่องหมายคำพูด ล้อมรอบสตริง:

ตัวอย่าง

let answer1 = "It's alright";
let answer2 = "He is called 'Johnny'";
let answer3 = 'He is called "Johnny"';

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

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<p>You can use quotes inside a string, as long as they don't match the quotes surrounding the string.</p>

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

<script>
let answer1 = "It's alright";
let answer2 = "He is called 'Johnny'";
let answer3 = 'He is called "Johnny"'; 

document.getElementById("demo").innerHTML =
answer1 + "<br>" + answer2 + "<br>" + answer3; 
</script>

</body>
</html>

ความยาวสาย

หากต้องการค้นหาความยาวของสตริงให้ใช้คุณสมบัติ 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>

ตัวละครหลบหนี

เนื่องจากสตริงจะต้องเขียนภายในเครื่องหมายคำพูด JavaScript จะเข้าใจผิดสตริงนี้:

let text = "We are the so-called "Vikings" from the north.";

เชือกจะถูกสับเป็น "เราคือสิ่งที่เรียกว่า"

วิธีแก้ไขเพื่อหลีกเลี่ยงปัญหานี้คือการใช้อักขระหลีกเครื่องหมายแบ็กสแลช

เครื่องหมายแบ็กสแลช (\) อักขระหลีกเปลี่ยนอักขระพิเศษเป็นอักขระสตริง:

Code	Result	Description
\'	'	Single quote
\"	"	Double quote
\\	\	Backslash

ลำดับ \" แทรกเครื่องหมายคำพูดคู่ในสตริง:

ตัวอย่าง

let text = "We are the so-called \"Vikings\" from the north.";

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

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>

<p>The escape sequence \" inserts a double quote in a string.</p>

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

<script>
let text = "We are the so-called \"Vikings\" from the north.";
document.getElementById("demo").innerHTML = text; 
</script>

</body>
</html>

ลำดับ \' แทรกเครื่องหมายคำพูดเดี่ยวในสตริง:

ตัวอย่าง

let text= 'It\'s alright.';

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

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>

<p>The escape sequence \' inserts a single quote in a string.</p>

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

<script>
let text = 'It\'s alright.';
document.getElementById("demo").innerHTML = text; 
</script>

</body>
</html>

ลำดับ \\ แทรกแบ็กสแลชในสตริง:

ตัวอย่าง

let text = "The character \\ is called backslash.";

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

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>

<p>The escape sequence \\ inserts a backslash in a string.</p>

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

<script>
let text = "The character \\ is called backslash.";
document.getElementById("demo").innerHTML = text; 
</script>

</body>
</html>

ลำดับหลีกอื่นๆ อีกหกลำดับใช้ได้ใน JavaScript:

\b: แบ็คสเปซ
\f: ฟีดรูปแบบ
\n: ไลน์ใหม่
\r: การคืนรถ
\t: ตารางแนวนอน
\v: ตารางแนวตั้ง

อักขระหลีก 6 ตัวข้างต้นได้รับการออกแบบมาเพื่อควบคุม เครื่องพิมพ์ดีด โทรไทป์ และเครื่องแฟกซ์ มันไม่สมเหตุสมผลเลยใน HTML

ทำลายบรรทัดรหัสยาว

เพื่อให้อ่านง่ายที่สุด โปรแกรมเมอร์มักจะหลีกเลี่ยงบรรทัดโค้ดที่ยาวกว่า 80 ตัวอักษร

หากคำสั่ง JavaScript ไม่พอดีกับหนึ่งบรรทัด ให้แยกตำแหน่งที่ดีที่สุด มันอยู่หลังตัวดำเนินการ:

ตัวอย่าง

document.getElementById("demo").innerHTML =
"Hello Dolly!";

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

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Statements</h2>

<p>
The best place to break a code line is after an operator or a comma.
</p>

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

<script>
document.getElementById("demo").innerHTML =
"Hello Dolly!";
</script>

</body>
</html>

คุณยังสามารถแบ่งบรรทัดโค้ด ภายในสตริงข้อความ ด้วยแบ็กสแลชเดี่ยว:

ตัวอย่าง

document.getElementById("demo").innerHTML = 
"Hello \
Dolly!";

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

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>

<p>
You can break a code line within a text string with a backslash.
</p>

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

<script>
document.getElementById("demo").innerHTML = "Hello \
Dolly!";
</script>

</body>
</html>

วิธีการ \ ไม่ใช่วิธีที่ต้องการ อาจไม่มีการสนับสนุนแบบสากล
เบราว์เซอร์บางตัวมี ไม่อนุญาตให้มีช่องว่างด้านหลังอักขระ \

วิธีแยกสตริงที่ปลอดภัยกว่าคือการใช้สตริง ส่วนที่เพิ่มเข้าไป:

ตัวอย่าง

document.getElementById("demo").innerHTML = "Hello " + 
"Dolly!";

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

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>

<p>The safest way to break a code line in a string is using string addition.</p>

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

<script>
document.getElementById("demo").innerHTML = "Hello " +
"Dolly!";
</script>

</body>
</html>

คุณไม่สามารถแยกบรรทัดโค้ดด้วยแบ็กสแลชได้:

ตัวอย่าง

document.getElementById("demo").innerHTML = \ 
"Hello Dolly!";

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

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Statements</h2>

<p id="demo">You cannot break a code line with a \ backslash.</p>

<script>
document.getElementById("demo").innerHTML = \
"Hello Dolly.";
</script>

</body>
</html>

สตริง JavaScript เป็นวัตถุ

โดยปกติแล้ว สตริง JavaScript จะเป็นค่าพื้นฐานที่สร้างขึ้นจากตัวอักษร:

let x = "John";

แต่สตริงยังสามารถกำหนดเป็นวัตถุที่มีคำหลัก ใหม่:

let y = new String("John");

ตัวอย่าง

let x = "John";
let y = new String("John");

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

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>

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

<script>
// x is a string
let x = "John";

// y is an object
let y = new String("John");

document.getElementById("demo").innerHTML =
typeof x + "<br>" + typeof y;
</script>

</body>
</html>

อย่าสร้างวัตถุ Strings

คำหลัก ใหม่ ทำให้โค้ดซับซ้อนและทำให้ความเร็วในการดำเนินการช้าลง

วัตถุสตริงสามารถสร้างผลลัพธ์ที่ไม่คาดคิด:

เมื่อใช้ตัวดำเนินการ == x และ y จะ เท่ากัน:

let x = "John";
let y = new String("John");

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

<!DOCTYPE html>
<html>
<body>

<h2>Never Create Strings as Objects</h2>
<p>Strings and objects cannot be safely compared.</p>

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

<script>
let x = "John";        // x is a string
let y = new String("John");  // y is an object
document.getElementById("demo").innerHTML = (x==y);
</script>

</body>
</html>

เมื่อใช้ตัวดำเนินการ === x และ y ไม่เท่ากัน:

let x = "John";
let y = new String("John");

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

<!DOCTYPE html>
<html>
<body>

<h2>Never Create Strings as Objects</h2>
<p>Strings and objects cannot be safely compared.</p>

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

<script>
let x = "John";        // x is a string
let y = new String("John");  // y is an object
document.getElementById("demo").innerHTML = (x===y);
</script>

</body>
</html>

สังเกตความแตกต่างระหว่าง (x==y) และ (x===y)

(x == y) จริงหรือเท็จ?

let x = new String("John");
let y = new String("John");

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

<!DOCTYPE html>
<html>
<body>

<h2>Never Create Strings as Objects</h2>
<p>JavaScript objects cannot be compared.</p>

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

<script>
let x = new String("John");  // x is an object
let y = new String("John");  // y is an object
document.getElementById("demo").innerHTML = (x==y);
</script>

</body>
</html>

(x === y) จริงหรือเท็จ?

let x = new String("John");
let y = new String("John");

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

<!DOCTYPE html>
<html>
<body>

<h2>Never Create Strings as Objects</h2>
<p>JavaScript objects cannot be compared.</p>

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

<script>
let x = new String("John");  // x is an object
let y = new String("John");  // y is an object
document.getElementById("demo").innerHTML = (x===y);
</script>

</body>
</html>

การเปรียบเทียบวัตถุ JavaScript สองรายการ เสมอ จะส่งกลับค่า false

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

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

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

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