Multiline text when using multiple ternary operators in Template literals

Question

I want to create multiline text using multiple ternary operators within a single Template literal.

const toolTipText = `${2 * 5 === 10 ? "The value is same" : ""}
  ${"a" === "b" ? "" : "Different letters"}`;

console.log(toolTipText);

For example, in the code above, I want The value is same in one line & Different letters in the next line. However, they are both in the same line. I am basically trying to add lines on text based on conditions.

How to achieve it?

Answer 1

Try adding \n (the escape sequence for a newline character) after The value is same in the ternary expression. This way, a new line will only show when there are two different lines that need to be shown:

const toolTipText = `${2 * 5 === 10 ? "The value is same\n" : ""}${"a" === "b" ? "" : "Different letters"}`;
console.log(toolTipText);