Javascript 嵌套模板字符串/文字错误：缺少}

我试图使用从DOM中提取的信息创建导航栏，但我不断得到一个与ES6模板字符串（在本例中嵌套）相关的错误，该字符串在模板表达式中读取“Uncaught SyntaxError:Missing}”

我对ES6语法相当陌生。有什么建议吗

函数makeNavList（）{
var myList=`；
$（“#superfish-1>li”）。每个（函数（索引、值）{
myList+=`



${
让collapselist=（）=>{
让innerlist=“”；
$（“#superfish-1>li.ul>li”）。每个（函数（索引、值）{
让linkPath=$（值）.find（“a”）.attr（“href”）；
让linkText=$（值）.find（“a”）.text（）；
innerlist+=`

`
})
返回内部列表；
}
}
`
})
返回myList
}

将函数移到模板之外。不能在

${}

中声明语句：

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;
}

函数makeNavList（）{
var myList=`；
$（“#superfish-1>li”）。每个（函数（索引、值）{
myList+=`



${getCollapselist（）}
`
})
返回myList
}
getCollapselist=函数（）{
让innerlist=“”；
$（“#superfish-1>li.ul>li”）。每个（函数（索引、值）{
让linkPath=$（值）.find（“a”）.attr（“href”）；
让linkText=$（值）.find（“a”）.text（）；
innerlist+=`

`
})
返回内部列表；
}

模板文本中标记占位符的内容必须是表达式，但您正试图使用语句（

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;
};

---

…在模板文本中。

如果您有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
}

const makeNavList=（）=>{
让myList=''；
常量collapseList=（）=>{
让innerList=''；
$（“#superfish-1>li.ul>li”）。每个（值=>{
常量链接路径=$（值）.find（“a”）.attr（“href”）；
const linkText=$（值）.find（“a”）.text（）；
innerList+=`
`
});
返回内部列表；
}
$（“#superfish-1>li”）。每个（值=>{
myList+=`



${`${collapseList（）}`}

`
})
返回myList
}

我不知道ES6，但您确定您的电脑在什么地方丢失了一个

}

？从错误中似乎可以看出这一点。您不能在

${}

${}

中声明变量，因为它只能包含表达式，而不能包含语句。您试图在模板中执行的操作太多了。将其移到函数中，并让文本调用该函数。即使这是一个单一的、有效的表达，为了理智起见，它仍然太多了。是的！将函数声明移到模板文本之外就成功了！虽然也许我们应该被允许在上面发表声明。。

${collapelist}

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
}