前端颜色格式转化函数 -- colorToRgba

在数字时代的色彩世界里，颜色不再只是简单的物理属性，而是通过各种数字代码来表示的文化语言。编程中，颜色的表示尤为关键，因为它直接影响到人们在屏幕上所看到的一切。因此，在web设计、图形编程或是任何需要颜色操纵的场景中，颜色格式的转换就显得尤为重要。本文介绍一个JavaScript函数colorToRgba来实现颜色格式的转化。

颜色格式和用途

在数字表达上，颜色主要通过两种格式表示：HEX（十六进制颜色）和RGB（红绿蓝颜色），有时还会加上一个称为透明度的Alpha值，形成的RGBA格式。HEX格式便于人们编写和复制，而RGBA格式更适合程序处理，因为它能够很容易地与其他颜色混合或定义透明效果。因此，能够将HEX格式的颜色转换成RGBA格式，对于程序员而言，无疑有着极大的便利。

剖析colorToRgba

这个函数接收两个参数：color代表颜色代码，可以是HEX格式或者RGB格式；alpha代表透明度，是一个介于0（完全透明）到1（完全不透明）之间的数值。函数的目标是输出一个标准的RGBA格式字符。

获取正确的Alpha值

colorToRgba函数首先通过内部函数getValidAlpha来确保输入的alpha值是有效的。如果alpha值不在0到1的范围内，函数会默认返回1，即完全不透明。

const getValidAlpha = val => Number(val) <= 1 && Number(val) >= 0 ? Number(val) : 1;

处理输入颜色字符串

为了处理各种不同形式的输入，首先去除color字符串中的所有空白字符，以得到一个纯净的颜色字符串。

const colorString = String(color).replace(/\s/g, "");

匹配RGB格式

然后函数检查color字符串是否符合RGB或RGBA格式。如果是，就利用正则表达式提取出颜色的红、绿、蓝值，以及可能存在的alpha值。

const rgbMatch = colorString.match(/^(rgba?)\((\d+),(\d+),(\d+)(,(.*))?\)$/);

if (rgbMatch) {
    const [_, colorType, red, green, blue, __, a] = rgbMatch;
    // ...
}

如果提取成功，会进一步检查红绿蓝值是否在0至255之间，然后根据提供的alpha值或提取的值返回标准的RGBA色彩字符串。

处理HEX格式

如果输入不是RGB格式，函数会继续检查它是否是HEX格式。HEX格式的颜色代码可能包含6个字符（例如#FFFFFF）或3个字符（例如#FFF，它是#FFFFFF的缩写形式）。

const hexMatch = colorString.match(/^#([0-9a-fA-F]{6}|[0-9a-fA-F]{3})$/);

当匹配HEX格式成功时，为了将其转换为RGBA格式，需要先将HEX值分解成相应的红、绿、蓝三元素，再通过parseInt函数转为10进制的整数，并最终拼接成RGBA格式字符串。

if (hexMatch) {
    let hexValue = hexMatch[1];
    // ...
}

输出与错误处理

如果color字符串不符合RGB(A)或HEX格式，则函数会记录一条错误消息，并返回原始的color值。这是一个很好的健壮性设计，因为它提醒用户输入可能存在的问题，同时避免了程序因无效输入崩溃。

console.log('Color should be in hex or rgb(a) format!');
return color;

效果展示

实际效果如下图所示：