关于使用模板字符串导致的一个bug

关于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>

随机推荐

webpack相关知识
能够处理JS文件的互相依赖关系能够处理JS的兼容问题安装全局安装 npm install webpack -g 项目安装 npm install webpack --save-
Javascript基础和ES6
HTML的基础事件 onmouseover、onmouseout表示JS事件的鼠标移入鼠标移出 document.getElementById('id') JS中选择HTML的ID元素<in
JavaScript编码规则
JavaScript编码规则目的：改善协作编码、代码质量。 var 声明变量必须用var。防止变量变为全局变量，污染全局环境。常量基本类型number、string、boolean是常量值。对
JavaScript获取和设置CSS属性
获取样式元素对象的宽高位置距离等属性如offsetWidht、cilentWidht、scrollWidth…… let oWidth=obj.offsetWidth; 注意：只能获取属
javascript作用域、上下文、this和闭包详解
词法作用域lexical scope 定义在词法阶段的作用域。词法作用域是变量和语句块在定义时所处的位置决定的。全局块级：在{}之内是一个块级作用域（ES6之前没有块级作用于只有函数内的局部作用

技术文档网

关于使用模板字符串导致的一个bug

关于bug

说明

相关文章

随机推荐