Ошибка вложенных строк шаблона / литералов: отсутствует}

Question

Я пытаюсь создать панель навигации, используя информацию, извлеченную из DOM, но я получаю сообщение об ошибке, связанное со строкой шаблона ES6 (вложенной в данном случае), которая гласит "Uncaught SyntaxError: Missing } в выражении шаблона"

Я довольно новичок в синтаксисе ES6. Какие-либо предложения?

function makeNavList() {
var myList = ``;

$("#superfish-1>li").each(function (index, value) {

    myList += `<li>
    <a href="#!">${$(value).find(">a").text()}</a>

    <ul class="nav-dropdown">
    <li><a href="${$(value).find("a").attr("href")}">${$(value).find(">a").text()} - All</a></li>
    ${
        let collapselist= () =>{ 
            let innerlist = "";
            $("#superfish-1>li.ul>li").each(function(index, value){
                let linkPath = $(value).find("a").attr("href");
                let linkText = $(value).find("a").text();
                innerlist += `<li>
                <a href="${linkPath}">${linkText}</a>
                </li>`
            })
            return innerlist;
        }

    }</ul>
    </li>`

})
return myList
}

Answer 1

Переместите свою функцию за пределы шаблона. Вы не можете объявить заявления внутри ${}:

function makeNavList() {
var myList = ``;

$("#superfish-1>li").each(function (index, value) {

    myList += `<li>
    <a href="#!">${$(value).find(">a").text()}</a>

    <ul class="nav-dropdown">
    <li><a href="${$(value).find("a").attr("href")}">${$(value).find(">a").text()} - All</a></li>
    ${getCollapselist()}</ul>
    </li>`

})
return myList
}

getCollapselist = function(){
  let innerlist = "";
  $("#superfish-1>li.ul>li").each(function(index, value){
      let linkPath = $(value).find("a").attr("href");
      let linkText = $(value).find("a").text();
      innerlist += `<li>
      <a href="${linkPath}">${linkText}</a>
      </li>`
  })
  return innerlist;
}

Answer 2

Содержимое заполнителя токена в литерале шаблона должно быть выражением, но вы пытаетесь использовать оператор (let collapselist = ...). Вы не можете сделать это.

Вместо этого лучше всего сначала создать список, а затем вставить его в строку:

let collapselist= () =>{ 
    let innerlist = "";
    $("#superfish-1>li.ul>li").each(function(index, value){
        let linkPath = $(value).find("a").attr("href");
        let linkText = $(value).find("a").text();
        innerlist += `<li>
        <a href="${linkPath}">${linkText}</a>
        </li>`
    })
    return innerlist;
};

затем

${collapelist}

... в шаблоне литерал.

Answer 3

Если у вас есть функции ES6, вам нужно стандартизировать код с помощью новых передовых методов использования функций ES6, например, использования функций со стрелками и т. д. Ваша ошибка заключалась в том, что вы объявили свою функцию внутри {}.

const makeNavList = () => {
    let myList = '';

    const collapseList = () =>{ 
        let innerList = '';
        $("#superfish-1>li.ul>li").each(value => {
            const linkPath = $(value).find("a").attr("href");
            const linkText = $(value).find("a").text();
            innerList += `<li><a href="${linkPath}">${linkText}</a></li>`
        });

        return innerList;
    }

    $("#superfish-1>li").each(value => {

        myList += `<li>
        <a href="#!">${$(value).find(">a").text()}</a>

        <ul class="nav-dropdown">
            <li><a href="${$(value).find("a").attr("href")}">${$(value).find(">a").text()} - All</a></li>
            ${`${collapseList()}`} 
        </ul>
        </li>`

    })

    return myList
}