Cách chuyển đổi mã màu 3 chữ số thành mã màu 6 chữ số bằng JavaScript

Hướng dẫn cách chuyển đổi mã màu 3 chữ số (#RGB) thành mã màu 6 chữ số (#RRGGBB) bằng JavaScript. Cách này giúp đảm bảo màu hiển thị nhất quán trên các trang web.

Trong bài viết này, chúng ta sẽ tìm hiểu cách viết một hàm JavaScript để chuyển đổi mã màu 3 chữ số (#RGB) thành mã màu 6 chữ số (#RRGGBB). Việc này hữu ích khi bạn cần chuẩn hóa màu sắc trong các ứng dụng web.

Mã JavaScript:

function convertToSixDigitColor(color) {
    // Kiểm tra nếu mã màu có định dạng 3 chữ số
    if (color.length === 4 && color[0] === '#') {
        // Chuyển đổi từng thành phần R, G, B thành dạng lặp lại 2 lần
        return "#" + color[1] + color[1] + color[2] + color[2] + color[3] + color[3];
    }
    // Nếu không phải định dạng 3 chữ số, trả về màu gốc
    return color;
}

// Ví dụ sử dụng
let color3Digit = "#09f";  // Mã màu 3 chữ số
let color6Digit = convertToSixDigitColor(color3Digit);
console.log(color6Digit);  // Kết quả: #0099ff

Giải thích chi tiết từng dòng code:

1. function convertToSixDigitColor(color): Định nghĩa hàm convertToSixDigitColor với đối số là mã màu.
2. if (color.length === 4 && color[0] === '#'): Kiểm tra xem mã màu có dạng 3 chữ số và bắt đầu bằng ký tự #.
3. return "#" + color[1] + color[1] + color[2] + color[2] + color[3] + color[3];: Chuyển đổi từng ký tự thành dạng lặp lại 2 lần để tạo thành mã màu 6 chữ số.
4. return color;: Nếu mã màu không phải dạng 3 chữ số, trả về màu gốc.
5. let color3Digit = "#09f";: Ví dụ mã màu 3 chữ số.
6. let color6Digit = convertToSixDigitColor(color3Digit);: Chuyển đổi sang mã màu 6 chữ số.
7. console.log(color6Digit);: In ra kết quả.

Lời khuyên:

• Hãy kiểm tra định dạng của mã màu đầu vào để đảm bảo chỉ những mã màu hợp lệ được xử lý.
• Mã màu 3 chữ số thường được sử dụng cho những màu đơn giản, nhưng mã màu 6 chữ số sẽ giúp hiển thị màu sắc chính xác hơn.