Tabla de contenido
el código
/**
* 将十六进制颜色转换为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'}
reemplazar
w3escuela
replace
El método busca en una cadena un valor o una expresión regular.
replace
El método devuelve una nueva cadena con el valor reemplazado.
replace
El método no cambia la cadena original.
Si reemplaza un valor, solo se reemplazará la primera instancia. Para reemplazar todas las instancias, useg
una expresión regular con conjuntos de modificadores.
MDN
replace
El método devuelve una nueva cadena conreplacement
algunas o todas las coincidencias del patrón ( ) reemplazadas por el valor de reemplazo ( ) .pattern
El patrón puede ser una cadena o una expresión regular, y el valor de reemplazo puede ser una cadena o una función de devolución de llamada que se llamará para cada coincidencia. Si espattern
una cadena, solo se reemplaza la primera aparición.
parseInt
MDN
parseInt(string, radix)
Analiza una cadena y devuelve un número entero decimal en la base especificada,radix
que es2-36
un número entero intermedio, que representa la base de la cadena que se está analizando.
string
El valor que se va a analizar. Si el argumento no es una cadena, se convierte en una cadena (mediante la operación abstracta ToString ). Se ignorarán los espacios en blanco al principio de la cadena.
radix
Opcional Entero
de2
a36
, que representa la base de la base. Por ejemplo,16
especificar que el valor analizado es un número hexadecimal. Volverá si está fuera de este rangoNaN
. Si se especifica0
o no, la base se inferirá del valor de la cadena. =¡El resultado extrapolado no siempre será el predeterminado10
! La descripción al final del artículo explicaradix
el comportamiento específico de la función cuando no se pasa el parámetro.
w3escuela
parseInt()
La función analiza la cadena y devuelve un número entero.
radix
El parámetro se usa para especificar qué sistema numérico usar, por ejemplo, la base es16
(hexadecimal) para indicar que los números en la cadena deben analizarse de hexadecimal a decimal.
Siradix
se omite el argumento,JavaScript
se supone lo siguiente:
si la cadena comienza"0x"
con , la base es16
(hexadecimal)
Si la cadena"0"
comienza con , la base es8
(octal). Este atributo está en desuso.
Si la cadena comienza con cualquier otro valor, la base es10
(decimal)
¡Solo devuelve el primer número de la cadena!
Se permiten espacios iniciales y finales.
parseInt()
Devuelve si el primer carácter no se puede convertir en un númeroNaN
.
== Los navegadores más antiguos daránparseInt("010")
como resultado , porque8
las versiones más antiguas usan una base octal como valor predeterminado cuando la cadena comienza con . Desde el principio, el valor predeterminado es base decimal .ECMAScript
ECMAScript5
"0"
8
ECMAScript5
10
máximo
MDN
Math.max()
La función devuelve el número más grande tomado como parámetro de entrada, o -Infinito si no hay ningún parámetro .
W3escuela
max()
El método devuelve el número con el valor más alto.
Consejo: El método min() devuelve el número con el valor más pequeño.
w3escuela
toString()
El método devuelve el objeto como una cadena. Devuelve
si el método no puede devolver una cadena . Devuelve siempre el constructor del objeto. El método no cambia el objeto original.toString()
"[object Object]"
Object.toString()
toString()
CadaJavaScript
objeto tienetoString()
métodos. Los métodos se usan internamente
cuando un objeto debe mostrarse como texto (como enHTML
) o cuando un objeto debe usarse como una cadena . Normalmente, no lo usarías en tu propio código.JavaScript
toString()
MDN
toString()
El método devuelve una cadena que representa el objeto. Este método está destinado a anular (personalizar) la lógica de conversiones de tipos para objetos de clase derivados .
rebanada
w3escuela
slice
El método devuelve los elementos seleccionados en la matriz con un nuevo objeto de matriz.
slice
El método seleccionastart
elementos que comienzan y terminan en elend
argumento dado, pero sin incluirlo.
slice
El método no altera la matriz original.
MDN
slice
El método devuelve un nuevo objeto de matriz, que es una copia superficial de la matriz original determinada por y, inclusivestart
, excluyendo , donde y representa el índice del elemento de la matriz. La matriz original no se cambiará.end
start
end
start
end