Получение странной ошибки при объединении литералов шаблона - PullRequest
Новая
       16

Получение странной ошибки при объединении литералов шаблона

3 голосов
/ 27 апреля 2019

Я пытаюсь создать сценарий javascript, который подправит мой заголовок к моей html-странице, чтобы мне не приходилось обновлять каждую из моих страниц при внесении изменений. Я узнал, что литералы шаблонов могут содержать html-код в переменных, поэтому я начал его использовать. Я имею ошибку всплывающего в VS Code, когда я использую троичные операторы как бы то ни было. Там написано, что мне не хватает а).

Я проверил весь шаблонный литерал на наличие недостающих скобок. 

var html = `<div id="branding">
    <h1><span class="btop">JoJo</span> <span class="bbottom">Studios</span></h1>
</div>
<nav>
    <ul>
        <li`+(page=="home" ? ` class="current><a href="#">Home</a>"` : `><a href="../">Home</a>`)+`</li>
        <li`+(page=="games" ? ` class="current"` : ``)+`>
            <div class="dropdown">
                <a href=`+(page=="games" ? `"./"` : (page=="home" ? `"games/"` : `"../games/"`)+`>Games</a>
                <div class="dropdown-content">
                    <a href=`+(page=="games" ? `"` : (page=="home" ? `"games/` : `"../games/`)+`jojobananacatch.html">JoJo Banana Catch</a>
                </div>
            </div>
        </li>
        <li`+(page=="play" ? ` class="current"` : ``)+`><a href=`+(page=="home" ? `"play/"` : `"../play/"`)+`>Play</a></li>
        <li`+(page=="videos" ? ` class="current"` : ``)+`><a href=`+(page=="home" ? `"videos/"` : `"../videos/"`)+`>DevLogs & More</a></li>
        <li`+(page=="about" ? ` class="current"` : ``)+`><a href=`+(page=="home" ? `"about/"` : `"../about/"`)+`>About</a></li>
        <li`+(page=="contact" ? ` class="current"` : ``)+`><a href=`+(page=="home" ? `"contact/"` : `"../contact/"`)+`>Contact</a></li>
        <li`+(page=="account" ? ` class="current"` : ``)+`><a href=`+(page=="home" ? `"account/account.php?account_forward=0"` : `"../account/account.php?account_forward=0"`)+`>Account</a></li>
    </ul>
</nav>`;

Вывод должен быть просто строкой, которую я могу вставить в документ. Любая помощь будет оценена.

Ответы [ 3 ]

4 голосов
/ 27 апреля 2019

Часть внутри класса dropdown заключается в том, что проблема в том, что вы используете, по-видимому, два вложенных тернарных оператора, но есть только одна закрытая скобка.

Изменить 

<a href=`+(page=="games"
           ? `"./"`
           : (page=="home"
              ? `"games/"`
              : `"../games/"`)+`>Games</a>

до 

<a href=`+(page=="games"
           ? `"./"`
           : (page=="home"
              ? `"games/"`
              : `"../games/"`))+`>Games</a>

и то же самое для второго экземпляра.

Кстати, вы также можете напрямую использовать выражения внутри шаблона (в этом весь смысл шаблонов).

Это делается с использованием синтаксиса ${...}, который в некоторых случаях, возможно, легче прочитать, чем закрытие и повторное открытие шаблона. Например: 

let s = "World";
console.log(`Hello, ${s+"."}`)

журналы Hello, World.

2 голосов
/ 27 апреля 2019

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

let page = 'play';
let html = `<div id="branding">
    <h1><span class="btop">JoJo</span> <span class="bbottom">Studios</span></h1>
</div>
<nav>
    <ul>
        <li ${(page==="home" ? `class="current><a href="#">Home</a>"` : `><a href="../">Home</a>`)}</li>
        <li ${(page==="games" ? `class="current"` : ``)}>
        <div class="dropdown">
            <a href=${(page==="games" ? `"./"` : (page==="home" ? `"games/"` : `"../games/"`))}>Games</a>
            <div class="dropdown-content">
                <a href=${(page==="games" ? `"` : (page==="home" ? `"games/` : `"../games/`))}jojobananacatch.html">JoJo Banana Catch</a>
            </div>
        </div>
        </li>
        <li ${(page==="play" ? ` class="current"` : ``)}><a href=${(page==="home" ? `"play/"` : `"../play/"`)}>Play</a></li>
        <li ${(page==="videos" ? ` class="current"` : ``)}><a href=${(page==="home" ? `"videos/"` : `"../videos/"`)}>DevLogs & More</a></li>
        <li ${(page==="about" ? ` class="current"` : ``)}><a href=${(page==="home" ? `"about/"` : `"../about/"`)}>About</a></li>
        <li ${(page==="contact" ? ` class="current"` : ``)}><a href=${(page==="home" ? `"contact/"` : `"../contact/"`)}>Contact</a></li>
        <li ${(page==="account" ? ` class="current"` : ``)}><a href=${(page==="home" ? `"account/account.php?account_forward=0"` : `"../account/account.php?account_forward=0"`)}>Account</a></li>
    </ul>
</nav>`;
console.log(html);
0 голосов
/ 27 апреля 2019

Это не то, как строки шаблона работают вообще в Javascript (ES6>).

Не забывайте, что + на самом деле не объединяет результат и не имеет логического выражения внутри него.Вы должны использовать это ${...}, чтобы окружить ваше выражение js, чтобы их результаты немедленно были преобразованы в строку.

Пример 

var html = `<li ${page=="home" ? '"class="current><a href="#">Home</a>':'<a href="../">Home</a>'}</li>`;

Это то, как вы будете использоватьшаблон строки (вставка логики внутри строк).Также рассмотрите возможность извлечения содержимого, которое вы возвращаете в троице, в свои собственные переменные.Делает для лучшего чтения.

Пример 

const currentPageLink = 'class="current"><a href="#">Home</a>';
const previousPageLink = '<a href="../">Home</a>';

// and then following the example above

const html = `<li ${page==="home" ? currentAnchor: previousPageLink}</li>`;

Надеюсь, это было полезно.

...