點擊上方?三分鐘學前端，關注公眾號

回復交流，加入前端編程面試算法每日一題群

面試官也在看的前端面試資料

仔細觀察本題，本題可分為三個步驟：

• 從?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

最后

歡迎關注「三分鐘學前端」，回復「交流」自動加入前端三分鐘進階群，每日一道編程算法面試題（含解答），助力你成為更優秀的前端開發！

》》面試官也在看的前端面試資料《《

“在看和轉發”就是最大的支持

總結

以上是生活随笔為你收集整理的面试官问：颜色转换 'rgb(255, 255, 255)' - '#FFFFFF' 的多种思路的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。