หนังสือ
JavaScript
บทที่ 2. สตริง
การต่อสตริง

JavaScript:
การต่อสตริง

วิธีการ:

ใน JavaScript, คุณมีวิธีการไม่กี่วิธีในการต่อสตริง แบบเก่า: + แบบใหม่: template literals (เทมเพลตที่เป็นตัวอักษร). นี่คือวิธีมองของพวกเขา

การใช้งาน + operator:

let hello = "Hello, ";
let world = "world!";
let greeting = hello + world;
console.log(greeting); // "Hello, world!"

การใช้งาน template literals:

let user = "Jane";
let welcomeMessage = `Hi, ${user}! Welcome back.`;
console.log(welcomeMessage); // "Hi, Jane! Welcome back."

ลงลึก

ในอดีต, + เป็นวิธีที่ไป, แต่มันกลายเป็นสิ่งที่ยุ่งเหยิงเมื่อมีตัวแปรมากมาย. เข้าสู่ ES6 ในปี 2015, นำเสนอ template literals (เครื่องหมาย backtick ```). นี้หมายถึงข้อความที่ดูสะอาดทำให้สามารถสอดตัวแปรและคำนวณไว้ในข้อความของคุณโดยไม่ต้องเหนื่อยล้า.

ทำไม + ถึงเป็นเรื่องยาก:

  • ยากต่อการอ่านเมื่อมีตัวแปรหลายตัว.
  • ง่ายที่จะพลาดการเว้นวรรค ทำให้คำติดกัน.
  • และ, ใครต้องการมี + มากมาย?

ทำไม template literals ถึงดี:

  • การอ่านง่าย: เหมือนเป็นประโยคภาษาอังกฤษที่มีช่องว่างที่ถูกกรอกเข้าไป.
  • รองรับหลายบรรทัด: คุณสามารถสร้างข้อความที่ยาวหลายบรรทัดโดยไม่ต้องใช้ + หรือ \n.
  • การแทรกนิพจน์: ใส่ตัวแปร, คำนวณคณิตศาสตร์, ได้ในครั้งเดียว.

นี่คือตัวอย่างการใช้หลายบรรทัดและนิพจน์:

let apples = 3;
let oranges = 5;
let fruitSummary = `You have ${apples + oranges} pieces of fruit: 
${apples} apples and 
${oranges} oranges.`;
console.log(fruitSummary);

ส่งผลให้ได้สรุปที่เป็นระเบียบโดยไม่ต้องใช้เทคนิค + ใดๆ.

จากมุมมองทางเทคนิค, การต่อสตริงสร้างสตริงใหม่ทุกครั้งที่คุณใช้ +. สำหรับคอมพิวเตอร์, นั่นเป็นเหมือนกับการทำขนมใหม่ทุกครั้งที่คุณต้องการเพิ่มถั่ว. ไม่มีประสิทธิภาพ. Template literals เหมือนมีแม่พิมพ์ที่คุณสามารถใส่ส่วนผสมทั้งหมดเข้าไปในครั้งเดียว - ประสิทธิภาพดีขึ้น, โดยเฉพาะกับสตริงขนาดใหญ่หรือในลูป.

ดูเพิ่มเติม

การทำให้ตัวอักษรเป็นตัวพิมพ์ใหญ่ในสตริงแปลงสตริงเป็นตัวเล็ก