Cách tốt nhất để nối chuỗi (concatenate strings) trong JavaScript?

Cách nhanh nhất và tốt nhất để nối chuỗi trong JavaScript hiện đại là dùng Template Literals (Backticks) hoặc toán tử +.

So sánh các cách

Cách	Ví dụ	Ưu điểm	Nhược điểm
Template Literal (ES6)	`${a} ${b}`	Đọc dễ, hỗ trợ multi-line, expression, nhanh	Cần ES6+
Toán tử +	`a + " " + b`	Hỗ trợ mọi trình duyệt, nhanh	Dài dòng nếu nhiều chuỗi
Array.join()	`[a, b].join(" ")`	Tốt cho mảng lớn, tránh tạo trung gian	Verbose cho 2-3 chuỗi
concat()	`a.concat(b)`	Functional style	Chậm hơn +, không hỗ trợ nhiều tham số tốt
StringBuilder pattern	`arr.push(); arr.join()`	Hiệu năng tốt cho loop nối nhiều	Phức tạp

Ví dụ Template Literal (Khuyến nghị)

<!DOCTYPE html>
<html>
<body>
    <script>
        var str1 = "Xin chào";
        var str2 = "Thế giới";
        var name = "An";
        
        // Template literal - đọc dễ, hỗ trợ expression
        var result = `${str1} ${str2}, ${name.toUpperCase()}!`;
        document.write(result); // "Xin chào Thế giới, AN!"
        
        // Multi-line
        var html = `
            <div>
                <h1>${str1}</h1>
                <p>${str2}</p>
            </div>
        `;
    </script>
</body>
</html>

Hiệu năng (Modern Engines - V8, SpiderMonkey, JavaScriptCore):

Toán tử + và Template Literal được tối ưu hóa rất tốt.
Trong loop nối nhiều chuỗi: dùng arr.push() rồi arr.join('') cuối cùng.
Tránh str += "..." trong loop lớn (tạo nhiều object trung gian).

Best Practice:

// 2-3 chuỗi: Template literal
const msg = `Hello ${name}, welcome to ${site}!`;

// Nhiều chuỗi trong loop:
const parts = [];
for (const item of items) {
    parts.push(process(item));
}
const result = parts.join('');