JavaScript String Interpolation:A Beginner's Guide

การแก้ไขสตริง JavaScript เป็นกระบวนการของการฝังนิพจน์เป็นส่วนหนึ่งของสตริง เทมเพลตลิเทอรัลใช้เพื่อฝังนิพจน์ คุณเพิ่มค่าต่างๆ เช่น ตัวแปรและการคำนวณทางคณิตศาสตร์ลงในสตริงได้โดยใช้การประมาณค่า

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

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

เริ่มกันเลย!

การแก้ไขสตริง JavaScript

คุณสามารถเพิ่มค่าลงในสตริง JavaScript ได้โดยใช้เทมเพลตตามตัวอักษร นี่คือเครื่องหมายดอลลาร์ตามด้วยวงเล็บปีกกาคู่หนึ่ง ภายในวงเล็บปีกกาควรมีนิพจน์ที่มีค่าที่คุณต้องการฝังในสตริง

เทมเพลตช่วยให้คุณฝังค่าลงในสตริงโดยไม่ต้องอาศัยการต่อกัน ในการประกาศเทมเพลตตามตัวอักษร สตริงของคุณต้องอยู่ในเครื่องหมายขีดหลัง (“) แทนเครื่องหมายอัญประกาศ

พิจารณาไวยากรณ์ต่อไปนี้:

`This is a string. Here is the value of 9 + 10: ${9 + 10}.`

เราได้ประกาศเทมเพลตตามตัวอักษรแล้ว สำนวนของเราคือ:

81% ของผู้เข้าร่วมกล่าวว่าพวกเขารู้สึกมั่นใจมากขึ้นเกี่ยวกับโอกาสในการทำงานด้านเทคโนโลยีหลังจากเข้าร่วม bootcamp จับคู่กับ Bootcamp วันนี้

ผู้สำเร็จการศึกษาจากหลักสูตร bootcamp โดยเฉลี่ยใช้เวลาน้อยกว่าหกเดือนในการเปลี่ยนอาชีพ ตั้งแต่เริ่มต้น bootcamp ไปจนถึงหางานแรก

${9 + 10}

นิพจน์นี้ประเมิน 9 + 10 ผลลัพธ์ของนิพจน์นี้จะถูกเพิ่มที่ส่วนท้ายของสตริงของเรา ก่อนที่จะหยุดเต็ม นี่เป็นเพราะเราได้เขียนนิพจน์ของเราไว้ก่อนจุดสิ้นสุด

ตัวอย่างการแก้ไขสตริง JavaScript

เทมเพลตช่วยให้คุณสามารถฝังค่าลงในสตริงได้โดยตรง พิจารณารหัสนี้:

const address_number = "10 Downing Street";
const prime_minister_address = `The Prime Minister's address is ${address_number}.`;
console.log(prime_minister_address)

รหัสบรรทัดแรกกำหนดหมายเลขที่อยู่ของนายกรัฐมนตรี ต่อไป เราใช้เทมเพลตเพื่อสร้างที่อยู่แบบเต็ม ไวยากรณ์ ${} ใช้เพื่อฝังค่าลงในสตริงของเรา เราได้เพิ่มค่าของ “address_number” ลงในสตริงแล้ว

เรียกใช้รหัสของเรา:

The Prime Minister's address is 10 Downing Street

รหัสของเราได้รวมสองสตริงของเราเข้าด้วยกัน

เมื่อคุณใช้เทมเพลตลิเทอรัล คุณสามารถฝังค่าใดก็ได้ภายในลิเทอรัล ซึ่งรวมถึงสตริง ตัวเลข หรือผลลัพธ์ของการคำนวณทางคณิตศาสตร์ของ JavaScript คุณไม่จำเป็นต้องฝังเทมเพลตลิเทอรัลลงในเทมเพลตเทมเพลต

ข้อได้เปรียบที่สำคัญอย่างหนึ่งของตัวอักษรสตริงคือรูปแบบที่ชัดเจน เราสามารถฝังโค้ด JavaScript ลงในสตริงได้โดยตรง

ผสานสตริงโดยใช้การต่อกัน

เราสามารถรวมสตริงโดยใช้การต่อกัน สมมติว่าเรามีสองสตริง:

const full_address = `The Prime Minister's address is `;
const address_number = `10 Downing Street`;

คุณสามารถเชื่อมสองสตริงโดยใช้เครื่องหมายบวก (+):

const prime_minister_address = full_address + address_number + ".";
console.log(prime_minister_address);

คอนโซล JavaScript พิมพ์ค่าต่อไปนี้:

The Prime Minister's address is 10 Downing Street

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

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

จาวาสคริปต์การแก้ไขสตริง:การคำนวณ

รหัสภายในเทมเพลตคือคำสั่ง JavaScript ซึ่งหมายความว่าคุณสามารถใช้เทมเพลตเพื่อคำนวณและฝังค่าลงในโปรแกรมได้

มาสร้างสตริงที่คำนวณราคาของเครื่องดื่มสองแก้วที่ร้านกาแฟและใส่ผลลัพธ์ลงในสตริง:

var drink1 = 2.30;
var drink2 = 2.20;

var bill = `The total cost of your drinks is $${drink1 + drink2}.`;

ภายในไวยากรณ์ ${} เราได้เพิ่มการคำนวณ การคำนวณนี้จะเพิ่มค่าของตัวแปร JavaScript สองตัวเข้าด้วยกัน ตัวแปรของเราคือ drink1 (2.30) และ drink2 (2.20) รวมกัน รหัสของเราส่งคืนสตริงที่มีผลรวมของค่าเหล่านี้:

The total cost of your drinks is $4.50.

จาวาสคริปต์การแก้ไขสตริง:ตัวดำเนินการแบบสามส่วน

โอเปอเรเตอร์ ternary JavaScript ช่วยให้คุณประเมินว่าคำสั่งเป็นจริงหรือเท็จ เป็นวิธีที่กระชับกว่าในการเขียนคำสั่ง if ตัวดำเนินการแบบไตรภาคมีประโยชน์อย่างยิ่งหากผลลัพธ์ของ if คำสั่งจะใช้โค้ดเพียงหนึ่งบรรทัดเท่านั้น

หากลูกค้าใช้จ่ายกาแฟมากกว่า 4.00 ดอลลาร์สหรัฐฯ พวกเขาควรได้รับใบเรียกเก็บเงิน จากนั้นควรขอให้เข้าร่วมชมรมบัตรสะสมคะแนนกาแฟ มิฉะนั้นก็ควรจะนำเสนอด้วยใบเรียกเก็บเงินของพวกเขา เราสามารถใช้ ternary operator เพื่อตรวจสอบค่าใช้จ่ายในใบเรียกเก็บเงินของลูกค้าได้:

var drink1 = 2.30;
var drink2 = 2.20;
var total = drink1 + drink2;

var bill = `The total cost of your drinks is $${total}. ${total > 4.00 ? "Would you like to join our coffee club? It will earn you a free coffee for every ten that you buy." : ""}`;
console.log(bill);

เทมเพลตของเรามีนิพจน์ที่ฝังอยู่สองนิพจน์ ขั้นแรก เราฝังค่าของ "ผลรวม" ไว้ในสตริงของเรา ต่อไป เราใช้ผู้ให้บริการแบบไตรภาคเพื่อตรวจสอบว่าควรขอให้ลูกค้าเข้าร่วมคลับบัตรสะสมคะแนนของร้านกาแฟหรือไม่

หากราคาซื้อรวมมากกว่า $4.00 ข้อความต่อไปนี้จะถูกพิมพ์ไปที่คอนโซล:

The total cost of your drinks is $4.50. Would you like to join our coffee club? It will earn you a free coffee for every ten that you buy.

มิฉะนั้น โอเปอเรเตอร์ ternary ของเราจะคืนค่าหลังเครื่องหมายทวิภาค (“:”) นี่คือค่าที่ส่งคืนเมื่อนิพจน์ประเมินเป็นเท็จ

ในตัวอย่างของเรา ค่าหลังโคลอนเป็นสตริงว่าง ซึ่งหมายความว่าหากการซื้อของลูกค้าต่ำกว่า $4.00 ระบบจะส่งคืนเฉพาะประโยคแรกของเทมเพลตของเราเท่านั้น:

The total cost of your drinks is $4.50.

บทสรุป

เทมเพลตตัวอักษรช่วยให้คุณฝังค่าภายในสตริงได้ คุณสามารถทำการคำนวณภายในเทมเพลตตามตัวอักษรได้ เราประกาศเทมเพลตโดยใช้ backticks ข้อความที่จะประเมินจะแสดงด้วยเครื่องหมายดอลลาร์และวงเล็บปีกกาคู่หนึ่งซึ่งคำสั่งนั้นปรากฏขึ้น

สำหรับคำแนะนำในการเรียนรู้เพิ่มเติมเกี่ยวกับ JavaScript โปรดอ่านคู่มือ How to Learn JavaScript