Làm cách nào để nối một chuỗi trong JavaScript?

Phạm vi của Điều

• Trong bài viết này, chúng ta sẽ nghiên cứu các phương pháp nối chuỗi khác nhau trong JavaScript cùng với cú pháp và mã ví dụ của chúng
• Chúng ta sẽ xem xét khái niệm thoát các ký tự trong chuỗi và đồng thời, chúng ta sẽ kiểm tra xem trình duyệt nào hỗ trợ phương thức nối chức năng nào trong JavaScript

Nối chuỗi trong bất kỳ ngôn ngữ lập trình nào chỉ đơn giản là nối một hoặc nhiều chuỗi vào cuối chuỗi khác. Ví dụ: Nối các chuỗi "World" và "Chào buổi chiều" vào cuối chuỗi "Xin chào" sẽ tạo ra chuỗi cuối cùng là "Xin chào thế giới, chào buổi chiều". Điều này thực sự hấp dẫn nhưng bạn đã bao giờ tự hỏi điều gì sẽ xảy ra nếu bạn muốn nối một số nguyên hoặc số dấu phẩy động vào cuối chuỗi chưa?

• sử dụng phương thức concat[]
• sử dụng toán tử '+'
• sử dụng phương thức nối mảng []
• sử dụng chữ mẫu

Khi chúng ta chuyển qua quá trình của bài viết này, chúng ta sẽ nghiên cứu chi tiết về tất cả các phương thức này cùng với cú pháp và mã ví dụ của chúng. ]

Chuỗi. phương thức concat[] chấp nhận một danh sách các chuỗi làm tham số và trả về một chuỗi mới sau khi nối i. e. sự kết hợp của tất cả các chuỗi. Nếu các tham số không phải là chuỗi, trước tiên phương thức concat[] sẽ chuyển đổi chúng thành chuỗi và sau đó xảy ra phép nối. Như chúng ta biết rằng các chuỗi trong JavaScript là bất biến, vì vậy phương thức concat[] không sửa đổi các chuỗi đầu vào mà trả về một chuỗi mới có tất cả các chuỗi đầu vào được nối với nhau

string1.concat[value1, value2, .. value_n];
Ở đây, string1 là một tên biến cho chuỗi ở cuối, tất cả các chuỗi khác đã truyền sẽ được nối với nhau. Nếu string1 ở đây có giá trị null hoặc nó không phải là string, thì phương thức concat[] sẽ ném TypeError. Nó nhất thiết phải là một giá trị chuỗi trong khi các đối số được truyền i. e. giá trị1, giá trị2. có thể là một chuỗi hoặc không phải chuỗi như đã thảo luận ở trên
Trong ví dụ JavaScript này, chúng tôi có một chuỗi tạm thời là "Chào buổi sáng". Chúng tôi đã chuyển thêm hai chuỗi mới - "," và "Chúc một ngày tốt lành. " trong nhiệt độ. concat[] phương thức chức năng sẽ nối tất cả các chuỗi và trả về một chuỗi mới - thông báo là "Chào buổi sáng, chúc một ngày tốt lành. "
let temp = "Good Morning";
let message = temp.concat[", ", "Have a nice day!"];
console.log[message];
đầu ra
Thông báo chuỗi kết quả sau khi nối được hiển thị dưới dạng đầu ra
Good Morning, Have a nice day!
Sử dụng JavaScript, chúng ta cũng có thể nối các phần tử của một mảng vào cuối chuỗi. Trong ví dụ này, chúng ta đang cố nối các phần tử của một mảng - các màu vào cuối một chuỗi trống bằng cách sử dụng toán tử trải rộng trong JavaScript [. colors] giải nén tất cả các mục của mảng dưới dạng tham số bên trong phương thức concat[]

  

let colors = ['Red',' ','Green',' ','Blue'];
let result = ''.concat[...colors]; //spread operator used
console.log[result];
đầu ra
Sau khi nối các mục chuỗi mảng vào cuối chuỗi trống, chúng tôi sẽ in thông báo kết quả dưới dạng đầu ra
Như đã thảo luận trước đó, chúng ta cũng có thể truyền các đối số không phải chuỗi bên trong hàm concat[] được chuyển đổi và coi là tham số chuỗi. Trong ví dụ JavaScript này, chúng ta đã truyền các hằng số nguyên - 1,2,3 và một tham số chuỗi bên trong phương thức concat[] sẽ được nối và chuỗi trả về sẽ được lưu trữ dưới dạng biến str
let str = ''.concat[1,2,3," Hello, testing non-string arguments!"];
console.log[str];
đầu ra
Sau khi chuyển đổi các hằng số nguyên thành tham số chuỗi và cuối cùng là phép nối, chúng tôi đã in kết quả của biến str làm đầu ra
________số 8
Ví dụ 4. [LoạiLỗi]
Trong ví dụ này, chúng tôi đã lấy biến str dưới dạng không phải chuỗi [số nguyên] và chúng tôi đang cố nối chuỗi "Xin chào" vào cuối biến không phải chuỗi đó str. Điều này rõ ràng vi phạm các quy tắc và do đó, sẽ tạo TypeError trong cửa sổ bảng điều khiển đầu ra

Ghi chú. biến str phải là kiểu chuỗi để sử dụng concat[]

let str = 10;
let ans = str.concat["Hello"];
console.log[ans];
đầu ra
Thông báo TypeError được tạo trong cửa sổ bảng điều khiển đầu ra cho biết rằng Số nguyên. hàm concat[] không tồn tại
   
      JavaScript String concat[] Method
   
   
      
            
   

0

Toán tử '+' có cùng chức năng giống như chúng ta sử dụng nó để cộng hai số, chúng ta cũng có thể thêm hai hoặc nhiều chuỗi trong JavaScript bằng cách sử dụng nó. Chúng ta có thể tạo một chuỗi mới bằng toán tử '+' hoặc chúng ta có thể sử dụng một chuỗi hiện có bằng cách nối vào cuối chuỗi đó, sử dụng toán tử '+='

Hãy hiểu khái niệm này bằng cách sử dụng một số mã ví dụ

Trong ví dụ JavaScript này, chúng tôi đang sử dụng toán tử '+' để nối các chuỗi một cách đơn giản. Chúng tôi đã khởi tạo ba chuỗi khi bắt đầu và sau đó sử dụng toán tử '+', chúng tôi đã nối chúng ở cuối chuỗi - "I am avilable on " và lưu trữ chuỗi mới được tạo trong biến kết quả

ví dụ 1

   
      JavaScript String concat[] Method
   
   
      
            
   

đầu ra

Giá trị của biến kết quả được in dưới dạng đầu ra cho biết trường hợp sử dụng của toán tử '+'

   
      JavaScript String concat[] Method
   
   
      
            
   

ví dụ 2

Trong ví dụ này, chúng tôi đã khởi tạo bốn chuỗi khi bắt đầu, sau đó sử dụng toán tử '+=', chúng tôi sẽ nối thêm các chuỗi - instagram, twitter và facebook vào cuối chuỗi kết quả và chuỗi kết quả cuối cùng sẽ lại được lưu trữ trong . Điều này rất hữu ích trong trường hợp nếu chúng ta cần thêm thứ gì đó vào chuỗi kết quả ở giai đoạn sau, thì chúng ta không phải viết đi viết lại & chúng ta chỉ cần sử dụng toán tử '+=' để thêm vào kết quả đã được khai báo

let temp = "Good Morning";
let message = temp.concat[", ", "Have a nice day!"];
console.log[message];
0
đầu ra
   
      JavaScript String concat[] Method
   
   
      
            
   

2
ví dụ 3
Trong khi sử dụng phương thức hàm concat[], biến bắt đầu [ở cuối mà chúng ta đang nối] phải là kiểu chuỗi để nối tiếp nhưng nếu chúng ta sử dụng toán tử '+' hoặc '+=', thì chúng ta có thể nối ở cuối 
let temp = "Good Morning";
let message = temp.concat[", ", "Have a nice day!"];
console.log[message];
2
đầu ra

  

let temp = "Good Morning";
let message = temp.concat[", ", "Have a nice day!"];
console.log[message];
3

Phương thức join[] của JavaScript được sử dụng để nối tất cả các phần tử có trong một mảng bằng cách chuyển đổi chúng thành một chuỗi duy nhất. Các phần tử này được phân tách bằng dấu phân cách mặc định i. e. dấu phẩy[,] nhưng chúng tôi có thể linh hoạt cung cấp dấu tách tùy chỉnh của riêng mình làm đối số bên trong hàm join[]. Một điều cần lưu ý là phương thức hàm join[] này không ảnh hưởng đến mảng ban đầu. Giả sử nếu chúng ta cần nối bất kỳ chuỗi hoặc đối tượng mới nào, chúng ta có thể đẩy chuỗi đó vào mảng đã khai báo rồi sử dụng lại phương thức join[]

Cú pháp sử dụng phương thức Join[]

Ở đây, dấu phân cách có thể do người dùng tùy chỉnh và theo mặc định, nếu không được chỉ định, nó sẽ sử dụng dấu phẩy [,] làm dấu phân cách. Do đó, chúng ta biết rằng tham số dấu tách là tùy chọn để bao gồm

Hãy hiểu khái niệm này bằng cách sử dụng một số mã ví dụ

ví dụ 1

Trong ví dụ JavaScript này, chúng tôi đã khởi tạo một mảng bao gồm một số giá trị chuỗi. Sau đó, chúng tôi đã sử dụng mảng. phương thức chức năng join[] cùng với dấu phân cách tùy chỉnh - [", "] dấu phẩy cùng với dấu cách. Điều này sẽ kết hợp tất cả các giá trị chuỗi của mảng được phân tách bằng dấu phẩy và dấu cách & chuỗi mới được tạo sẽ được lưu trữ trong biến final_str

let temp = "Good Morning";
let message = temp.concat[", ", "Have a nice day!"];
console.log[message];
4
đầu ra. Chuỗi mới được trả về sau khi sử dụng phương thức nối [] sẽ được hiển thị trong bảng điều khiển đầu ra nơi các mục mảng được phân tách bằng dấu phẩy và dấu cách
let temp = "Good Morning";
let message = temp.concat[", ", "Have a nice day!"];
console.log[message];
5
ví dụ 2
Sửa đổi ví dụ trên, trong trường hợp nếu chúng ta muốn nối một giá trị chuỗi khác ở giai đoạn sau, thì chúng ta chỉ cần đẩy nó vào mảng và sử dụng lại phương thức join[]
let temp = "Good Morning";
let message = temp.concat[", ", "Have a nice day!"];
console.log[message];
6
đầu ra. Đẩy chuỗi - "template literals" vào mảng ban đầu và sau đó sử dụng phương thức join[] sẽ hiển thị kết quả giống như trong Ví dụ 1 ở trên
let temp = "Good Morning";
let message = temp.concat[", ", "Have a nice day!"];
console.log[message];
5

Trước khi thực sự hiểu khái niệm về Văn bản mẫu, hãy để tôi lưu ý bạn về lỗi phổ biến mà tất cả chúng ta đều gặp phải khi nối các chuỗi i. e. vấn đề thiếu khoảng trống khi nối chuỗi

Ví dụ

let temp = "Good Morning";
let message = temp.concat[", ", "Have a nice day!"];
console.log[message];
8
đầu ra. Trong ví dụ trên, chúng tôi chưa đặt khoảng trắng cần thiết giữa một số từ để phân tách chúng. Kết quả là, đầu ra của chúng ta sẽ trông lộn xộn và không như ý muốn
let temp = "Good Morning";
let message = temp.concat[", ", "Have a nice day!"];
console.log[message];
9
Khái niệm chuỗi ký tự giúp chúng ta giải quyết vấn đề trên. Chữ mẫu là chữ chuỗi cho phép sử dụng các biểu thức được nhúng trong chuỗi được trích dẫn với sự trợ giúp của dấu kiểm ngược. Sử dụng các mẫu chữ này, chúng ta cũng có thể sử dụng các chuỗi nhiều dòng
Cú pháp để sử dụng chữ mẫu
Good Morning, Have a nice day!
0
Ở đây, với sự trợ giúp của $ và dấu ngoặc nhọn, chúng ta có thể nhúng một biến vào chuỗi được trích dẫn dưới dấu kiểm ngược, biểu thị nối chuỗi. ]
Hãy thảo luận về khái niệm này bằng mã ví dụ
ví dụ 1
Trong ví dụ JavaScript này, chúng tôi đã khởi tạo ba biến chuỗi ngay từ đầu và sau đó với khái niệm về mẫu chữ, chúng tôi đã nhúng str1, str2 và str3 vào chuỗi - final_str được trích dẫn dưới dấu tích ngược. Bằng cách này, chúng ta có thể viết chính xác cách chúng ta muốn chuỗi của mình xuất hiện dưới dạng đầu ra và đồng thời, việc phát hiện các khoảng trắng bị thiếu giữa các từ cũng trở nên dễ dàng.
Good Morning, Have a nice day!
1
đầu ra

  

Good Morning, Have a nice day!
2

Thoát ký tự trong chuỗi

Khi chúng tôi sử dụng các ký tự đặc biệt trong chuỗi của mình, chúng tôi cần thoát chúng trong khi nối để tránh các lỗi không cần thiết

Hãy hiểu tình huống này bằng cách trải qua các tình huống khác nhau

1. Thoát khỏi dấu nháy đơn [' ']

Trong JavaScript, chúng ta có thể sử dụng cả dấu ngoặc đơn và dấu ngoặc kép khi khởi tạo chuỗi. Nhưng đôi khi, chúng ta cần sử dụng dấu nháy đơn trong chuỗi ký tự [Ví dụ. Tôi đang viết] và trong trường hợp này, chúng ta phải khởi tạo chuỗi của mình bằng dấu ngoặc kép để tránh nhầm lẫn cho trình biên dịch khi diễn giải

Thí dụ

Ở đây, chúng tôi đã khởi tạo chuỗi kết quả bằng dấu nháy đơn và cũng trong chuỗi ký tự, chúng tôi có dấu nháy đơn [I'm]. Điều này sẽ dẫn đến lỗi cú pháp trong thời gian chạy

Good Morning, Have a nice day!
3
đầu ra
Good Morning, Have a nice day!
4
Để giải quyết vấn đề trên trong mã JavaScript, chúng ta có thể đã khởi tạo Dòng 2 trong dấu ngoặc kép như
Good Morning, Have a nice day!
5
Cách tiếp cận khác. [Sử dụng dấu gạch chéo ngược]
Chúng tôi cũng có thể sử dụng toán tử dấu gạch chéo ngược để thoát khỏi các ký tự trích dẫn đơn. Điều này sẽ tạo ra cùng một đầu ra mong muốn nhưng chúng tôi không muốn sử dụng nó, do các vấn đề về khả năng đọc
Good Morning, Have a nice day!
6
đầu ra
2. Thoát khỏi dấu ngoặc kép [""]
Tương tự như thoát dấu ngoặc đơn, chúng ta có thể sử dụng một kỹ thuật tương tự để thoát dấu ngoặc kép. Lần này, chúng ta sẽ khởi tạo chuỗi của mình bằng dấu nháy đơn để phân biệt với chuỗi ký tự bên trong, có dấu nháy kép
Thí dụ
Good Morning, Have a nice day!
7
đầu ra. Đầu ra sẽ hiển thị "Mayank" dưới dạng một từ chuỗi trong dấu ngoặc kép. Ngoài ra, chúng ta có thể sử dụng khái niệm Dấu gạch chéo ngược mà chúng ta đã thấy ở trên như một giải pháp thay thế tại đây. ]
3. Thoát khỏi bọ ve [` `]
Vì chúng tôi sử dụng dấu kiểm ngược để xác định chữ mẫu, bạn có bao giờ tự hỏi điều gì sẽ xảy ra nếu chúng tôi muốn sử dụng dấu kiểm ngược làm ký hiệu trong chuỗi của mình không? 
Hãy làm rõ điều này bằng cách xem một ví dụ
Thí dụ
Trong ví dụ này, chúng tôi đã sử dụng toán tử dấu gạch chéo ngược để hiển thị dấu ngoặc kép mạnh "Chào buổi sáng" trong dấu gạch ngược trên cửa sổ bảng điều khiển đầu ra
Good Morning, Have a nice day!
8
đầu ra

Trình duyệt được hỗ trợ

Nếu chúng ta nói về hỗ trợ trình duyệt thì các phương thức toán tử join[], concat[] và '+' để nối chuỗi trong JavaScript được hỗ trợ bởi tất cả các trình duyệt hiện đại trong khi phương thức nối chuỗi Mẫu chữ không được Internet Explorer hỗ trợ. Các phương pháp này hoạt động khác nhau trên các trình duyệt khác nhau và người ta nên chọn nó tùy thuộc vào yêu cầu và mục đích

Ví dụ. Trong khi sử dụng trình duyệt Google Chrome, chuỗi nối thêm bình thường nhanh hơn phương thức nối mảng [] nhưng trong khi sử dụng trình duyệt Firefox thì ngược lại

Làm cách nào để nối chuỗi bằng JavaScript?

Bạn có thể += một chuỗi trong JavaScript không?

Toán tử nối chuỗi JavaScript là gì?

Làm cách nào để nối hai chuỗi có dấu cách trong JavaScript?