JavaScript: передать условное условие как значение

Question

У меня есть функция, которая находит элементы с помощью jQuery. Затем я беру этот элемент, получаю от него значение и присваиваю его переменной. Однако иногда элемент не существует в документе, и функция возвращает undefined. Это ожидаемо, и если возвращаемый элемент - undefined, тогда присвоенная переменная также должна быть undefined. Поскольку я использую эту функцию для присвоения переменных много раз, я хотел сделать ее аккуратной и в одной строке. Я думал, что использование условных выражений может быть решением, однако это приводит к действительно беспорядочным длинным строкам и необходимости дважды вызывать функцию:

let html = $(response.body);
let language = getRowElementFromText('Language', html) ? getRowElementFromText('Language', html).find('a').text() : undefined;
let pages = getRowElementFromText('Page', html) ? parseInt(getRowElementFromText('Page', html).text()) : undefined;

Можно ли решить эти проблемы и каким-то образом передать условие условное значение, которое будет использоваться в качестве значения? Например, в этом псевдокоде this будет значением условного:

let html = $(response.body);
let language = getRowElementFromText('Language', html) ? this.find('a').text() : undefined;
let pages = getRowElementFromText('Page', html) ? parseInt(this.text()) : undefined;

Если это невозможно, есть ли другой более читаемый способ, которым я могу выполнить sh это в одной строке?

Answer 1

Добавьте следующую функцию к jQuery прототипу. Он получает резервную строку в качестве аргумента и, если элемент не найден, возвращает резервную строку:

$.prototype.getText = function(fallback = undefined) {
  return  this.length > 0 ? this.text() : fallback
}

console.log($("#foo").getText())
console.log($("#bar").getText("If the element does not exists, returns given fallback string"))
console.log(`Fallback string default value is: ${$("#baz").getText()}`)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label id="foo">If the element exists, return its inner text</label>

Использование:

$(selector).getText(fallbackString);

Answer 2

Это / будет с опциональным оператором цепочки , новым в ES2020 (доступным через транспиляцию сегодня). код будет выглядеть так (это помогает только с parseInt cas):

let language = getRowElementFromText('Language', html)?.find('a').text();
// −−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−^
let pageText = getRowElementFromText('Page', html)?.text();
// −−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−^
let pages = pageText ? parseInt(pageText) : undefined;

language будет undefined, если элемент не найден.

Если вы не можете его использовать (потому что в ваших целевых средах его еще нет и вы не транспилируете), вы можете передать функцию, которую getRowElementFromText вызовет, если элемент будет найден:

let html = $(response.body);
let language = getRowElementFromText('Language', html, el => el.find('a').text());
let pages = getRowElementFromText('Page', html, el => parseInt(el.text()));

getRowElementFromText будет выглядеть так:

function getRowElementFromText(text, html, callback) {
    const result = /*...existing logic...*/;
    return result === undefined ? undefined : callback(result);
}

Или, возможно, так (callback необязательно):

function getRowElementFromText(text, html, callback) {
    const result = /*...existing logic...*/;
    return !callback || result === undefined ? result : callback(result);
}

Примечание: В приведенном выше примере я предполагаю, что getRowElementFromText действительно возвращает undefined в некоторых случаях («не найдено»), а в других случаях возвращает объект jQuery (найдено) . Я отмечаю это, потому что, если он всегда возвращает объект jQuery (который может быть пустым), объекты jQuery никогда не являются ложными (даже пустыми).