Một số cách nối chuỗi trong Javascript

Trong bài viết này, mình sẽ đưa ra một cách nối chuỗi trong Javascript, hy vọng sẽ giúp code của bạn ngắn hơn và dễ đọc hơn.

1. Sử dụng template string

• Template string là một tính năng trong ES6, cú pháp của tính năng này cho phép chúng ta có thể viết biểu thức ngay bên trong chuỗi. Trong đó, thay vì sử dụng cặp dấu " " hay ' ' bao quanh chuỗi thì sử dụng cặp dấu ` `. Để hiểu rõ hơn, mình có ví dụ sau:

let name = 'Alice';
let hello = `Hello ${name}` console.log(hello);
// => Hello Alice

• Giả sử không sử dụng template string để nếu chuỗi, mình có ví dụ sau:

let str = "Hi, I'm" + name;

• Và kết quả trả về:

console.log(str);
// => Hi, I'mAlice

• Nếu sử dụng template string:

let str = `Hi, I'm ${name}`

• Kết quả như sau:

console.log(str)
// => Hi, I'm Alice

• Như vậy, khi sử dụng template string, chúng ta sẽ dễ dàng hình dung ra chuỗi sẽ được in ra màn hình như thế nào, code sẽ dễ dàng đọc và maintain.

2. Sử dụng join()

• join() : là một method tạo ra một chuỗi bằng cách nối các phần tử trong một mảng, mặc định các phần tử trong chuỗi sẽ được ngăn cách bằng dấu phẩy, hoặc có thể chỉ định.

const arr = ["Kim", "Mộc", "Thuỷ", "Hỏa", "Thổ"]; console.log(arr.join());
// => Kim, Mộc, Thủy, Hỏa, Thổ console.log(arr.join(" "))
// => Kim Mộc Thủy Hỏa Thổ console.log(arr.join("-"))
// => Kim-Mộc-Thủy-Hỏa-Thổ

3. Sử dụng concat()

• concat(): Dùng để nối 2 hay nhiều chuỗi với nhau

let str1 = "Hello";
let str3 = "World!"; console.log(str1.concat(' ', str2))
// => Hello World! console.log(str1.concat('-', str2))
// => Hello-World!

4. Sử dụng toán tử '+'

• Sử dụng toán tử '+', chúng ta có thể tạo ra một chuỗi mới hoặc thao tác với một chuỗi đã có từ trước.

let ironMan = "Iron Man ";
let captain = "Captain America ";
let thor = "Thor";
let newStr = "Hello " + ironMan + captain + thor; console.log(newStr);
// => Hello Iron Man Captain America Thor

let oldStr = "Hello World!"
oldStr += " Hello Sun*" console.log(oldStr)
// => Hello World! Hello Sun*

5. Tài liệu tham khảo

• Template string: https://developer.mozilla.org/vi/docs/Web/JavaScript/Reference/Template_literals
• Join: https://developer.mozilla.org/vi/docs/Web/JavaScript/Reference/Global_Objects/Array/join
• Concat: https://developer.mozilla.org/vi/docs/Web/JavaScript/Reference/Global_Objects/Array/concat
• https://medium.com/dailyjs/4-ways-to-combine-strings-in-javascript-b1de5302fdaa