สตริง

ชุดอักขระใดๆ เช่น ตัวอักษร ตัวเลข สัญลักษณ์ และอื่นๆ ที่อยู่ระหว่างชุดเครื่องหมายคำพูดคู่ (") เครื่องหมายคำพูดเดี่ยว (') หรือเครื่องหมายแบ็กทิก (`) เป็นสตริงแบบพื้นฐาน คุณได้เห็นตัวอย่างสตริงไปบ้างแล้วในหลักสูตรนี้: อินสแตนซ์ของ console.log ในโมดูลก่อนหน้ามีสตริงแบบพื้นฐาน

console.log( "Hello, World." );
> Hello, World.

"Hello, World." คือสตริงแบบพื้นฐาน คุณจะได้รับผลลัพธ์เดียวกันกับ เครื่องหมายคำพูดเดี่ยวหรือเครื่องหมายแบ็กทิก

console.log( 'Hello, World.' );
> Hello, World.

console.log(`Hello, World.`);
> Hello, World.

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

console.log( "I'm a string." );
> I'm a string.

console.log( '"A string," I said.' );
> "A string," I said.

อินสแตนซ์ของอักขระที่แนบมาเดียวกันภายในสตริง "ปิด" สตริง ซึ่งอาจทำให้เกิดข้อผิดพลาด

console.log( '"I'm a string," I said.' );
> Uncaught SyntaxError: missing ) after argument list

เพื่อหลีกเลี่ยงปัญหานี้ ให้หลีกอักขระโดยใช้แบ็กสแลช (``):

console.log( '"I\'m a string," I said.' );
> "I'm a string," I said.

ออบเจ็กต์สตริง

เมื่อเรียกใช้เป็นฟังก์ชัน ออบเจ็กต์ String จะบังคับให้ค่าที่ระบุเป็นสตริงลิเทอรัล

let myString = String( 10 );

myString
> "10"

typeof myString
> string

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

let stringObj = new String( "My new string." );

typeof stringObj
> object

stringObj
> String { "My new string." }

การเชื่อมต่อ

เมื่อใช้ในบริบทของสตริงแทนที่จะเป็นตัวเลข เครื่องหมายบวกเดียว (+) จะทำหน้าที่เป็นโอเปอเรเตอร์การต่อกัน โดยรวมค่าสตริงหลายค่าไว้ในสตริงเดียว

console.log( "My" + " string." );
> My string.

ลิเทอรัลสตริงและลิเทอรัลเทมเพลต

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

const myString = "This
is a string.";
> Uncaught SyntaxError: "" string literal contains an unescaped line break

const myString = `This
is a string.`;

console.log( myString );

> This
is a string.

ลิเทอรัลของเทมเพลตอาจมีนิพจน์ตัวยึดตำแหน่งที่มีเครื่องหมายดอลลาร์และวงเล็บปีกกา (${}) ตัวยึดตำแหน่งเหล่านี้จะมีการ "ประมาณ" โดยค่าเริ่มต้น ซึ่งหมายความว่าผลลัพธ์ของนิพจน์จะแทนที่ตัวยึดตำแหน่งในสตริงสุดท้าย

console.log( "The result is " + ( 2 + 4 ) + "." );
> The result is 6.

console.log( `The result is ${ 2 + 4 }.` );
> The result is 6.

คุณสามารถส่งเทมเพลตลิเทอรัลไปยังฟังก์ชันที่กำหนดเองเพื่อสร้างเทมเพลตที่ติดแท็ก ซึ่งเป็นการเรียกฟังก์ชันที่ใช้เทมเพลตเดียว (Literal) เป็นชุดอาร์กิวเมนต์ และทำให้ตัวยึดตำแหน่งของเทมเพลตสร้างขึ้นตามตรรกะที่ผู้เขียนกำหนด

อาร์กิวเมนต์แรกของฟังก์ชันแท็กมีอาร์เรย์ของค่าสตริง และอาร์กิวเมนต์ที่เหลือจะเป็นตัวกำหนดตัวยึดตำแหน่ง อาร์เรย์ของค่าสตริงนี้สร้างขึ้นโดยการ "แยก" เทมเพลตตามตัวอักษรของตัวยึดตำแหน่งแต่ละรายการที่มี องค์ประกอบแรกในอาร์เรย์มีอักขระใดๆ ไปจนถึงตัวยึดตำแหน่งแรก องค์ประกอบที่ 2 มีอักขระใดๆ ระหว่างตัวยึดตำแหน่งแรกและที่ 2 เป็นต้น ระบบจะส่งตัวยึดตำแหน่งแต่ละรายการไปยังฟังก์ชันแท็กเป็นค่าเดี่ยวๆ ที่มีตัวยึดตำแหน่งที่เกี่ยวข้อง

const myNoun = "template literal";

function myTagFunction( myStrings, myPlaceholder ) {
    const myInitialString = myStrings[ 0 ];
    console.log( `${ myInitialString }modified ${ myPlaceholder }.` );
}

myTagFunction`I'm a ${ myNoun }.`;
> "I'm a modified template literal."

ทดสอบความเข้าใจ

อักขระใดใช้เพื่อเลี่ยงอักขระหลีก

แบ็กสแลช (∖)

เครื่องหมายอัญประกาศคู่ (")

เครื่องหมายทับ (/)

อักขระใดใช้สำหรับการเชื่อมโยง

+

&

.