Qua bài viết trước đó, bạn đã nắm bắt được khái niệm về toán tử và những loại toán tử hữu ích trong ngôn ngữ lập trình JavaScript. Bây giờ, chúng ta sẽ chuyển sang một chủ đề mới, đó là toán tử so sánh trong JavaScript.
Chủ đề chính của bài viết này sẽ tập trung vào việc hiểu rõ về toán tử so sánh, các loại toán tử so sánh sẵn có trong JavaScript, cũng như kết quả mà chúng trả về. Bên cạnh đó, chúng ta sẽ đề cập đến một số tình huống đặc biệt có thể khiến người lập trình gặp khó khăn khi thực hiện các phép so sánh.
Toán tử So sánh là gì?
Toán tử so sánh là một dạng toán tử hai ngôi được sử dụng để so sánh giá trị của hai toán hạng.
Trong JavaScript, có nhiều loại toán tử so sánh, chẳng hạn như:
- Toán tử so sánh lớn hơn (>), và toán tử so sánh nhỏ hơn (<).
- Toán tử so sánh lớn hơn hoặc bằng (>=) và toán tử so sánh nhỏ hơn hoặc bằng (<=).
- Toán tử so sánh bằng “không nghiêm ngặt” (==) và toán tử so sánh bằng “nghiêm ngặt” (===).
- Toán tử so sánh khác “không nghiêm ngặt” (!=) và toán tử so sánh khác “nghiêm ngặt” (!==).
Chú ý:
Toán tử so sánh bằng có thể sử dụng hai hoặc ba dấu bằng.
Hãy nhớ để tránh nhầm lẫn với toán tử gán, chỉ sử dụng một dấu bằng (=).
Ví dụ về các phép toán so sánh:
let x = 10; let y = 5; x > y; // so sánh lớn hơn x < y; // so sánh nhỏ hơn x >= y; // so sánh lớn hơn hoặc bằng x <= y; // so sánh nhỏ hơn hoặc bằng x == y; // so sánh bằng không nghiêm ngặt x === y; // so sánh bằng nghiêm ngặt x != y; // so sánh khác không nghiêm ngặt x !== y; // so sánh khác nghiêm ngặt
Kết quả của phép so sánh:
Mọi kết quả của phép so sánh đều trả về một giá trị kiểu boolean.
true: đúng, chính xácfalse: sai, không chính xác
Ví dụ:
console.log(10 > 5); // true (đúng) console.log(10 < 5); // false (sai) console.log(10 >= 5); // true (đúng) console.log(10 <= 5); // false (sai) console.log(10 == 5); // false (sai) console.log(10 === 5); // false (sai) console.log(10 != 5); // true (đúng) console.log(10 !== 5); // true (đúng)
Bạn cũng có thể gán kết quả của phép so sánh cho một biến khác:
let result = 10 > 5; console.log(result); // true (đúng)
Chúc bạn hiểu rõ hơn về toán tử so sánh trong JavaScript thông qua các ví dụ và giải thích trên!
So Sánh Chuỗi
Quy tắc so sánh chuỗi trong ngôn ngữ JavaScript tương tự như trong hầu hết các ngôn ngữ lập trình khác, tức là theo thứ tự từ điển. Đơn giản là so sánh từng ký tự một (từ trái sang phải).
Dưới đây là ví dụ về so sánh chuỗi:
console.log("Apple" < "Banana"); // true
console.log("Hello" < "Hella"); // false
console.log("Open" < "OpenAI"); // trueThuật toán so sánh chuỗi được mô tả như sau:
- So sánh ký tự đầu tiên của hai chuỗi.
- Nếu ký tự đầu tiên của chuỗi(1) lớn hơn (hoặc nhỏ hơn) ký tự đầu tiên của chuỗi(2), thì chuỗi(1) lớn hơn (hoặc nhỏ hơn) chuỗi(2). Do đó, quá trình so sánh kết thúc.
- Nếu hai ký tự đầu tiên bằng nhau, tiếp tục so sánh đến các ký tự thứ hai.
- Lặp lại quá trình so sánh trên cho đến khi kết thúc so sánh hoặc đã so sánh hết tất cả các ký tự của ít nhất một chuỗi.
Nếu hai chuỗi có cùng độ dài, chúng bằng nhau. Ngược lại, chuỗi nào dài hơn thì chuỗi đó lớn hơn.
Trong ví dụ so sánh “Apple” < “Banana”, kết quả là true, vì quá trình so sánh dừng lại ở bước một.
Trong ví dụ so sánh “Hello” < “Hella”, kết quả là false do quá trình so sánh lặp lại nhiều lần:
- Ký tự đầu tiên “H” giống nhau.
- Ký tự thứ hai “e” giống nhau.
- Ký tự thứ ba “l” cũng giống nhau.
- Ký tự thứ tư “l” cũng giống nhau.
- Ký tự thứ năm “o” lớn hơn “a”. Do đó, chuỗi “Hello” lớn hơn chuỗi “Hella”.
Trong ví dụ so sánh “Open” < “OpenAI”, kết quả là true vì quá trình so sánh cùng lặp lại nhiều lần:
- Bốn ký tự đầu tiên của cả hai chuỗi là “Open” giống nhau.
- Lúc này, chuỗi “Open” kết thúc.
- Trong khi đó, chuỗi “OpenAI” còn thêm các ký tự “AI” (độ dài chuỗi lớn hơn). Do đó, chuỗi “Open” nhỏ hơn chuỗi “OpenAI”.
So Sánh Giữa Các Kiểu Dữ Liệu
Khi tiến hành so sánh giữa các toán hạng khác kiểu dữ liệu, JavaScript tự động chuyển đổi giá trị của chúng sang dạng số, như minh họa sau:
console.log("7" > 5); // true, vì "7" chuyển thành 7
console.log("02" == 2); // true, vì "02" chuyển thành 2
console.log("15" == 15); // false, vì "15" chuyển thành 15Đối với kiểu dữ liệu boolean, true sẽ được chuyển thành 1 và false chuyển thành 0.
console.log(true == 1); // true console.log(false == 0); // false
Tuy nhiên, sử dụng toán tử so sánh “không nghiêm ngặt” (==) có thể dẫn đến những kết quả “lạ lùng,” như ví dụ sau:
console.log("" == 0); // true
console.log("9" == 9); // true
console.log("" == "9"); // falseCó vẻ khá bất thường, đúng không? Nếu ta áp dụng nguyên tắc “bắc cầu” trong toán học, thì nếu “” == 0 là true và “9” == 9 là true, suy ra “” == “9” cũng nên là true (vì cùng bằng 0). Tuy nhiên, thực tế lại không như vậy.
Hai phép so sánh đầu tiên là so sánh giữa các kiểu dữ liệu khác nhau, nên “” và “9” đều được chuyển đổi thành dạng số và bằng 0.
Trong khi phép so sánh thứ ba là so sánh giữa cùng một kiểu dữ liệu, không có quá trình chuyển đổi dữ liệu xảy ra. Do đó, kết quả của phép so sánh cuối cùng là false.
Để khắc phục vấn đề này, JavaScript đưa ra toán tử so sánh “nghiêm ngặt” (===), giữ nguyên cả kiểu dữ liệu trong quá trình so sánh.
So Sánh Bằng Nghiêm Ngặt
Trong ngữ cảnh của toán tử so sánh bằng “nghiêm ngặt,” JavaScript không thực hiện bất kỳ chuyển đổi kiểu dữ liệu nào.
Nói một cách khác, nếu hai giá trị có kiểu dữ liệu khác nhau, chúng luôn luôn được coi là khác nhau, như minh họa dưới đây:
// So sánh bằng không nghiêm ngặt
console.log("" == 0); // true
// So sánh bằng nghiêm ngặt
console.log("" === 0); // falseTương tự như toán tử so sánh bằng nghiêm ngặt, JavaScript cũng cung cấp toán tử so sánh khác nghiêm ngặt, như được minh họa dưới đây:
// So sánh khác không nghiêm ngặt
console.log("" != 0); // false
// So sánh khác nghiêm ngặt
console.log("" !== 0); // true💡 Để tránh những lỗi không đáng có khi thực hiện so sánh trong JavaScript, nên ưu tiên sử dụng toán tử so sánh bằng “nghiêm ngặt” === và toán tử so sánh khác “nghiêm ngặt” !==. Điều này giúp đảm bảo rằng cả giá trị và kiểu dữ liệu đều giống nhau trong quá trình so sánh.
So Sánh với null và undefined
So với nhiều kiểu dữ liệu khác, quá trình so sánh giữa null và undefined thường mang đến những kết quả không rõ ràng.
Khi sử dụng toán tử so sánh bằng “nghiêm ngặt” ===, hiển nhiên là hai giá trị này sẽ khác nhau vì chúng thuộc các kiểu dữ liệu khác nhau.
console.log(null === undefined); // false
Tuy nhiên, khi sử dụng toán tử so sánh bằng “không nghiêm ngặt” ==, kết quả lại là true.
console.log(null == undefined); // true
Thực tế, JavaScript xác định null và undefined là bằng nhau (với toán tử ==) nhưng không bằng (==) bất kỳ giá trị khác.
Khi áp dụng các toán tử so sánh >, <, >= và <=, có những điều thú vị xảy ra.
Cả hai giá trị này sẽ được chuyển đổi sang dạng số, với null chuyển thành 0 và undefined chuyển thành NaN.
console.log(null > undefined); // false console.log(null < undefined); // false console.log(null >= undefined); // false console.log(null <= undefined); // false
Bây giờ, hãy so sánh hai giá trị này với số 0 để thấy điều kỳ lạ.
So sánh null với 0
console.log(null > 0); // false console.log(null >= 0); // true console.log(null == 0); // false
Trong các phép so sánh, null chuyển thành số 0, cho nên ta có kết quả lần lượt là false, true, và false. Điều này lại tạo nên một hiện tượng “phi logic” vì theo kết quả trên, null lớn hơn hoặc bằng 0, nhưng lại không bằng 0.
So sánh undefined với 0
console.log(undefined > 0); // false console.log(undefined >= 0); // false console.log(undefined == 0); // false
Kết quả cho cả ba phép so sánh đều là false.
Để tránh tình huống “phi logic” này, nên sử dụng toán tử so sánh bằng “nghiêm ngặt” (===) hoặc toán tử so sánh khác “nghiêm ngặt” (!==).
Không nên sử dụng toán tử >, <, >= và <= với null và undefined.
Khi biến có thể là null hoặc undefined, nên kiểm tra giá trị có bằng null hoặc undefined trước khi thực hiện so sánh với các toán tử >, <, >= và <=.
Thứ Tự Ưu Tiên Của Các Toán Tử So Sánh
Các toán tử so sánh tuân theo một thứ tự ưu tiên giống nhau. Trong biểu thức chứa nhiều toán tử so sánh, quá trình thực hiện diễn ra từ trái sang phải.
Ví dụ:
console.log(3 > 2 > 1); // false
Ban đầu, có vẻ kết quả trên là không logic, phải không?
Theo quy tắc toán học, chắc chắn rằng 3 lớn hơn 2 và 2 lớn hơn 1, do đó kết quả (2) phải là true.
Tuy nhiên, nếu bạn áp dụng thứ tự ưu tiên đúng, kết quả trên hoàn toàn hợp lý.
Vì JavaScript sẽ thực hiện so sánh hai số đầu tiên trước, 3 > 2 là true, do đó kết quả của phép so sánh này là true. Khi đó, bạn có thể viết lại như sau:
console.log(true > 1); // false
Rõ ràng, đây là phép so sánh giữa hai kiểu dữ liệu khác nhau. Do đó, true được chuyển thành dạng số và bằng 1. Nhưng 1 > 1 là false.
Tóm lại, kết quả của phép so sánh trên là false.
💡 Khi thực hiện tính toán và so sánh với các toán tử, quan trọng nhất là ghi nhớ thứ tự ưu tiên của chúng để hiểu chính xác thứ tự thực hiện của các phép toán.
Nếu bạn không chắc chắn về thứ tự thực hiện, hãy sử dụng cặp dấu ngoặc đơn (…) (toán tử nhóm) để thực hiện phép toán một cách chính xác.
Đoạn mã trên có thể viết lại thành console.log((3 > 2) > 1). Ở đây, việc nhóm 3 > 2 đảm bảo rằng phép toán này thực hiện trước.
Nếu muốn 2 > 1 thực hiện trước, bạn có thể viết lại thành console.log(3 > (2 > 1)). Kết quả của câu lệnh này là true.
Tổng Kết về Toán Tử So Sánh trong JavaScript
Dưới đây là tổng hợp những kiến thức cơ bản cần nhớ về toán tử so sánh trong JavaScript:
- Toán tử so sánh, là loại toán tử hai ngôi, được sử dụng để so sánh giá trị của hai toán hạng với nhau. Các toán tử so sánh chính trong JavaScript bao gồm:
- Toán tử so sánh lớn hơn (
>) và toán tử so sánh nhỏ hơn (<). - Toán tử so sánh lớn hơn hoặc bằng (
>=) và toán tử so sánh nhỏ hơn hoặc bằng (<=). - Toán tử so sánh bằng “không nghiêm ngặt” (
==) và toán tử so sánh bằng “nghiêm ngặt” (===). - Toán tử so sánh khác “không nghiêm ngặt” (
!=) và toán tử so sánh khác “nghiêm ngặt” (!==). - Kết quả của phép so sánh là giá trị kiểu boolean, có thể là
truehoặcfalse. - Khi so sánh chuỗi, JavaScript thực hiện so sánh từng kí tự từ trái sang phải.
- Trong trường hợp so sánh giữa giá trị với kiểu dữ liệu khác nhau, JavaScript sẽ chuyển đổi giá trị đó thành dạng số (ngoại trừ khi sử dụng toán tử bằng “nghiêm ngặt”
===và toán tử khác “nghiêm ngặt”!==). - Hai giá trị
nullvàundefinedđược coi là bằng nhau (khi sử dụng toán tử==) và luôn khác với các giá trị khác. - Không nên sử dụng toán tử
>,<,>=, và<=vớinullvàundefined. Nếu biến có thể mang giá trịnullhoặcundefined, nên kiểm tra giá trị trước khi thực hiện so sánh. Sau khi kiểm tra và biến không có giá trị lànullhoặcundefined, bạn có thể tiến hành so sánh với các toán tử>,<,>=, và<=. - Thứ tự ưu tiên của các toán tử so sánh giống nhau. Nếu có nhiều toán tử so sánh trong một câu lệnh, quá trình thực hiện sẽ từ trái sang phải. Đối với các trường hợp phức tạp, sử dụng cặp dấu ngoặc đơn để đảm bảo thứ tự thực hiện đúng.
