前端学习之编程题系列：（五）颜色字符串转换

写在前面

本题目来自牛客网，已经成功通过测试。笔者刚刚开始学习前端，准备在掘金记录下自己的学习过程，欢迎和我一样准备入门前端的小伙伴们一起交流学习，也欢迎各位大佬批评指正~~~

题目描述

将 rgb 颜色字符串转换为十六进制的形式，如 rgb(255, 255, 255) 转为 #ffffff

1. rgb 中每个 , 后面的空格数量不固定
2. 十六进制表达式使用六位小写字母
3. 如果输入不符合 rgb 格式，返回原始输入

示例

输入

'rgb(255, 255, 255)'

输出

#ffffff

题解

function rgb2hex(sRGB) {
   let rgbArray = sRGB.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/)
   if(!rgbArray){
       return sRGB
   }else{
       let res = "#"
       //了解match匹配到的数组结构，这里i从1开始，不是0
       for(let i = 1; i <= 3; i++){
           let num = parseInt(rgbArray[i])
           if(num >= 0 && num <= 255){  
               //小于16时，前面要补零
               res += num < 16? "0" + num.toString(16) : num.toString(16)
           }else{
               return sRGB
           }
       }
       return res
   }  
}

知识点

1. 正则表达式的匹配

   stringObject.match(regexp) 方法返回的是一个数组，该数组的第 0 个元素存放的是匹配文本，而其余的元素存放的是与正则表达式的子表达式匹配的文本。

   示例：

   let sRGB = 'rgb(12,46,255)'
   let sArray = sRGB.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/)
   console.log(sArray);
   //打印结果
   Array(4)
   0: "rgb(12,46,255)"
   1: "12"
   2: "46"
   3: "255"
   groups: undefined
   index: 0
   input: "rgb(12,46,255)"
   length: 4
   __proto__: Array(0)
   

2. 数字和字符串之间的转换parseInt(string, radix)和NumberObject.toString(radix)

   • radix默认是10，按照十进制进行解析

3. 边界问题