面试官问：颜色转换 'rgb(255, 255, 255)' -> '#FFFFFF' 的多种思路

谁践踏了优雅 2023-01-17 14:57 79阅读 0赞

点击上方 三分钟学前端，关注公众号

回复交流，加入前端编程面试算法每日一题群

面试官也在看的前端面试资料

仔细观察本题，本题可分为三个步骤：

*  从 `rgb(255, 255, 255)` 中提取出 `r=255` 、 `g=255` 、 `b=255`
 *  将 `r` 、 `g` 、 `b` 转换为十六进制，不足两位则补零
 *  组合 `#`

## 提取 r、g、b ##

#### 方式一：利用 match() 方法 ####

利用 `match()` 方法，读取出 `r` 、 `g` 、 `b`

function rgb2hex(sRGB) {
        const reg = /^(rgb|RGB)$\s*(\d{1,3})\s*,\s*(\d{1,3}\s*),\s*(\d{1,3})\s*$$/
     const rbg = sRGB.match(reg)
        return rbg
    }
    
    // 测试
    rgb2hex('rgb(255, 255, 255)')
    // ["rgb(255, 255, 255)", "rgb", "255", "255", "255", index: 0, input: "rgb(255, 255, 255)", groups: undefined]
    rgb2hex('rgb(16, 10, 255)')
    // ["rgb(16, 10, 255)", "rgb", "16", "10", "255", index: 0, input: "rgb(16, 10, 255)", groups: undefined]

`r = rgb[2]` 、 `g = rgb[3]` 、 `b = rgb[4]`

#### 方式二：利用 `match()` 方法（2） ####

`rgb(255, 255, 255)` 中 `r` 、 `g` 、 `b` 分别为连续的数字，所以我们可以利用正则 `/\d+/g` 获取取所有连着的数字

function rgb2hex(sRGB) {
        const rgb = sRGB.match(/\d+/g);
        return rgb
    }
    
    // 测试
    rgb2hex('rgb(255, 255, 255)')
    // ["255", "255", "255"]
    rgb2hex('rgb(16, 10, 255)')
    // ["16", "10", "255"]

#### 方式三：利用 replace + split ####

观察 `rgb(255, 255, 255)` 的每一个色值是透过 `,` 连接一起的，所以我们考虑是否能通过 `split(',')` 拆分出每一个色值，主要考虑两步

*  替换 `rgb(255, 255, 255)` 的部分字符（ `rgb` 、 `(` 、 `)` ）为 `''`
 *  拆分出每一个色值

function rgb2hex(sRGB) {
        const rgb = sRGB.replace(/(?:$|$|rgb|RGB)*/g, '').split(',')
        return rgb
    }
    // 测试
    rgb2hex('rgb(255, 255, 255)')
    // ["255", " 255", " 255"]
    rgb2hex('rgb(16, 10, 255)')
    // ["16", " 10", " 255"]

## 转换为十六进制，不足补零 ##

转换为十六进制，可采用：

*  `(+n).toString(16)` 或 `Number(n).toString(16)` \`
 *

不足两位则补零：

*  `('0' + r16).slice(-2)`
 *  `r16.padStart(2, '0')`
 *  `(r < 16? '0':'') + r16`
 *  `r16.length < 2 ? '0' + r16 : r16`
 *  `((1 << 24) + (Number(r) << 16) + (Number(g) << 8) + Number(b)).toString(16).slice(1)`

方式多种多样，发散思维，????更多

## 组合 `#` ##

#### reduce ####

注意，输出为可为大写（ `#FFFFFF` ）或小写字符（ `#ffffff` ），本题为大写

rgb.reduce((acc, cur) => acc + hex, '#').toUpperCase()

#### \+ ####

也可以通过 `+` 连接，按情况而定

方式多种多样，发散思维，????更多

## 总结 ##

把本题拆分成以上三步，选取每步的一种实现方式组合实现本题，最终实现方案多种多样，简单这里列一下 **其中的部分组合**

#### 组合一 ####

function rgb2hex(sRGB) {
        var rgb = sRGB.replace(/(?:$|$|rgb|RGB)*/g, '').split(',')
        return rgb.reduce((acc, cur) => {
            var hex = (cur < 16? '0':'') + Number(cur).toString(16)
            return acc + hex
        }, '#').toUpperCase()
    }
    
    // 测试
    rgb2hex('rgb(255, 255, 255)')
    // "#FFFFFF"
    rgb2hex('rgb(16, 10, 255)')
    // "#100AFF"

#### 组合二 ####

function rgb2hex(rgb) {
        const rgb = rgb.match(/\d+/g);
        const hex = (n) => {
            return ("0" + Number(n).toString(16)).slice(-2);
        }
        return rgb.reduce((acc, cur) => acc + hex, '#').toUpperCase()
    }
    
    // 测试
    rgb2hex('rgb(255, 255, 255)')
    // "#FFFFFF"
    rgb2hex('rgb(16, 10, 255)')
    // "#100AFF"

#### 组合三 ####

function rgb2hex(sRGB) {
        const rgb = sRGB.replace(/(?:$|$|rgb|RGB)*/g, '').split(',')
        return "#" + ((1 << 24) + (Number(rgb[0]) << 16) + (Number(rgb[1]) << 8) + Number(rgb[2])).toString(16).slice(1).toUpperCase()}
    
    // 测试
    rgb2hex('rgb(255, 255, 255)')
    // "#FFFFFF"
    rgb2hex('rgb(16, 10, 255)')
    // "#100AFF"
    rgb2hex('rgb(1, 2, 3)')
    // "#010203"

来自：https://github.com/sisterAn/blog

## 最后 ##

欢迎关注「三分钟学前端」，回复「交流」自动加入前端三分钟进阶群，每日一道编程算法面试题（含解答），助力你成为更优秀的前端开发！

》》面试官也在看的前端面试资料《《

“在看和转发”就是最大的支持