ternario - Precedente del operador con el operador de Javascript Ternary

ternary operator php

Question

No puedo entender la primera parte de este código (+ =) en combinación con el operador ternario.

h.className += h.className ? '' error'' : ''error''

La forma en que creo que funciona este código es la siguiente:

h.className = h.className + h.className ? '' error'' : ''error''

Pero eso no es correcto porque eso da un error en mi consola.

Entonces mi pregunta es ¿cómo debería interconectar este código correctamente?

Answer 1

El += hace lo que quiere, pero en la declaración ternaria a la derecha del mismo, comprueba si h.className es falsey, lo que sería si no estuviera definido. Si es cierto (es decir, si ya se ha especificado un nombre de clase), se agrega el error con un espacio (es decir, se agrega una nueva clase); de lo contrario, se agrega sin espacio.

El código podría reescribirse como sugiera, pero debe especificar que h.className se utilizará para la comparación de la h.className , en lugar de usar su valor real, en el operador ternario, así que asegúrese de no molestarse con el concatenación de valores al mismo tiempo que hace su operación ternaria:

h.className = h.className + (h.className ? '' error'' : ''error'');

Answer 2

El lado derecho del operador = se evalúa de izquierda a derecha. Asi que,

g.className = h.className + h.className ? '' error'' : ''error'';`

es equivalente a

h.className = (h.className + h.className) ? '' error'' : ''error'';

Para ser equivalente a

h.className += h.className ? '' error'' : ''error'';

tienes que separar la declaración ternaria entre paréntesis

h.className = h.className + (h.className ? '' error'' : ''error'');

Answer 3

Me gustaría elegir la explicación de wayne:

<variable> = <expression> ? <true clause> : <false clause>

Consideremos ambos casos:

case 1:
h.className += h.className ? ''true'' : ''false''     

• el operador de asignación funciona bien y el valor se agrega
• cuando se ejecuta por primera vez, o / p: falso
• 2da vez o / p: falsetrue - los valores siguen agregándose

case2: h.className = h.className + h.className? ''verdadero Falso''

• el resultado no es el mismo que en el caso 1
• cuando se ejecuta por primera vez, o / p: falso
• 2da vez o / p: false - values ​​no se sigue añadiendo

explanation

En el código anterior, el caso 1 funciona bien

que caso2:

h.className = h.className + h.className ? ''true'' : ''false''
is executed as 
 h.className = (h.className + h.className) ? ''true'' : ''false''

h.className + h.className => considerado como expresión para operador ternario ya que el operador ternario tiene mayor prioridad. por lo tanto, siempre el resultado de la expresión ternaria se acaba de asignar

Necesita definir la precedencia mediante el uso de corchetes

Debe definir el orden de evaluación que se considerará con la ayuda de corchetes para que el caso 2 funcione como caso 1

h.className = h.className + (h.className ? '' error'' : ''error'') 

Answer 4

Piénsalo de esta manera:

<variable> = <expression> ? <true clause> : <false clause>

La forma en que se ejecuta la declaración es básicamente la siguiente:

1. ¿ <expression> evalúa como verdadero, o se evalúa como falso?
2. Si <expression> evalúa como verdadero, entonces el valor de <true clause> se asigna a <variable> , <false clause> se ignora y se ejecuta la siguiente instrucción.
3. Si <expression> evalúa como falso, entonces se ignora <true clause> y el valor de <false clause> se asigna a <variable> .

Lo importante para darse cuenta con el operador ternario en este y otros lenguajes es que cualquier código que esté en <expression> debería producir un resultado booleano cuando se evalúa: verdadero o falso.

En el caso de su ejemplo, reemplace "asignado a" en mi explicación con "agregado a", o similar para cualquier aritmética de taquigrafía que esté usando, si corresponde.

Answer 5

Sé que esta es una pregunta muy antigua, pero no estoy 100% satisfecho con ninguna de las respuestas ya que todas parecen incompletas. Así que aquí vamos nuevamente desde los primeros directores:

El objetivo general del usuario:

Resumiendo el código: "Deseo agregar un nombre de clase de error a una cadena, opcionalmente con un espacio inicial si ya hay nombres de clase en la cadena".

La solución más simple

Como señaló Kobi, hace 5 años, tener un espacio líder en nombres de clase no causaría ningún problema con ningún navegador conocido, por lo que la solución correcta más corta sería en realidad:

h.className += '' error'';

Esa debería haber sido la respuesta real al problema real .

Sea como fuere, las preguntas fueron ...

1) ¿Por qué funcionó esto?

h.className += h.className ? '' error'' : ''error''

El operador condicional / ternario funciona como una instrucción if, que asigna el resultado de sus rutas true o false a una variable.

Entonces ese código funcionó porque se evalúa simplemente como:

if (h.className IS NOT null AND IS NOT undefined AND IS NOT '''') 
    h.className += '' error''
else
    h.className += ''error''

2) y por qué se rompió esto?

h.className = h.className + h.className ? '' error'' : ''error''

La pregunta dice "que da un [n] error en mi consola", lo que puede inducir a error al pensar que el código no funciona . De hecho, se ejecuta el siguiente código, sin error , pero simplemente devuelve ''error'' si la cadena no estaba vacía y ''error'' si la cadena estaba vacía y no cumplía con los requisitos .

Ese código siempre da como resultado una cadena que contiene solo '' error'' o ''error'' porque evalúa a este pseudo código:

if ((h.className + h.className) IS NOT null AND IS NOT undefined AND IS NOT '''')
    h.className = '' error''
else
    h.className = ''error''

La razón para esto es que el operador de suma ( + a la gente común) tiene mayor "precedencia" (6) que el operador condicional / ternario (15). Sé que los números aparecen al revés

La precedencia simplemente significa que cada tipo de operador en un idioma se evalúa en un orden predefinido particular (y no solo de izquierda a derecha).

Referencia: precedencia del operador de Javascript

Cómo cambiar el orden de evaluación:

Ahora sabemos por qué falla, necesita saber cómo hacerlo funcionar.

Algunas otras respuestas hablan sobre cambiar la precedencia , pero no se puede . La precedencia está integrada en el lenguaje. Eso es solo un conjunto fijo de reglas ... Sin embargo, puede cambiar el orden de evaluación ...

La herramienta en nuestra caja de herramientas que puede cambiar el orden de evaluación es el operador de agrupamiento (también conocido como corchetes). Lo hace asegurando que las expresiones en los corchetes se evalúan antes de las operaciones fuera de los corchetes. Eso es todo lo que hacen, pero eso es suficiente.

Los corchetes funcionan simplemente porque ellos (los operadores de agrupación) tienen mayor prioridad que todos los demás operadores ("ahora hay un nivel 0").

Con solo agregar corchetes, cambia el orden de evaluación para garantizar que la prueba condicional se realice primero, antes de la concatenación de cadena simple:

h.className = h.className + (h.className ? '' error'' : ''error'')

Ahora dejaré que esta respuesta se oxide sin ser vista entre los demás :)

Answer 6

h.className = h.className + (h.className ? '' error'' : ''error'')

Desea que el operador trabaje para h.className , mejor sea específico al respecto.
Por supuesto, ningún daño debería provenir de h.className += '' error'' , pero ese es otro asunto.

Además, tenga en cuenta que + tiene prioridad sobre el operador ternario: Precedencia del operador de JavaScript

Answer 7

if (h.className) {
    h.className = h.className + '' error'';
} else {
    h.className = h.className + ''error'';
}

debería ser equivalente a:

h.className += h.className ? '' error'' : ''error'';