Question

我正在尝试构建一个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>`;

输出应该只是我可以插入文档中的字符串。任何帮助将不胜感激。

Answer 1

问题所在的是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.

Answer 2

尽管已经回答了这个问题（（缺少嵌套三元组的闭合圆括号），但我觉得使用string interpolation with template literals可能会有所帮助。这样，您可以删除字符串中的所有串联（这是使用模板文字而不是常规字符串的主要优点之一）。

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

Answer 3

这根本不是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>`;

希望这会有所帮助。

串联模板文字时出现奇怪的错误

3 个答案: