Been trying to add a conditionals inside a template strings. I am unable to do it. I have two strings say t1 and t2, and when t2 is undefined or empty just display t1 and when t2 is present append that t2 inside parentheses along with t1

let t1= "hey";
let t2 = "there";
//need the output something like hey(there) when there t2 is present. when it is null or undefined or empty just show hey 

//Have tried the below but it is not working
console.log(`${t2} ${t1} ? ${t1}(${t2}): ${t1}`)

Been trying to add a conditionals inside a template strings. I am unable to do it. I have two strings say t1 and t2, and when t2 is undefined or empty just display t1 and when t2 is present append that t2 inside parentheses along with t1

let t1= "hey";
let t2 = "there";
//need the output something like hey(there) when there t2 is present. when it is null or undefined or empty just show hey 

//Have tried the below but it is not working
console.log(`${t2} ${t1} ? ${t1}(${t2}): ${t1}`)

• javascript
• ecmascript-6
• template-literals

6 Answers 6

The ternary should be done inside of the ${} expression as follows:

let t1 = "hey";
let t2 = "there";
console.log(`${t1}${t2 ? `(${t2})` : ''}`);

An explanation of the code above is as follows:

1. Since you've specified that the prefix "hey" should be specified regardless of whether you've defined t2 or not, there's no need to include it in the ternary expression.

2. The next part of the code is an inlined ternary operator that checks if t2 is truthy.

   • If it is truthy, the first part of the ternary operator is executed. In other words, the ternary operator will return (${t2}). And since this is another template literal, this will be evaluated with the substitution of the t2 variable into the template expression.
   • If it isn't truthy, the second part of the ternary operator is executed, which is an empty string.

Note that you can have template literals inside template literals. See the Template Literals documentation on MDN for more info.

Expression can only be written inside {} when using string literals. You need to use nested template strings here

let t1= "hey";
let t2 = "there";
console.log(`${t1}${t2 ? `(${t2})` : ''}`)

Two solutions:

let t1= "hey";
let t2 = "there";
//need the output something like hey(there) when there t2 is present. when it is null or undefined or empty just show hey 

//Have tried the below but it is not working
console.log(t2 ? `${t1} (${t2})`: `(${t1})`)
console.log(`${t1} ${t2 && `(${t2})`}`)


t1= "hey";
t2 = "";

console.log(t2 ? `${t1} (${t2})`: `${t1}`)
console.log(`${t1} ${t2 && `(${t2})`}`)

If you are just checking for the falsy value of your variable (null ,undefined, false, ...) you can use the below code:

console.log(`${t2 ? `${t1}(${t2})` : `${t1}`}`)

This will check for the empty value of t2.

If you want to check for being defined of the variable, you can use this one:

console.log(`${typeof t2 !== 'undefined' ? `${t1}(${t2})` : `${t1}`}`)

let t1= "hey";
let t2 = "there";

console.log(`${t1}${t2 ? `(${t2})` : ''}`)

t2 = null;

console.log(`${t1}${t2 ? `(${t2})` : ''}`)

So in your code, what happened is, the ternary operators where also part of the string, try the below code.

let t1= "hey";
let t2 = "";

console.log(t2 ? `${t1}(${t2})` : t1)