JavaScript实现十六进制色差功能、十六进制颜色相减、replace、parseInt、max、toString、slice

---

代码

/**
 * 将十六进制颜色转换为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代表了数组元素的索引。原始数组不会被改变。