Cách dùng toán tử += trong JavaScript

Toán tử JavaScript += cộng hai giá trị và gán kết quả cho biến. Toán tử này gọi là addition assignment operator (toán tử gán cộng). Tiện lợi hơn cú pháp biến = X + Y thông thường.

Dấu cộng và dấu bằng cạnh nhau? Đó là lỗi chính tả? Trong JavaScript, dấu cộng và dấu bằng cạnh nhau có ý nghĩa riêng. Đó là toán tử gán cộng JavaScript.

Trong tutorial này, ta sẽ nói về toán tử JavaScript += là gì và cách hoạt động. Sẽ đi qua ví dụ toán tử này hoạt động để bạn học cách dùng.

Toán tử JavaScript += là gì?

Toán tử JavaScript += cộng giá trị bên phải toán tử vào biến bên trái. Kết quả sau đó gán cho biến bên trái. Toán tử này gọi là addition assignment operator.

Xem cú pháp toán tử này:

let welcome = "Hello there, ";
console.log(welcome += "Sophie.");

Khai báo biến JavaScript "welcome" giá trị "Hello there, ". Sau đó thêm "Sophie." vào giá trị này. Toán tử gán cộng cộng hai giá trị và gán kết quả cho biến "welcome".

Code trả về:

Hello there, Sophie.

Toán tử này có hai dùng: cộng hai số, và nối hai chuỗi.

Toán tử gán là cách nói khác của:

x = x + y

Toán tử gán cộng làm code dễ đọc hơn. Dấu += rõ ràng hơn viết "biến = x + y" để cộng hai giá trị và gán kết quả cho biến.

Thường thấy addition assignment operator trong vòng lặp với bộ đếm (counter) theo dõi số lần lặp thực thi.

JavaScript += Operator: Cộng số

Toán tử gán cộng cho phép cộng hai số. Tạo chương trình đếm "The Count of Monte Cristo" xuất hiện bao nhiêu lần trong danh sách. Danh sách chứa kết quả bình chọn "Sách của năm" câu lạc bộ đọc sách.

Bắt đầu định nghĩa mảng JavaScript chứa tên sách. Cũng khai báo biến theo dõi số lần sách tìm kiếm xuất hiện:

var books = ["The Count of Monte Cristo", "All My Sons", "Of Mice and Men", "The Count of Monte Cristo", "To Have and Have Not"];
var count = 0;

Tiếp theo, viết vòng lặp for JavaScript lặp qua danh sách và đếm số lần "The Count of Monte Cristo" xuất hiện:

for (b in books) {
  if (books[b] === "The Count of Monte Cristo") {
    count += 1
  }
}
console.log(`The Count of Monte Cristo was voted Book of the Year ${count} times.`);

Vòng lặp for lặp qua danh sách "books". Mỗi sách, chương trình kiểm tra title có bằng "The Count of Monte Cristo" không. Nếu có, dùng addition assignment operator tăng giá trị "count" lên 1. Ngược lại, không làm gì.

Sau khi lặp xong, chương trình in số lần sách xuất hiện. Chạy code:

The Count of Monte Cristo was voted Book of the Year 2 times.

Code đã đếm số lần sách xuất hiện trong danh sách.

+= Operator JavaScript: Nối chuỗi (Strings)

Toán tử JavaScript += có thể gộp hai chuỗi lại. Toán tử này tiện hơn cú pháp dài "biến = x + y".

Ví dụ: có tên và họ người dùng trong hai chuỗi. Có thể dùng += gộp hai giá trị thành một chuỗi.

Tạo chương trình kiểm tra bánh nào bắt đầu bằng "B" trong danh sách. Nếu bánh bắt đầu "B", thêm vào chuỗi mới. Ngược lại, không làm gì.

Bắt đầu định nghĩa danh sách và chuỗi:

var cakes = ["Babka", "Raspberry Ganache", "Strawberry Cheesecake", "Baked Alaska"];
var start_with_b = "| ";

Biến "start_with_b" sẽ chứa tất cả bánh bắt đầu "B". Ban đầu giá trị "| ".

Tạo vòng lặp for duyệt qua từng bánh kiểm tra bắt đầu "B":

for (cake in cakes) {
  if (cakes[cake].startsWith("B")) {
    var message = cakes[cake] + " | ";
    start_with_b += message
  }
}
console.log(start_with_b);

Dùng phương thức JavaScript startsWith() kiểm tra mỗi bánh trong danh sách bắt đầu "B".

Nếu bánh bắt đầu "B", câu lệnh if chạy. Bên trong if khai báo biến "message". Thêm " | " vào cuối tên bánh. Làm vậy để chúng xuất hiện riêng biệt trong chuỗi.

Tiếp theo, dùng toán tử gán cộng thêm nội dung "message" vào cuối biến "start_with_b".

Chạy code:

| Babka | Baked Alaska |

Code trả về danh sách tất cả bánh bắt đầu "B".

Cách thay thế nối hai chuỗi là dùng toán tử nối (concatenation operator) hoặc phương thức concat(). Để học thêm, xem hướng dẫn nối chuỗi JavaScript.

Kết luận

Toán tử gán cộng (+=) cộng giá trị vào giá trị khác và gán kết quả cho biến. Thường dùng thêm giá trị vào cuối chuỗi hoặc cộng giá trị số.

Muốn học thêm JavaScript? Xem hướng dẫn hoàn chỉnh How to Learn JavaScript cho mẹo học chuyên gia và hướng dẫn sách, khóa học online top.