Nối Chuỗi Trong JavaScript (concat, Toán Tử Cộng)
Có thể bạn quan tâm
Hướng dẫn cách nối chuỗi trong JavaScript, hay còn gọi là cộng chuỗi trong JavaScript. Bạn sẽ học được cách sử dụng phương thức concat() cũng như toán tử cộng để nối chuỗi trong JavaScript sau bài học này.
Chúng ta có 3 phương pháp để nối chuỗi trong JavScript như sau:
- Phương thức concat(): nối các chuỗi chỉ định vào chuỗi ban đầu và tạo ra chuỗi mới
- Toán tử cộng : cộng chuỗi trong JavaScript
- Toán tử cộng : nối số vào chuỗi và thu về một chuỗi mới
Trong đó khi sử dụng toán tử cộng + để nối chuỗi trong JavaScript, chúng ta cần phải chú ý tới thứ tự thực hiện phép cộng để thu về kết quả nối chuỗi theo ý muốn.
Hãy cùng làm rõ các điều này ở phần sau đây.
Nối chuỗi trong JavaScript | Phương thức concat()
Chúng ta sử dụng phương thức concat() trong JavaScript để nối một hoặc một loạt các chuỗi chỉ định vào chuỗi ban đầu và tạo ra một chuỗi mới. Lưu ý là phương thức concat() sẽ tạo ra chuỗi mới và không làm thay đổi chuỗi ban đầu.
Cú pháp sử dụng phương thức concat() như sau:
string.concat(string1, string2, ...);
Trong đó string là chuỗi ban đầu, và các chuỗi string chỉ định làm đối số trong phương thức concat() sê được dùng để nối vào chuỗi ban đầu để tạo ra một chuỗi mới.
Ví dụ cụ thể:
console.log('Anh'.concat(' ','Yêu',' ','Em'));//> Anh Yêu Em |
Chúng ta cũng có thể gán chuỗi vào một biến, trước khi tiến hành nối chuỗi đó bằng concat() như sau:
let str = 'Anh';let str1 = ' ';let str2 = 'Yêu Em';console.log(str.concat(str1, str2));//> Anh Yêu Em |
Cần nhắc lại là phương thức concat() sẽ không làm thay đổi chuỗi ban đầu, mà là copy chuỗi ban đầu, rồi nối với các chuỗi được chỉ định và tạo ra chuỗi mới. Chúng ta có thể kiểm chứng giá trị trước và sau khi sử dụng phương thức concat() của chuỗi ban đầu là không đổi như sau:
let men = 'Anh';console.log(men);//> Anhlet love = men.concat(' ','Yêu',' ','Em');console.log(love);//> Anh Yêu Emconsole.log(men);//> Anh |
Kết quả của chuỗi concat() cũng giống như một người đàn ông trước và sau khi yêu thì bản thân anh ta cũng không hề thay đổi vậy.
Do đó nếu bạn muốn sử dụng lại kết quả của phương thức concat() trong JavaScript, hãy nhớ gán kết quả đó vào một biến để tái sử dụng sau này nhé.
Nối chuỗi trong JavaScript | toán tử cộng
Một phương pháp khác để nối chuỗi trong JavaScript, đó chính là sử dụng toán tử cộng +.
Đúng như tên gọi của toán tử thì chúng ta sẽ dùng phép cộng để cộng chuỗi trong JavaScript và tạo ra một chuỗi mới. Toán tử cộng cũng sẽ không làm thay đổi chuỗi ban đầu.
Ví dụ cụ thể:
let tp = 'Hà Nội';let love = tp + ' mùa' +' thu' ;console.log(love);//> Hà Nội mùa thu |
Lại nữa, mặc dù toán tử cộng không làm thay đổi chuỗi ban đầu, nhưng nếu chúng ta cộng chuỗi trong JavaScript kết hợp với toán tử gán nữa, thì chuỗi ban đầu cũng sẽ bị thay đổi như ví dụ sau:
let tp = 'Hà Nội';console.log(tp);//> Hà Nộitp += ' mùa' +' thu' ;console.log(tp);//> Hà Nội mùa thu |
Nối số vào chuỗi và thu về một chuỗi bằng toán tử cộng
Khi chúng ta nối chuỗi với số trong JavaScript bằng toán tử cộng, mặc dù kiểu dữ liệu dùng để nối chuỗi là khác nhau nhưng kiểu dữ liệu của kết quả sẽ luôn ở dạng string.
Do đó khi chúng ta nối chuỗi với số thì sẽ thu về một chuỗi mới như ví dụ sau:
let num = 50;console.log( typeof num ); //numberlet str = ' ngàn đồng';console.log( typeof str ); //stringlet result = num + str;console.log(result); //50 ngàn đồngconsole.log( typeof result ); //string |
Điều này rất khác biệt so với các ngôn ngữ khác như Python chẳn hạn. Các ngôn ngữ này vốn không cho phép nối các phần tử thuộc kiểu dữ liệu khác nhau với nhau mà sẽ trả về lỗi, và nếu bạn muốn nối chúng lại thì cần phải chuyển kiểu dữ liệu của chúng về cùng một dạng rồi mới bắt đầu nối được.
Tuy nhiên trong JavaScript thì chuyện này được chấp nhận và kết quả của phép nối chuỗi với số sẽ là một chuỗi mới.
Lưu ý thứ tự thực hiện phép cộng khi nối chuỗi trong JavaScript
Trong JavaScript thì phép cộng sẽ được thực hiện từ trái qua phải. Do đó nếu có nhiều đối tượng phía trước toán tử cộng thì chúng sẽ được cộng lần lượt từ trái qua phải giống như ví dụ sau đây:
let price = 100 + 50 + " ngàn đồng";console.log(price);//> 150 ngàn đồng |
Trong ví dụ trên, phép 100 + 50 sẽ được thực hiện trước, sau đó mới thực hiện phép nối kết quả là số 150 với chuỗi " ngàn đồng", và trả về một chuỗi mới là 150 ngàn đồng.
Tuy nhiên trong ví dụ sau đây thì lại hoàn toàn khác:
let price = "Giá "+ 100 + 50 + " ngàn đồng";console.log(price); |
Nếu không nắm chắc thứ tự trong phép cộng chuỗi, có thể bạn sẽ dự đoán kết quả của phép toán ở trên sẽ là Giá 150 ngàn đồng phải không nào?
Tuy nhiên điều đó là hoàn toàn sai. Với ví dụ này thì phép cộng chuỗi sẽ được thực hiện lần lượt như sau:
- Cộng chuỗi với số và trả về một chuỗi "Giá "+ 100 = "Giá 100".
- Cộng chuối với số và trả về một chuỗi "Giá 100" + 50 = "Giá 10050".
- Nối chuỗi với chuỗi "Giá 10050" +" ngàn đồng và trả về một chuỗi mới.
Kết quả cuối cùng:
Giá 10050 ngàn đồng |
BOOM! Thật bất ngờ phải không nào? Tuy nhiên đó là logic mà JavaScrip thực hiện, mà Kiyoshi mong bạn sẽ nắm chắc nó để không xảy ra các lỗi trong chương trình của mình.
Tổng kết
Trên đây Kiyoshi đã hướng dẫn bạn cách nối chuỗi trong JavaScript rồi. Để nắm rõ nội dung bài học hơn, bạn hãy thực hành viết lại các ví dụ của ngày hôm nay nhé.
Và hãy cùng tìm hiểu những kiến thức sâu hơn về JavaScript trong các bài học tiếp theo.
URL Link
https://laptrinhcanban.com/javascript/javascript-co-ban-den-nang-cao/chuoi-trong-javascript/noi-chuoi-trong-javascript/
Từ khóa » Chuỗi Trong Javascript
-
Thao Tác Với String Trong JavaScript - NIIT - ICT Hà Nội
-
Nối Chuỗi Trong Javascript | Tự Học Javascript Cơ Bản
-
Các Hàm Xử Lý Chuỗi Trong Javascript
-
Cách Xử Lý Chuỗi Trong Javascript - Freetuts
-
Các Hàm Xử Lý Chuỗi Trong Javascript (cắt / Tách / Nối Chuỗi ..)
-
Xử Lý Chuỗi Trong JavaScript - Viblo
-
Chuỗi (String) Trong JavaScript - VietTuts
-
Các Hàm Xử Lý Chuỗi Trong JavaScript - Web Cơ Bản
-
Các Phương Thức Xử Lý Chuỗi Trong JavaScript - Web Cơ Bản
-
Làm Việc Với String Trong Javascript
-
Độ Dài Chuỗi Trong JavaScript
-
Xử Lý Chuỗi Trong Javascript - Thầy Long Web
-
Cách Xử Lý Chuỗi Trong Javascript - Freetuts
-
Nối Chuỗi Trong Javascript - JavaScript Cơ Bản - Vi