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

【问题标题】：Nested Template Strings/Literals Error: Missing }嵌套模板字符串/文字错误：缺少 }
【发布时间】：2023-03-22 16:05:02
【问题描述】：

我正在尝试使用从 DOM 中提取的信息制作导航栏，但我不断收到与 ES6 模板字符串（在本例中为嵌套）相关的错误，其内容为 “Uncaught SyntaxError: Missing } in template expression”

我对 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
}

【问题讨论】：

我不知道 ES6，但你确定你在某处缺少 } 吗？似乎从错误中暗示了这一点。
不能在${}中声明变量
${} 只能包含表达式，不能包含语句。
您试图在模板横向做太多事情。将它移出一个函数并让字面量调用该函数。即使那是一个单一的、有效的表达方式，但为了理智，它仍然太过分了。
是的！将函数声明移到模板文字之外就可以了！虽然也许我们应该被允许在那里发表声明.. ????

标签： javascript ecmascript-6 template-literals template-strings

【解决方案1】：

模板文字中标记占位符的内容必须是表达式，但您正在尝试使用语句 (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}

...在模板文字中。

【讨论】：

【解决方案2】：

将您的函数移到模板之外。你不能在${}里面声明语句：

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

【讨论】：

【解决方案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
}

【讨论】：