Javascript - Шаблонные литералы - троичная операция

Question

Хорошо, я пытаюсь сделать следующее: у меня есть переменная isVisible, назначенная функции, которая определяет, какой элемент прокручивается при навигации по моей странице. Мне нужно использовать переменную isVisible, чтобы проверить и записать сообщение в зависимости от того, где я нахожусь на странице

Например, isVisible вверху страницы, журнал X, isVisible находится в середине страницы, журнал Y, isVisible внизу страницы, журнал Z.

isVisible - это функция, которая проверяет, где находится trgt на странице.

let isVisible = isScrolledIntoView(trgt);

console.log(`element index ${index} is now ${isVisible ? '"X"': (isVisible ? "Y" : "Z")}`);

Как бы я переставил это, чтобы иметь смысл?

Answer 1

Если вы действительно хотите использовать троичный оператор, вы можете присвоить число / строку для isVisible (который вы, вероятно, затем вызывали бы что-то другое), а не для логического значения, и использовать visible = someNumber/someString в троичный:

const index = 1;
const visible = "bottom";

console.log(`element index ${index} is now ${visible === "top"
  ? '"X"' 
  : visible === "middle"
    ? "Y"
    : "Z"}`
);

Но, похоже, в вашем случае определенно предпочтительнее использовать оператор switch / if в сочетании с числами (или строками, если вы можете дать четкие определения), если вам нужно больше позиций на странице:

const index = 1;
const visible = 3;

switch (visible) {
  case 1:
    console.log( `Element index ${index} is now visible at A` );
    break;

  case 2:
    console.log( `Element index ${index} is now visible at B` );
    break;

  case 3:
    console.log( `Element index ${index} is now visible at C` );
    break;

  case 4:
    console.log( `Element index ${index} is now visible at D` );
    break;

  default:
    console.log( "Element is now in the void" );
    break;
}

Answer 2

let checkStatement = isVisible === id-10 ? `Column with id ${id-10} started to become visible on the page` : isVisible === id-50  ? `Column with id  ${id-50} is now more than 50% visible on the page` : `Column with id ${id-40} is now fully visible on the page`

Измените условия на те, которые подходят вашему вопросу, и все должно быть в порядке