javascript - variable - Usar el operador ternario con concatenación de cadenas
operador ternario ts (5)
Precedencia del operador
Todos los operadores tienen lo que se conoce como precedence. Así es como el lenguaje determina el orden de las operaciones . Los operadores con mayor precedencia serán evaluados antes que aquellos con menor precedencia. El orden de las operaciones es lo que permite que las expresiones se ejecuten en el orden correcto.
Por ejemplo,
1 + 2 * 3 == 1 + 6 == 7
porque * tiene una precedencia mayor que + . Sin precedencia, obtendrías
1 + 2 * 3 == 3 * 3 == 9
+ vs. ?:
En JavaScript, el operador + tiene mayor prioridad que el operador ?: Esto significa que la concatenación tendrá lugar antes de que se evalúe la condición en un ternario. Esto puede conducir a algunos resultados extraños.
Nota: la asociatividad y precedencia del operador puede cambiar entre idiomas. Por ejemplo, en JavaScript, el operador ?: Es asociativo correcto pero se deja asociativo en PHP . Estas mismas comparaciones producirán resultados diferentes entre estos idiomas.
var variable, str;
// Equality operators have higher precedence than ?: but lower than +
// so the below expression breaks down like this:
// ("A" + variable) !== undefined ? "B" : ("C" + "D")
// "Aundefined" !== undefined ? "B" : "CD"
// true ? "B" : "CD"
// "B"
str = "A" + variable !== undefined ? "B" : "C" + "D";
console.log(str);
// For the same reason as above, you get a strange result here.
// Here''s how we break it down:
// ("A" + variable) === undefined ? "B" : ("C" + "D")
// "Aundefined" === undefined ? "B" : "CD"
// false ? "B" : "CD"
// "CD"
str = "A" + variable === undefined ? "B" : "C" + "D";
console.log(str);
Este mismo tipo de problema sucederá sin importar cuál es la condición:
// Check for undefined
var animal;
// Expected: "The animal does not exist", actual: undefined
console.log("The animal " + animal === undefined ? "does not exist" : animal);
// Expected: "The animal undefined", actual: "does not exist"
console.log("The animal " + animal !== undefined ? "does not exist" : animal);
// Check for null
animal = null;
// Expected: "The animal does not exist", actual: null
console.log("The animal " + animal === null ? "does not exist" : animal);
// Expected: "The animal null", actual: "does not exist"
console.log("The animal " + animal !== null ? "does not exist" : animal);
// Check for property
animal = {};
// Expected: "This animal doesn''t have a type", actual: undefined
console.log("The animal " + animal.hasOwnProperty(''type'') ? animal.type : "doesn''t have a type");
animal.type = ''is a dog'';
// Expected: "This animal is a dog", actual: "is a dog"
console.log("The animal " + animal.hasOwnProperty(''type'') ? animal.type : "doesn''t have a type");
Solución
Usando estas mismas reglas de precedencia, sabemos que los paréntesis ( ( ... ) ) tienen la precedencia más alta de cualquier otro operador. Al agrupar las operaciones dentro de paréntesis, esas operaciones se evaluarán primero. Esto funciona de forma recursiva, lo que le permite realizar más operaciones de grupo dentro de conjuntos más profundos de paréntesis.
Dado esto, puede escribir sus expresiones ternarias dentro de paréntesis para obtener el resultado deseado.
var animal;
console.log( "The animal " + (animal === undefined ? "does not exist" : animal) );
console.log( "The animal " + (animal !== undefined ? "does not exist" : animal) );
animal = null;
console.log( "The animal " + (animal === null ? "does not exist" : animal) );
console.log("The animal " + (animal !== null ? "does not exist" : animal) );
animal = {};
console.log( "The animal " + (animal.hasOwnProperty(''type'') ? animal.type : "doesn''t have a type") );
animal.type = ''is a dog'';
console.log( "The animal " + (animal.hasOwnProperty(''type'') ? animal.type : "doesn''t have a type") );
En general, es una buena idea ajustar su condición entre paréntesis también. De esta forma obtendrás el valor correcto al generar la condición con operadores de menor precedencia.
// Assignment without parentheses
var x = 0;
console.log( x += 2 ? ''x is 2'' : ''x is not 2'' );
// Assignment with parentheses
x = 0;
console.log( (x += 2) ? ''x is 2'' : ''x is not 2'' );
alert("test: "+(1==2)?''hello'':''world'');
Esto debería mostrarme ''world'' en la pantalla ya que 1 no es igual a 2.
¿Cómo es que alerta ''hello'' ?
Ambas respuestas son correctas, debe agregar paréntesis. Pensé que hablaría brevemente sobre por qué.
alert("test: "+(1==2)?''hello'':''world'');
Cuando el analizador encuentra una declaración, comenzará a descomponerla recursivamente en trozos cada vez más pequeños.
En este caso, lo primero que encuentra es una función: alert . Inmediatamente, el analizador analizará los argumentos de las alert y comenzará a analizarlos individualmente. Esta función solo tiene un argumento, "test: "+(1==2)?''hello'':''world'' , por lo que es un primer paso fácil.
En este nivel, podemos dividir nuestro enunciado en una serie de comparaciones binarias. Los analizadores de Javascript forman pares binarios de izquierda a derecha (cuando el orden de los valores de operación es el mismo). Nuestros candidatos potenciales son "test: " , (1==2) , ''hello'' y ''world'' con operadores + ? y : El analizador primero intentará agregar "test: " y (1==2) . Para hacer esto, primero debe evaluar el enunciado (1==2) (que se evalúa como false ). El operador + causa la concatenación con cadenas y fuerza a todas las variables primitivas a intentar representarse a sí mismas como cadenas también. false evalúa como la cadena "false" creando la declaración "test: false" .
El analizador ahora está listo para evaluar la primera parte del ternario: "test: false"? . En Javascript, todas las cadenas no vacías se evalúan como true , pasan la prueba del operador ternario y seleccionan la primera opción "hello" .
Al arrojar algunos paréntesis adicionales en la declaración original:
alert("test: " + ((1 == 2) ? ''hello'' : ''world''));
Le decimos al analizador que queremos evaluar el operador ternario ANTES de la concatenación.
Con ES6 puedes usar Literales de Plantilla :
alert(`test: ${1 === 2 ? ''hello'' : ''world''}`);
Debe agregar algunos paréntesis adicionales:
alert("test: " + ((1 == 2) ? "hello" : "world"));
Intenta envolver tus parens en la operación
alert("test: "+ (1 == 2 ? ''hello'' : ''world''));
demo: http://jsfiddle.net/hunter/K3PKx/
¿Qué está haciendo esto?
alert("test: "+(1==2)?''hello'':''world'');
está evaluando "test: " + (1==2) como true que da como resultado ''hello''