子字符串、拆分、字符串到数字和 RGB 到 HEX答案

【问题标题】：Substring, Split, String to Number and RGB to HEX子字符串、拆分、字符串到数字和 RGB 到 HEX
【发布时间】：2017-02-17 21:01:38
【问题描述】：

我认为这是一项简单的任务，但它变得非常复杂。请参阅代码。

    // 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(','));
    }

抛出错误，无法读取未定义的拆分。如何解决这个问题？

【问题讨论】：

你的对象字面量无效，在最好的情况下，它会用最后一个的内容覆盖前两个属性。

标签： javascript arrays regex ecmascript-6

【解决方案1】：

subStringRGB 不返回值。所以，如果你将subStringRGB 的结果传递给stringRGBtoNumber，c 很可能是stringRGBtoNumber 中的undefined。顺便说一句，stringRGBtoNumber 也不返回值。

【讨论】：

【解决方案2】：

您可以将函数与扩展运算符和部分值的某些映射组合成单行。

subStringRGB 和 stringRGBtoNumber 现在返回处理后的值。

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))));

【讨论】：

【解决方案3】：

用正则表达式处理它很容易。

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

【讨论】：

我会做两个改变：var hexVal = arr[2]<<16 | arr[3]<<8 | arr[4]; imo 更简单，console.log("#" + (0x1000000 | hexVal).toString(16).substr(1)); 以十六进制表示法打印正确的颜色（这里前导零很重要）