JavaScript之颜色值相互转换十六进制正则rgbtoStringslicetoUpperCasesplitfiltermapparseInt

Posted 2023-02-26 牧碼人

文章目录

• 1、前言
• 2、RGB颜色值转换成十六进制颜色码
• 3、十六进制颜色码转换成RGB颜色值
• 4、演示

---

1、前言

两个函数均为做任何输入校验，在真实项目中需自行做输入校验。

---

2、RGB颜色值转换成十六进制颜色码

function transformationHexadecimal(arr = [7, 7, 7]) 
	let strHex = '';
	
	for (let i = 0; i < arr.length; i++) 
		let hex = '0' + arr[i].toString(16);
		
		hex = hex.slice(-2);
		
		strHex += hex;
	
	
	strHex = strHex.toUpperCase();
	
	return strHex;


console.log(transformationHexadecimal([57, 107, 90]));
// 396B5A

☺☺☺☺☺☺☺

arr在形参中做了默认值处理，这是ES6的写法。其中数组的第一项代表red；第二项代表green；第三项代表blue；也就是所谓的rgb。
第一步：在函数顶部定义一个字符串类型的变量，名称为strHex。
第二步：使用for循环遍历数组。在for循环里面定义一个字符串类型的变量，名称为hex。循环里的第一行代码使用toString字符串方法把十进制的数字转为十六进制，并且进行补0操作。循环里第二行代码表示通过字符串的slice方法获取上一行操作的倒数两个字符。循环里第三行代码是简单累加操作。
第三步：使用toUpperCase方法把strHex变量的值全部转为大写，这里的转大写只针对字母，对数字无效。
最后一步：通过return返回值供外部使用。

---

3、十六进制颜色码转换成RGB颜色值

function transformationRGB(hex = '396B5A') 
    let regSplit = /([0-9a-fA-F]2)/,
        rgb = hex.split(regSplit);

    rgb = rgb.filter(item => item != "");
    rgb = rgb.map(item => parseInt('0x' + item));

    return rgb;


console.log(transformationRGB('7F7A09'));
// [127, 122, 9]

☺☺☺☺☺☺☺

hex在形参中做了默认值处理，这是ES6的写法。字符串两两分组，共分为三组，第一组是39，代表red；第二组是6B，代表green；第三组是5A，代表blue。由这三组数据组成了rgb的颜色值，需要写一个程序把它们转换成对应的rgb值。
函数里的第一行代码表示定义一个正则表达式集合，正则集合的意思是匹配从0到f的值，字母不区分大小写，并且限制了只匹配两个字符。
函数里的第二行代码使用split方法结合正则集合两两分割字符串为数组，这里得到的数组存在空字符。
函数里的第三行代码使用filter方法过滤数组里面的空字符。
函数里的第四行代码使用map和parseInt方法把字符转成十进制，代码运行至此会得到一个纯数字类型的数组，数组的第一项表示red；第二项表示green；第三项表示blue。
最后使用return返回rgb的值供外部使用。

---

4、演示