Chuỗi con, Chia, Chuỗi thành Số và RGB thành HEX

Question

Tôi nghĩ đây là một công việc dễ dàng nhưng nó trở nên thực sự phức tạp. Xem Mã.

// Convert "rgb(255, 255, 255)" to (255, 255, 255) and then to Hex code 
    var data = { 
     color:"rgb(165,199,72)", 
     color:"rgb(229,121,74)", 
     color:"rgb(105,177,222)"   
    } 
    // rgb To Hex Conversion 
    var componentToHex = function(c) {    
     var hex = c.toString(16); 
     return hex.length == 1 ? "0" + hex : hex; 
    }  
    var rgbHex = function(r, g, b) { 
     return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b); 
    } 


    //Substring "rgb(255, 255, 255)" to "(255, 255, 255)" 
    var subStringRGB = function(c){ 
     var b = c.substring(4, c.length); 
    } 
    var stringRGBtoNumber = function(c){ 
     var b = Number(c.split(',')); 
    } 

Đó là lỗi ném, không thể đọc được phần chia nhỏ của không xác định. Làm thế nào để sửa lỗi này?

Answer 1

Bạn có thể kết hợp các chức năng để một dòng singe với nhà điều hành lây lan và một số bản đồ của các bộ phận của các giá trị.

subStringRGB và stringRGBtoNumber trả về giá trị đã xử lý.

var data = [{ color:"rgb(165,199,72)"}, { color:"rgb(229,121,74)" },{ color:"rgb(105,177,222)" }],   
 
    componentToHex = function(c) {    
 
     var hex = c.toString(16); 
 
     return hex.length == 1 ? "0" + hex : hex; 
 
    }, 
 
    rgbHex = function(r, g, b) { 
 
     return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b); 
 
    }, 
 
    subStringRGB = function(c){ 
 
     return c.slice(4, -1); 
 
    }, 
 
    stringRGBtoNumber = function(c){ 
 
     return c.split(',').map(Number); // split and convert all parts to Number 
 
    }; 
 
    
 
console.log(data.map(c => rgbHex(...stringRGBtoNumber(subStringRGB(c.color)).map(componentToHex))));

Answer 2

subStringRGB không trả lại giá trị. Vì vậy, nếu bạn vượt qua kết quả của subStringRGB đến stringRGBtoNumberc có thể sẽ là undefined trong stringRGBtoNumber. Nhân tiện, stringRGBtoNumber cũng không trả lại giá trị.

Answer 3

Xử lý biểu thức bằng Biểu thức chính quy thật dễ dàng.

var arr = /rgb(\((\d+),(\d+),(\d+)\))/.exec("rgb(255,255,255)"); 
 
console.log(arr[1]); // it shows (255,255,255) 
 
var hexVal = (parseInt(arr[2]) << 16) + (parseInt(arr[3]) << 8) + parseInt(arr[4]); // calculate the decimal value 
 
console.log("0x" + hexVal.toString(16)); // it shows 0xffffff