JavaScript实现十六进制颜色混合功能、色差之权重值、replace、parseInt、slice、round、toString

---

代码

/**
 * 两种颜色混合后的值
 * @param {string} color1 颜色1
 * @param {string} color2 颜色2
 * @param {number} weight 权重
 * @return {string} blendedColor 最终结果
 */
function blendColors(color1, color2, weight) {
    // 解析颜色字符串为RGB值
    function parseColor(color) {
        const hex = color.replace(/^#/, '');
        const r = parseInt(hex.slice(0, 2), 16);
        const g = parseInt(hex.slice(2, 4), 16);
        const b = parseInt(hex.slice(4, 6), 16);

        return { r, g, b };
    }

    const color1RGB = parseColor(color1);
    const color2RGB = parseColor(color2);

    // 计算混合后的RGB值
    const blendedR = Math.round((1 - weight) * color1RGB.r + weight * color2RGB.r);
    const blendedG = Math.round((1 - weight) * color1RGB.g + weight * color2RGB.g);
    const blendedB = Math.round((1 - weight) * color1RGB.b + weight * color2RGB.b);

    // 将RGB值转换为十六进制颜色字符串
    function componentToHex(c) {
        const hex = c.toString(16);

        return hex.length === 1 ? '0' + hex : hex;
    }

    return `#${componentToHex(blendedR)}${componentToHex(blendedG)}${componentToHex(blendedB)}`;
}

console.log(blendColors('ffffff', 'ff0000', 0.7));
// #ff4d4d

---

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。

---

slice

w3school

slice方法以新的数组对象，返回数组中被选中的元素。
slice方法选择从给定的start参数开始的元素，并在给定的end参数处结束，但不包括。
slice方法不会改变原始数组。

---

MDN

slice方法返回一个新的数组对象，这一对象是一个由start和end决定的原数组的浅拷贝，包括start，不包括end，其中start 和end代表了数组元素的索引。原始数组不会被改变。

---

round

w3school

round()方法将数字四舍五入到最接近的整数。
注释：2.49将向下舍入(2)，而2.5将向上舍入(3)。
说明
对于0.5，该方法将进行上舍入。
例如，3.5将舍入为4，而-3.5将舍入为-3。

---

MDN

Math.round()函数返回一个数字四舍五入后最接近的整数。

---

toString

w3school

toString()方法将对象作为字符串返回。
如果toString()方法不能返回字符串，则返回"[object Object]"。
Object.toString()总是返回对象构造函数。
toString()方法不会更改原始对象。
每个JavaScript对象都有toString()方法。
当需要将对象显示为文本(如在HTML中)或需要将对象用作字符串时，JavaScript在内部使用toString()方法。
通常，您不会在自己的代码中使用它。

---

MDN

toString()方法返回一个表示该对象的字符串。该方法旨在重写(自定义)派生类对象的类型转换的逻辑。