Thuật toán Lexicographical Comparison: Vì sao '20' > '3' lại trả về false trong JavaScript?

Trong quá trình code JavaScript hoặc TypeScript, không ít lần bạn lấy giá trị từ một input HTML (ví dụ <input type="number" />) hoặc một field từ file CSV và đem đi so sánh:

const a = "20";
const b = "3";

if (a > b) {
  console.log("A lớn hơn B");
} else {
  console.log("A nhỏ hơn B");
}

Về mặt toán học, 20 lớn hơn 3 là điều hiển nhiên. Nhưng nếu chạy đoạn code trên, kết quả in ra sẽ là A nhỏ hơn B ('20' > '3' trả về false).

Lý do là vì a và b đang có kiểu dữ liệu là chuỗi (String). Khi so sánh hai chuỗi với nhau bằng toán tử > hoặc <, JavaScript KHÔNG quan tâm bên trong chuỗi chứa gì (chữ cái hay con số), nó chỉ áp dụng một thuật toán duy nhất: Lexicographical Comparison (So sánh theo từ điển).

Thuật toán Lexicographical (hay còn gọi là Alphabetical order) so sánh hai chuỗi giống hệt như cách bạn tra từ điển. Nó duyệt qua từng ký tự từ trái sang phải của cả hai chuỗi và so sánh mã Unicode (hoặc giá trị UTF-16) của chúng.

Các bước cụ thể của thuật toán trong V8 Engine (trình duyệt Chrome/Node.js):

1. Lấy ký tự đầu tiên của chuỗi A và ký tự đầu tiên của chuỗi B.
2. So sánh giá trị số của hai ký tự này.
3. Nếu bằng nhau, chuyển sang cặp ký tự tiếp theo ở vị trí thứ 2, thứ 3...
4. Nếu khác nhau, ký tự nào có giá trị lớn hơn thì chuỗi chứa ký tự đó được coi là LỚN HƠN, và thuật toán dừng lại ngay lập tức. Nó tuyệt đối bỏ qua và không cần quan tâm các ký tự phía sau dài hay ngắn cỡ nào.

Bây giờ chúng ta áp dụng thuật toán trên vào việc so sánh '20' và '3':

• Ký tự đầu tiên của chuỗi thứ nhất là '2' (Mã Unicode: 50).
• Ký tự đầu tiên của chuỗi thứ hai là '3' (Mã Unicode: 51).
• Vì 50 < 51 (tức là '2' < '3'), thuật toán đưa ra kết luận ngay: Chuỗi '20' nhỏ hơn chuỗi '3'.

Có một trường hợp thú vị khác: Điều gì xảy ra nếu bạn so sánh '2' và '20'?

console.log('2' > '20'); // Trả về false ('2' < '20')

Quá trình duyệt sẽ diễn ra như sau:

1. So sánh ký tự đầu: '2' và '2' bằng nhau. Tiếp tục sang ký tự thứ 2.
2. So sánh ký tự thứ hai: Chuỗi trái đã hết ký tự (hết độ dài), chuỗi phải là '0'.

Theo nguyên tắc của thuật toán Lexicographical, nếu một chuỗi là "tiền tố" (prefix) của chuỗi kia (tức chuỗi này giống hệt toàn bộ phần đầu của chuỗi kia), thì chuỗi nào ngắn hơn sẽ được quy ước là nhỏ hơn.

Do đó, '2' ngắn hơn nên nó nhỏ hơn '20'. Kết quả này vô tình trùng khớp với toán học (2 nhỏ hơn 20), nhưng bạn phải nhớ rằng bản chất bên dưới hệ thống vẫn là đang "so sánh chữ" (string comparison) chứ không hề có phép toán số học nào ở đây!

Cách duy nhất và chuẩn xác nhất để tránh những bug đau đầu này là luôn luôn ép kiểu (Type Coercion) dữ liệu về Number trước khi sử dụng các toán tử so sánh (>, <, >=, <=).

const a = "20";
const b = "3";

// Sử dụng Number(), hoặc dấu +
if (Number(a) > Number(b)) {
  console.log("Toán học đã trở lại!"); // Khối lệnh này sẽ được chạy
}

// Hoặc sử dụng parseInt / parseFloat khi lấy data từ file text/CSV
const age = parseInt(csvRecord.age, 10);
const limit = 18;

if (age > limit) {
  // Logic hợp lệ an toàn tuyệt đối
}