Как написать шаблонную строку, если есть теги и тернарное выражение?

178

03 февраля 2021, 03:20

Вот рабочий пример, но вдруг вздумалось написать покороче и заодно "пощупать" шаблонные строки.

somediv.innerHTML = (resp.length == 0)
? `<p><b>Файлов загружено: ${resp.length} </b></p>` 
: `<p><b>Файлов загружено: ${resp.length} </b></p>
<ul id="files"></ul><br>
<button class="padding-5" id="del">Удалить файлы</button>`

Нерабочий пример:

somediv.innerHTML = `<p><b>Файлов загружено: ${resp.length == 0}
? '0</b></p>'
: ${resp.length}
<ul id="files"></ul><br>
<button class="padding-5" id="del">Удалить файлы</button>`

ul и button появляются только когда файлы есть, то есть, resp.length != 0, а фраза "Файлов загружено" есть в любом случае. Спасибо!

Answer 1

Вы там пробуете использовать ${значение} одновременно как (условие) ? ... потому и не работает) Если скопировать ваш код сюда → https://jsfiddle.net/ , можно убедиться, что он вообще является просто строкой в этом коде, и в принципе не мог бы сработать как код. Или, надо было так: ${ (условие) ? ... : ... } — весь тернарный внутри ${...} но в таких случаях краткость не всегда считается крутым. Это может просто лишний раз запутать код)

У строк есть такая фишка, их можно 'клеить' через плюс:

var bu = 'bubu'; 
 
console.log( 'строка-1' + ", " + `строка ${bu}-2 — ` + bu ) 
 
//(можно добавить и переменную. Уже без кавычек) 
/* Т.е.  
`строка ${bu}-1` 
  
  то же самое, что и      
 
'строка ' + bu + '-1'      
*/

Поэтому, всё что и так должно отображаться, оставляем как есть, + добавляем или пустую строку, или нужный кусок кода - уже в зависимости от условия, так:

let x = (resp.length == 0) ? "" : `<ul id="files"></ul><br><button class="padding-5" id="del">Удалить файлы</button>`;
somediv.innerHTML = `<p><b>Файлов загружено: ${resp.length} </b></p>` + x;

*Ну можно и без переменной, просто в одну строчку. Но так легче вникать))