关于使用模板字符串导致的一个bug - pod4g/tool GitHub Wiki

关于bug

在开发调调值得买活动页时，发现一个bug “直达链接”按钮里的文本跑出了a标签外

用的是ES6语法，代码如下：

$(`<section class="drawer-box">
       <a class="through-link" href="javascript:void(0);" data-href=${buylink}>直达链接</a>
       <section class="code-area">
           <ul class="code-list">
                ${ code.map( c => '<li>' + c + '</li>' ).join('') }
           </ul>
       </section>
  </section>`).appendTo($('.banner-info'));

babel编译出来的ES5代码如下：

 $('<section class="drawer-box">\n       <a class="through-link" href="javascript:void(0);" data-href=' + buylink + '>直达链接</a>\n       <section class="code-area">\n           <ul class="code-list">\n                ' + code.map(function (c) {
            return '<li>' + c + '</li>';
        }).join('') + '\n           </ul>\n       </section>\n  </section>').appendTo($('.banner-info'));

可以看到，babel编译好之后，换行被用\n替换掉了，空格原样输出。

起先以为是\n和空格引起的，去掉之后，问题还是存在。

经过仔细排查，原来是

<a class="through-link" href="javascript:void(0);" data-href=${buylink}>直达链接</a>

这行代码中的data-href有问题，

改为

<a class="through-link" href="javascript:void(0);" data-href="${buylink}">直达链接</a>

就好了

说明

babel编译之后，字符串是用''来括住的

有一个技巧要记住：外面原先是用什么括起来的，用${expression}之后，还是用什么括起来。

例如：

 /* 例子一 */
 let prop  = 'id';
 let sql   = `select  ${prop}  from video_table`;   // select  id  from video_table
 let sql2  = `select "${prop}" from video_table`;   // select "id" from video_table
 let sql3  = `select '${prop}' from video_table`;   // select 'id' from video_table


 /* 例子二 */
 let href = 'http://www.diaox2.com';
 let a    = `<a href="${href}">调调</a>`; // <a href="http://www.diaox2.com">调调</a>
 // 这种写法有问题。没有用（双）引号括起来。
 let a2   = `<a href=${href}>调调</a>`;   // <a href=http://www.diaox2.com>调调</a>



 /* 例子三 */
 let show = 'style="display:none;"';
 let s    = `<section ${show}></section>`;   // <section style="display:none;"></section>;
 // 下面2中写法是错误的。不应该在外面用引号括起来
 let s2   = `<section "${show}"></section>`; // <section "style="display:none;""></section>
 let s3   = `<section '${show}'></section>`; // <section 'style="display:none;"'></section>
Add a custom footer
⚠️ **GitHub.com Fallback** ⚠️