使用带有字符串连接的三元运算符

时间:2012-10-11 20:20:25

标签: javascript

alert("test: "+(1==2)?'hello':'world');

这应该在屏幕上显示'world',因为1不等于2。

为什么会提醒'hello'

5 个答案:

答案 0 :(得分:70)

尝试围绕手术包装你的父母

alert("test: "+ (1 == 2 ? 'hello' : 'world'));

演示:http://jsfiddle.net/hunter/K3PKx/


这是做什么的:

alert("test: "+(1==2)?'hello':'world');

正在评估"test: " + (1==2)true,其输出'hello'

答案 1 :(得分:16)

两个提交的答案都是正确的,您需要添加括号。我想我会简要谈谈为什么。

alert("test: "+(1==2)?'hello':'world');

当解析器遇到一个语句时,它会以递归的方式开始分解为越来越小的块。

在这种情况下,它遇到的第一件事是一个函数:alert。解析器会立即查看alert的参数,并开始逐个解析每个参数。此函数只有一个参数"test: "+(1==2)?'hello':'world',这使其成为第一步。

在这个级别,我们可以将我们的陈述分解为一系列二进制比较。 Javascript解析器从左到右形成二进制对(当操作值的顺序相同时)。我们的潜在候选人是"test: "(1==2)'hello''world',其中包含运营商+?:。解析器将首先尝试添加"test: "(1==2)。为此,必须首先评估语句(1==2)(评估为false)。 +运算符会导致与字符串串联,并强制所有原始变量尝试将自己表示为字符串。 false评估为创建语句"false"的字符串"test: false"

现在,解析器已准备好评估三元组的第一部分:"test: false"?。在Javascript中,所有非空字符串都会计算为true,通过三元运算符的测试并选择第一个选项"hello"

在原始陈述中加入一些额外的括号:

alert("test: " + ((1 == 2) ? 'hello' : 'world'));

我们告诉解析器我们要评估三元运算符BEFORE连接。

答案 2 :(得分:4)

运营商优先顺序

所有运营商都称之为precedence.这就是语言决定order of operations的方式。优先级较高的运算符将在优先级较低的运算符之前进行求值。操作顺序允许表达式以正确的顺序执行。

例如,

1 + 2 * 3 == 1 + 6 == 7

因为*的优先级高于+。没有优先权,你会得到

1 + 2 * 3 == 3 * 3 == 9

+?:

在JavaScript中,+ operator has higher precedence than the ?: operator.这意味着连接将在评估三元中的条件之前发生。这可能会导致一些奇怪的结果。

注意:运算符关联性和优先级可以在不同语言之间更改。例如,在JavaScript中,?:运算符是右关联的,但它是left associative in PHP。这些相同的比较将在这些语言之间产生不同的结果。



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);




无论条件是什么,都会发生同样的问题:



// 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");




解决方案

使用这些相同的优先级规则,我们知道括号(( ... ))具有任何其他运算符的最高优先级。通过对括号内的操作进行分组,将首先评估这些操作。这是递归工作的,允许您在更深的括号内进一步分组操作。

鉴于此,您可以在括号内编写三元表达式以获得所需的结果。



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") );




一般来说,将条件包装在括号中也是一个好主意。这样,在使用较低优先级的运算符生成条件时,您将获得正确的值。



// 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' );




答案 3 :(得分:3)

您需要添加一些额外的括号:

alert("test: " + ((1 == 2) ? "hello" : "world"));

答案 4 :(得分:0)

使用ES6,您可以使用Template Literals

alert(`test: ${1 === 2 ? 'hello' : 'world'}`);