[英]Suppress rendering of html from template-literals within another template-literal
[英]Getting weird error when concatenating template-literals
我正在尝试构建一个javascript脚本,它将我的标题放到我的html页面上,所以当我进行更改时,我不必更新每个页面。 我了解到模板文字可以在变量中保存html代码,所以我开始使用它。 但是,当我使用三元运算符时,我在VS Code中弹出错误。 它说我错过了a)。
我检查了整个模板文字是否有任何缺失的括号。
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>`;
输出应该只是一个我可以插入到文档中的字符串。 任何帮助,将不胜感激。
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.
虽然这已经得到了回答,(缺少嵌套三元组的圆形括号)我觉得你可能会发现使用字符串插值和模板文字有益。 通过这样做,您可以删除字符串内的所有连接(这是使用模板文字而不是常规字符串的主要优点之一)。
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);
这不是模板字符串在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>`;
希望这有用。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.