CodeWars 解題心得 : RGB To Hex Conversion


Posted by mumu892101 on 2021-09-01

在參加 Huli 的程式導師實驗計畫前,報名需要先解三題 CodeWars 上的題目,當時花比較多時間寫的是這題,現在把心得搬來 CodeBridge,把自己不同部落格的主題分得更明確一點。

首先先附上 我的CodeWars頁面,裡面可以看到我曾經解過的題目。

回到解題紀錄,這題的關鍵點有兩個 : 迴圈 & 色碼轉換

  1. 題目分別給了 r , g , b 三個變數。
    不想重複做三次十六進制轉換,所以先建立一個 Array 將變數放進去,再用 forEach 迴圈做十六進制後,推入一個空字串。

  2. RGB 色值範圍 0–256 十進制轉成 HEX 色碼十六進制。
    這個部分 google 了色碼轉換的原理,並查到用 toString(16) 做十進制轉十六進制的方法。因此 R、G、B 的值都要各自轉為十六進制,然後組成新的字串。

  3. HEX 色碼為 R / G / B 各兩個字組成的六個字字串。
    在這邊碰到一個問題,正確應該輸出為 "000000" 的答案卻只輸出 "000",原來 R、G、B 在 HEX 色碼中會各占兩個數字,但當數字範圍為 0~9 時,十六進位也是 0~9,應該改成 00 ~ 09 才會符合色碼標準。
    一開始 google 的關鍵字是「Javascript / 字串 / 個位數轉兩位數」,發現了一篇常使用在日期數字的字串補全方法。方法是使用 padStart()padEnd(),按照色碼標準,選擇使用 padStart(2,"0"),將 "1" 轉出為 "01"。

  4. 轉大寫。
    十六進制完畢後的英文字母按照題目要求,用 toUpperCase() 轉成大寫就可以了。

以上是「RGB To Hex Conversion」的解題過程,如果有更好的做法,也很歡迎告訴我!


#Codewars #程式導師實驗計畫 #RGB-Hex







Related Posts

MTR04_1002

MTR04_1002

[ 筆記 ] Express 03 - Deployment

[ 筆記 ] Express 03 - Deployment

發生 Blocking 了!! 怎麼辦?

發生 Blocking 了!! 怎麼辦?


Comments