es6模板字符串

最新推荐文章于 2025-06-29 23:37:44 发布

百味苦

最新推荐文章于 2025-06-29 23:37:44 发布

阅读量872

点赞数

CC 4.0 BY-SA版权

分类专栏： es6 文章标签： es6模板字符串

本文链接：https://blog.youkuaiyun.com/qq_38026437/article/details/87712236

es6 专栏收录该内容

3 篇文章

订阅专栏

这篇博客介绍了ES6的模板字符串特性，指出其相比传统字符串连接方式更节省时间，且在模板字符串中可以方便地进行变量插入、运算和函数调用。通过示例展示了如何使用模板字符串进行条件判断和函数调用，强调了接触这一特性虽晚但带来的便利性。

才接触es6发现，可能已经很晚了，但是接触之后才发现真的好用很多。

说说字符串模板吧。

之前js的字符串基本都是用

str += '<div class="listdivcss" >'+
'<div class="flex1" onclick="gomemberinfo('+memberslist[i].id+')"><div class="left">'+
'<img class="border50" src="'+memberslist[i].headimg+'"/>'+
'</div><div class="right"><div id="">'+
memberslist[i].username+'  |  '+ memberslist[i].card_number+
'</div><div id="" class="fe08">'+
'补水年卡    消费时间 2018-12-01'+
'</div><div id="" class="fe08">'+
'余额：0.00元 '+
'<span>积分：100</span></div></div></div>'+
'<div class="mui-input-row mui-checkbox checklist"><label></label>'+
'<input name="Checkbox" type="checkbox" class="listcheckbox" onchange="setcheckbox(this)"></div></div>';

之类的大量' '+来链接字符串，如果碰到了单个字段需要判断的还得重新写判断再次拼接，实在是有点麻烦。

刚刚发现es6的模板字符串，可以直接用 ` ` 将字符串直接包起来，里面的变量可以直接用 ${变量} 来表示

节省了很多分段时间，

str += `<div class="listdivcss">
<div class="flex1" onclick="gomemberinfo( ${memberslist[i].id} )"><div class="left">
<img class="border50" src="
${memberslist[i].headimg.length>37?memberslist[i].headimg:"../images/user-photo.png"}
"/></div><div class="right"><div id="">
${memberslist[i].username}  |  ${memberslist[i].card_number}
</div><div id="" class="fe08">
补水年卡    消费时间 2018-12-01
</div><div id="" class="fe08">
余额：0.00元 
<span>积分：100</span></div></div></div>
<div class="mui-input-row mui-checkbox checklist"><label></label>
<input name="Checkbox" type="checkbox" class="listcheckbox" onchange="setcheckbox(this)"></div></div>`

比起之前看起来是好很多

而且在${ }里面还可以运算和调用函数，更加方便

例子：

let nums = 10
console.log(`${nums>10?nums:1}`);

结果：1

let n2 = 10;
               console.log(`${setn2()}`);
               function setn2(){
                   return ++n2
               }

结果：11

可惜我接触的有点晚了，代码还是要多用