Nested Template Strings/Literals Error: Missing }
Nested Template Strings/Literals Error: Missing }
我正在尝试使用从 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
}
将您的函数移到模板之外。您不能在 ${}
:
中声明语句
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;
}
模板文字中标记占位符的内容必须是表达式,但您尝试使用语句( 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}
...在模板文字中。
如果你有 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
}
我正在尝试使用从 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
}
将您的函数移到模板之外。您不能在 ${}
:
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;
}
模板文字中标记占位符的内容必须是表达式,但您尝试使用语句( 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}
...在模板文字中。
如果你有 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
}