Cách Nối Hai Hoặc Nhiều Chuỗi Trong JavaScript

Học cách nối hai hoặc nhiều chuỗi với JavaScript.

Trong JavaScript có các phương pháp nối chuỗi khác nhau, bao gồm toán tử cộng +, toán tử cộng gán +=, và concat().

Lưu ý: + và += gọi là assignment operators.

Thử cả ba!

Toán tử cộng (+)

Giả sử hai biến firstName và lastName, muốn gán giá trị kết hợp cho biến thứ ba fullName. Làm như sau:

const firstName = "Steve" const lastName = "Jobs" const fullName = firstName + lastName console.log(fullName) // SteveJobs

Thêm khoảng trách phân tách

Để fullName dễ đọc hơn, thêm khoảng trắng giữa Steve và Jobs. Dùng lại code trước, thêm separator giữa + '' +:

const firstName = "Steve" const lastName = "Jobs" const fullName = firstName + " " + lastName console.log(fullName) // Steve Jobs

Lưu ý: bạn cũng có thể thêm separator bằng cách thêm space sau "Steve " hoặc trước " Jobs" nhưng có thể gây vấn đề format nếu dùng firstName hoặc lastName ở ngữ cảnh khác. Không khuyến khích cách đó.

Toán tử cộng gán (+=)

Nếu vì lý do gì không muốn tạo biến mới (fullName), gán lastName cho firstName dùng toán tử +=:

console.log((firstName += lastName)) // SteveJobs

Tuy nhiên, cần separator. Để thêm nhiều giá trị với += bạn nghĩ có thể:

firstName += " " += lastName

Nhưng sẽ ném lỗi:

Uncaught SyntaxError: Invalid left-hand side in assignment

Thay vào đó cần gán giá trị trên dòng riêng. Trước gán separator cho firstName, sau gán lastName cho firstName:

let firstName = "Steve" let lastName = "Jobs" // Trước gán separator firstName += " " // Sau gán last name firstName += lastName // Kết quả: Steve Jobs

Phương thức concat()

Cũng nối chuỗi bằng phương thức concat() của JavaScript:

let firstName = "Steve" let lastName = "Jobs" const fullName = firstName.concat(lastName) console.log(fullName) // SteveJobs

Lại cần separator. Dễ dàng với concat(). Thêm space với chuỗi và dấu phẩy, theo sau biến lastName:

const fullName = firstName.concat(" ", lastName) console.log(fullName) // Steve Jobs

Nên dùng phương pháp nào nối chuỗi?

Vì lý do hiệu suất, Mozilla và nhiều nguồn JS uy tín khuyên dùng + hoặc += khi có thể.

Như test case JSPerf này cho thấy, string object như concat() chậm hơn nhiều cho JS interpreter (chạy trong trình duyệt) so với string primitives như + và +=: