代码
/**
* 将十六进制颜色转换为RGB格式
* @param {string} hex 十六进制颜色值
* @return {string} {r, g, b} 返回最终的rgb值
*/
function hexToRgb(hex) {
// 去掉可能的#字符
hex = hex.replace(/^#/, '');
// 如果是缩写形式的颜色值（如 #FFF），则将其扩展为完整形式
if (hex.length === 3) hex = hex.replace(/(.)/g, '$1$1');
// 解析RGB值
let bigint = parseInt(hex, 16),
r = (bigint >> 16) & 255,
g = (bigint >> 8) & 255,
b = bigint & 255;
return {
r, g, b };
}
/**
* 两种颜色相减后的值
* @param {string} color1 颜色1(主颜色，一般是大值)
* @param {string} color2 颜色2
* @return {object} { hexadecimal, rgb } 返回十六进制和rgb值
*/
function subtractColors(color1, color2) {
let rgb1 = hexToRgb(color1),
rgb2 = hexToRgb(color2),
r = rgb1.r - rgb2.r,
g = rgb1.g - rgb2.g,
b = rgb1.b - rgb2.b,
reslut = (val) => Math.max(0, val);
// 将RGB结果转换为十六进制格式
return {
hexadecimal: `#${
(1 << 24 | reslut(r) << 16 | reslut(g) << 8 | reslut(b)).toString(16).slice(1)}`,
rgb: `${
r}, ${
g}, ${
b}`
};
}
console.log(subtractColors('ffffff', 'ff0000'));
// {hexadecimal: '#00ffff', rgb: '0, 255, 255'}
replace
w3school
replace方法在字符串中搜索值或正则表达式。
replace方法返回已替换值的新字符串。
replace方法不会更改原始字符串。
如果您替换值，则只会替换第一个实例。如需替换所有实例，请使用带有g修饰符集的正则表达式。
MDN
replace方法返回一个由替换值(replacement)替换部分或所有的模式(pattern)匹配项后的新字符串。模式可以是一个字符串或者一个正则表达式，替换值可以是一个字符串或者一个每次匹配都要调用的回调函数。如果pattern是字符串，则仅替换第一个匹配项。
parseInt
MDN
parseInt(string, radix)解析一个字符串并返回指定基数的十进制整数，radix是2-36之间的整数，表示被解析字符串的基数。
string
要被解析的值。如果参数不是一个字符串，则将其转换为字符串(使用ToString抽象操作)。字符串开头的空白符将会被忽略。
radix可选
从2到36的整数，表示进制的基数。例如指定16表示被解析值是十六进制数。如果超出这个范围，将返回NaN。假如指定0或未指定，基数将会根据字符串的值进行推算。=推算的结果不会永远是默认值10！文章后面的描述解释了当参数radix不传时该函数的具体行为。
w3school
parseInt()函数解析字符串并返回整数。
radix参数用于指定使用哪种数字系统，例如基数为16(十六进制)表示字符串中的数字应从十六进制数解析为十进制数。
如果radix参数被省略，JavaScript假定如下：
如果字符串以"0x"开头，则基数为16(十六进制)
如果字符串以"0"开头，则基数为8(八进制)。此特性已弃用
如果字符串以任何其他值开头，则基数为10(十进制)
只返回字符串中的第一个数字！
允许前导和尾随空格。
如果第一个字符不能转换为数字，parseInt()返回NaN。
==旧浏览器将导致parseInt("010")为8，因为旧版本的ECMAScript比ECMAScript5旧当字符串以"0"开头时使用八进制基数8作为默认值。从ECMAScript5开始，默认值为十进制基数10。
max
MDN
Math.max()函数返回作为输入参数的最大数字，如果没有参数，则返回-Infinity。
W3school
max()方法返回具有最高值的数字。
提示：min()方法返回具有最小值的数字。
toString
w3school
toString()方法将对象作为字符串返回。
如果toString()方法不能返回字符串，则返回"[object Object]"。
Object.toString()总是返回对象构造函数。
toString()方法不会更改原始对象。
每个JavaScript对象都有toString()方法。
当需要将对象显示为文本(如在HTML中)或需要将对象用作字符串时，JavaScript在内部使用toString()方法。
通常，您不会在自己的代码中使用它。
MDN
toString()方法返回一个表示该对象的字符串。该方法旨在重写(自定义)派生类对象的类型转换的逻辑。
slice
w3school
slice方法以新的数组对象，返回数组中被选中的元素。
slice方法选择从给定的start参数开始的元素，并在给定的end参数处结束，但不包括。
slice方法不会改变原始数组。
MDN
slice方法返回一个新的数组对象，这一对象是一个由start和end决定的原数组的浅拷贝，包括start，不包括end，其中start和end代表了数组元素的索引。原始数组不会被改变。