เรียนรู้วิธีเชื่อมสตริงตั้งแต่สองสตริงขึ้นไปด้วย JavaScript
ใน JavaScript มีวิธีการต่างๆ ในการรวมสตริงตั้งแต่สองสตริงขึ้นไปเข้าด้วยกัน รวมถึงโอเปอเรเตอร์เครื่องหมายบวก +
, เครื่องหมายบวกเท่ากับ +=
โอเปอเรเตอร์ และ concat()
.
หมายเหตุ:+
และ +=
เรียกว่า ตัวดำเนินการมอบหมาย
มาลองทั้งสามกันเลย!
ตัวดำเนินการบวก (+)
สมมติว่าคุณมีตัวแปรสองตัวที่เรียกว่า firstName
และ lastName
และคุณต้องการกำหนดค่ารวมของตัวแปรเหล่านั้นให้กับตัวแปรที่สามที่เรียกว่า fullName
. คุณสามารถทำสิ่งนี้ได้:
const firstName = "Steve"
const lastName = "Jobs"
const fullName = firstName + lastName
console.log(fullName) // SteveJobs
เพิ่มการแยก (เว้นวรรค)
การทำ fullName
ค่าสตริงอ่านง่ายขึ้น มาเพิ่มช่องว่างระหว่างสตีฟกับจ็อบส์กัน เราจะนำโค้ดเดิมกลับมาใช้ใหม่ แต่คราวนี้เราเพิ่มตัวคั่นระหว่าง + '' +
เช่นนี้:
const firstName = "Steve"
const lastName = "Jobs"
const fullName = firstName + " " + lastName
console.log(fullName) // Steve Jobs
หมายเหตุ:คุณสามารถเพิ่มตัวคั่นด้วยการเพิ่มช่องว่างหลัง "Steve "
หรือก่อน " Jobs"
แต่นั่นอาจนำไปสู่ปัญหาการจัดรูปแบบอื่นๆ หากคุณวางแผนที่จะใช้ firstName
หรือ lastName
ตัวแปรในบริบทที่แตกต่างกันในโครงการของคุณ ฉันไม่แนะนำวิธีการนั้น
ตัวดำเนินการบวกเท่ากับ (+=)
หากคุณไม่ต้องการสร้างตัวแปรใหม่ไม่ว่าด้วยเหตุผลใดก็ตาม (fullName
) คุณสามารถกำหนด lastName
ตัวแปรเป็น firstName
โดยใช้เครื่องหมายบวกเท่ากับ +=
:
console.log((firstName += lastName))
// SteveJobs
อย่างไรก็ตาม อย่างที่คุณเห็น ตอนนี้เราต้องการตัวคั่นอีกครั้ง การเพิ่มค่าหลายค่าด้วย +=
โอเปอเรเตอร์ที่คุณอาจคิดว่าเป็นไปได้:
firstName += " " += lastName
แต่นั่นจะทำให้คุณเกิดข้อผิดพลาด:
Uncaught SyntaxError: Invalid left-hand side in assignment
คุณต้องรวมค่าในบรรทัดแยกกันแทน ขั้นแรกให้กำหนดตัวคั่นช่องว่างให้กับ firstName
แล้วกำหนด lastName
ถึง firstName
หลังจากนั้น:
let firstName = "Steve"
let lastName = "Jobs"
// First assign separator value
firstName += " "
// Then assign last name
firstName += lastName
// Result: Steve Jobs
เมธอด concat()
คุณยังสามารถรวมสตริงโดยใช้ JavaScripts concat()
วิธีการ:
let firstName = "Steve"
let lastName = "Jobs"
const fullName = firstName.concat(lastName)
console.log(fullName)
// SteveJobs
อีกครั้งที่เราต้องการตัวคั่น ตรงไปตรงมากับ concat()
. เพียงเพิ่มช่องว่างด้วยสตริงและเครื่องหมายจุลภาค ตามด้วย lastName
ตัวแปร:
const fullName = firstName.concat(" ", lastName)
console.log(fullName)
// Steve Jobs
คุณควรใช้วิธีใดในการรวมสตริง
ด้วยเหตุผลด้านประสิทธิภาพ Mozilla และแหล่งข้อมูล JS ที่น่าเชื่อถืออื่นๆ ขอแนะนำอย่างยิ่งให้ใช้ +
หรือ +=
เมื่อใดก็ตามที่เป็นไปได้
ตามที่แสดงกรณีทดสอบ JSPerf วัตถุสตริงเช่น concat()
เป็นวิธีที่ช้ากว่าสำหรับล่าม JavaScript (ที่ทำงานในเบราว์เซอร์ของคุณ) กว่าสตริงดั้งเดิมเช่น +
และ +=
: