jQuery语句中的三元运算符

Question

I'm new to Javascript, CSS, HTML, and jQuery, and came across this line of code that uses the condition ? if true : if false condition ? if true : if false statement, and I'm trying to understand it. What would it's equivalent if() {} else {} statement look like? This is the line of code:

$('.app-container').css('background', this.background ? `url(${this.background.get('Href')})` : `url(${DefaultImage.Background}`);

Thanks for any explanation :)

Answer 1

You need to expand the second parameter that was passed to url() to an if , else as that is evaluated first:

if (this.background)
    bgurl = `url(${this.background.get('Href')})`
else 
    bgurl = `url(${DefaultImage.Background})`

$('.app-container').css('background', bgurl);

Answer 2

If you're looking for exactly what this would look like with a traditional if-else :

if (this.background)
    $('.app-container').css('background', `url(${this.background.get('Href')})`);
else
    $('.app-container').css('background',`url(${DefaultImage.Background}`);

In javascript the ternary operator follows this basic premise:

(condition) ? (what will happen if condition evaluates to true) : (what will happen if condition evaluates to false)

Sometimes they can be difficult to decipher but in the right situation (like this one) they can save you from writing 'extra' code.