Javascript - Chuyển đổi màu (số -> chuỗi) ngược lại

Question

utils.parseColor = function (color, toNumber) { 
    if (toNumber === true) { 
    if (typeof color === 'number') { 
     return (color | 0); //chop off decimal 
    } 
    if (typeof color === 'string' && color[0] === '#') { 
     color = color.slice(1); 
    } 
    return window.parseInt(color, 16); 
    } else { 
    if (typeof color === 'number') { 
     //make sure our hexadecimal number is padded out 
     color = '#' + ('00000' + (color | 0).toString(16)).substr(-6); 
    } 

    return color; 
    } 
}; 

Xin chào các bạn, tôi gặp phải đoạn mã này. Nó là một hàm tiện ích trong JavaScript sẽ chuyển đổi màu sắc qua lại giữa các số và chuỗi. Có 2 phần mà tôi không chắc chắn,

Đầu tiên, return (color|0); có nghĩa là gì? | là gì? trong JavaScript?

Thứ hai, trong dòng

color = '#' + ('00000' + (color | 0).toString(16)).substr(-6); 

tại sao tôi cần phải chắc chắn rằng các số thập lục phân được đệm ra? Chúng ta đang cố gắng đạt được điều gì ở đây?

---

Gọi chức năng với một số thập lục như utils.parseColor(0xFFFF00), trả về chuỗi giá trị : "#ffff00". Việc chuyển một chuỗi thập lục phân kiểu CSS trả về cùng một chuỗi chưa được sửa đổi. Hàm cũng chấp nhận tham số thứ hai, tùy chọn, toNumber, nếu được đặt thành true, trả về giá trị màu số . Ví dụ: gọi số utils.parseColor("#FFFF00", true) hoặc utils.parseColor(0xFFFF00, true), cả hai đều trả về số 16776960.

Cảm ơn, Venn.

Answer 1

| bằng JavaScript bitwise HOẶC. Trong trường hợp này, tất cả những gì nó làm là buộc số phải là một số nguyên.

Bitwise HOẶC lấy hai số và so sánh tất cả các bit của chúng. Nếu một trong hai bit là 1, kết quả sẽ có 1 ở đó. Vì vậy, với hai số nhị phân 1100 và 1010 bạn sẽ nhận được những điều sau đây:

1100 
1010 
---- 
1110 

Như bạn thấy, kết quả có 1 trong mỗi cột có một 1. Vì vậy, | 0 không thay đổi giá trị của số.

Tuy nhiên, vì nó hoạt động với biểu diễn nhị phân của số nguyên, JavaScript thay đổi số thành số nguyên trước khi áp dụng. Điều này có nghĩa là 2.3 | 0 là 2 trong JavaScript.

Bạn phải đảm bảo số được đệm đúng cách vì định dạng màu mong đợi sáu chữ số. Tức là, #00F000 có giá trị trong đó #F000 thì không.

Cách hoạt động rất đơn giản. Giả sử bạn vượt qua số 34 làm số màu của bạn. 0x22 là "22" dưới dạng chuỗi trong cơ sở 16. (Gọi tới số toString(n) trên số trả về số đại diện trong số n.) Đây là không màu hợp lệ vì màu cần sáu chữ số sau # (trong CSS bạn có thể cũng có ba, nhưng điều đó không quan trọng). Vì vậy, những gì họ làm là đầu tiên thêm năm 0 như một chuỗi. Điều này có nghĩa là "22" trở thành "0000022". Cuối cùng, lấy sáu ký tự cuối cùng từ điều này: 000022. (Gọi substr với chỉ số âm tính từ cuối chuỗi.) Điều này cho chúng màu hợp lệ.

Vì vậy, đặt nó tất cả cùng nhau, dòng

color = '#' + ('00000' + (color | 0).toString(16)).substr(-6); 

mất số bạn thông qua tại, biến nó thành một số nguyên với (color | 0), biến nó thành một chuỗi thập lục phân với .toString(16), miếng đệm nó với một loạt các các số 0, có các số cuối cùng sáu ký tự từ chuỗi đệm và thêm một số # vào đó.

Đây thực sự là một cách khá thông minh và thanh lịch để viết chức năng này.