Xử lý số trong JavaScript

Trong JavaScript, kiểu dữ liệu số (Number) đóng vai trò quan trọng trong nhiều ứng dụng, từ tính toán số học đến xử lý dữ liệu đầu vào của người dùng.

Trong bài học này, chúng ta sẽ tìm hiểu:

• Chuyển đổi số với parseInt() và parseFloat().
• Các phương thức làm tròn số (Math.round(), Math.floor(), Math.ceil()).
• Tạo số ngẫu nhiên với Math.random().
• Ứng dụng thực tế: Tạo mã OTP, xử lý số nhập vào từ form.

Ứng dụng thực tế: Kiểm tra giá trị số trong form, tạo giá trị ngẫu nhiên, xử lý toán học,...

Xử lý số

1. Chuyển đổi số trong JavaScript

parseInt() – Chuyển chuỗi thành số nguyên

• Chỉ lấy phần nguyên của số.
• Bỏ qua các ký tự không phải số sau khi gặp số đầu tiên.
• Không làm tròn số.

Ví dụ:

console.log(parseInt("42"));       // 42
console.log(parseInt("42.9"));     // 42
console.log(parseInt("100px"));    // 100
console.log(parseInt("abc123"));   // NaN (Không phải số)

Ứng dụng: Lấy số nguyên từ dữ liệu nhập vào (ví dụ: số tuổi, số lượng sản phẩm).

parseFloat() – Chuyển chuỗi thành số thực

• Giữ nguyên phần thập phân.
• Hoạt động giống parseInt(), nhưng lấy cả phần thập phân.

Ví dụ:

console.log(parseFloat("42.75"));  // 42.75
console.log(parseFloat("3.14rad"));// 3.14
console.log(parseFloat("100px"));  // 100

Ứng dụng: Xử lý giá trị tiền tệ, đo lường (kg, cm,...).

2. Đối tượng Math trong JavaScript

Làm tròn số

Math.round() – Làm tròn đến số nguyên gần nhất

console.log(Math.round(4.4));  // 4
console.log(Math.round(4.5));  // 5

Math.floor() – Làm tròn xuống (luôn xuống số nhỏ hơn)

console.log(Math.floor(4.9));  // 4
console.log(Math.floor(-4.1)); // -5

Math.ceil() – Làm tròn lên (luôn lên số lớn hơn)

console.log(Math.ceil(4.1));  // 5
console.log(Math.ceil(-4.9)); // -4

Ứng dụng: Xử lý giá trị tiền tệ (làm tròn lên khi thanh toán), chia trang trong phân trang website.

3. Tạo số ngẫu nhiên với Math.random()

Math.random() – Tạo số ngẫu nhiên từ 0 đến 1

console.log(Math.random()); // Một số ngẫu nhiên từ 0 đến <1

Tạo số nguyên ngẫu nhiên trong khoảng cụ thể

Số nguyên từ 1 đến 10:

console.log(Math.floor(Math.random() * 10) + 1);

Số nguyên từ min đến max:

function randomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}
console.log(randomInt(5, 15)); // Số ngẫu nhiên từ 5 đến 15

Ứng dụng: Tạo mã xác thực OTP, chọn số ngẫu nhiên trong trò chơi.

4. Ứng dụng thực tế

Ứng dụng 1: Tạo mã OTP ngẫu nhiên

function generateOTP() {
    return Math.floor(100000 + Math.random() * 900000); // 6 chữ số
}
console.log(generateOTP()); // Ví dụ: 654321

Ứng dụng: Xác thực tài khoản, gửi mã OTP qua SMS hoặc email.

Ứng dụng 2: Xử lý giá trị nhập vào từ form

Ví dụ, người dùng nhập giá tiền nhưng có khoảng trắng hoặc ký tự không hợp lệ:

function formatPrice(input) {
    let price = parseFloat(input.trim());
    return isNaN(price) ? "Giá trị không hợp lệ" : price.toFixed(2) + " VND";
}

console.log(formatPrice(" 100000 "));  // "100000.00 VND"
console.log(formatPrice("10.5$"));     // "10.50 VND"
console.log(formatPrice("abc123"));    // "Giá trị không hợp lệ"

Ứng dụng: Xử lý dữ liệu nhập vào để tránh lỗi khi tính toán.

Kết luận

Những điểm quan trọng trong bài học:

• parseInt() và parseFloat() giúp chuyển chuỗi thành số.
• Làm tròn số với Math.round(), Math.floor(), Math.ceil().
• Tạo số ngẫu nhiên với Math.random().
• Ứng dụng thực tế: Xử lý dữ liệu form, tạo mã OTP, làm tròn giá trị tiền tệ.