ES6模板字符串和标签模板的应用实例分析


Posted in Javascript onJune 25, 2019

本文实例讲述了ES6模板字符串和标签模板的应用。分享给大家供大家参考,具体如下:

ES6 中对字符串进行了扩展,而模板字符串就是一个非常实用的方式,可以在html中实现与变量和方法的混编

之前我们手动拼接字符串的方式

let hello = 'Hello';
let html = '<div>' +
 '<span>'+ hello +'</span>' +
 '</div>';
console.log(html); // <div><span>Hello</span></div>

ES6中使用模板字符串来优化了拼接的方式

let name = 'Joh';
let qq = '56655';
function log() {
 return 'Hi there!';
}
let html = `
 <div>
  <ul>
    <li>${ name === 'Joh' ? 'is Joh' : 'not Joh'}</li>
    <li>${qq}</li>
    <li>${log()}</li>
  <ul>
 </div>
`
console.log(html);
/*
// 输出如下html:
<div>
  <ul>
    <li>is Joh</li>
    <li>56655</li>
    <li>Hi there!</li>
  <ul>
</div>
*/

可以看出模板字符串优化了之前拼接字符串的方式,更方便于编程

关于标签模板

未经处理的标签函数与模板字符串的结合,导致模板字符串失效

function tag() {
 return 'tag';
}
let name = "Joh";
var res = tag`hello ${name}`;
console.log(res); // tag

标签函数对模板字符串进行处理, 安全编码的示例:

function safe(strArr) {
 let res = '';
 console.log(arguments);
 for(var i=0, len = strArr.length; i < len; i++) {
  res += strArr[i].replace(/</g, '<').replace(/>/g, '>');
  if(i < arguments.length -1) {
   res += arguments[i + 1];
  }
 }
 return res;
}
let name = 'Joh';
var result = safe`<p>hello ${name}</p>`;
console.log(result); // <p>hello Joh</p>

更多关于JavaScript相关内容可查看本站专题:《javascript面向对象入门教程》、《JavaScript查找算法技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
利用javascript移动div层-javascript 拖动层
Mar 22 Javascript
JavaScript 学习初步 入门教程
Mar 25 Javascript
js中查找最近的共有祖先元素的实现代码
Dec 30 Javascript
javascript中创建对象的几种方法总结
Nov 01 Javascript
JavaScript实现的图像模糊算法代码分享
Apr 22 Javascript
JavaScript 不支持 indexof 该如何解决
Mar 30 Javascript
浅谈JavaScript的自动垃圾收集机制
Dec 15 Javascript
微信小程序 常用工具类详解及实例
Feb 15 Javascript
node koa2实现上传图片并且同步上传到七牛云存储
Jul 31 Javascript
JS继承与闭包及JS实现继承的三种方式
Oct 15 Javascript
jquery实现动态添加附件功能
Oct 23 jQuery
JS实现checkbox互斥(单选)功能示例
May 04 Javascript
基于Node.js搭建hexo博客过程详解
Jun 25 #Javascript
Node.js实现简单的爬取的示例代码
Jun 25 #Javascript
浅谈目前可以使用ES10的5个新特性
Jun 25 #Javascript
vue 移动端注入骨架屏的配置方法
Jun 25 #Javascript
基于vue+axios+lrz.js微信端图片压缩上传方法
Jun 25 #Javascript
新手快速入门微信小程序组件库 iView Weapp
Jun 24 #Javascript
前端Vue项目详解--初始化及导航栏
Jun 24 #Javascript
You might like
关于PHP中的Class的几点个人看法
2006/10/09 PHP
ThinkPHP中Session用法详解
2014/11/29 PHP
PHP递归实现汉诺塔问题的方法示例
2017/11/25 PHP
laravel框架上传图片实现实时预览功能
2019/10/14 PHP
使用PHP开发留言板功能
2019/11/19 PHP
JavaScript 计算图片加载数量的代码
2011/01/01 Javascript
JS 两日期相减,获得天数的小例子(兼容IE,FF)
2013/07/01 Javascript
非常好用的JsonToString 方法 简单实例
2013/07/18 Javascript
基于jquery实现一张图片点击鼠标放大再点缩小
2013/09/29 Javascript
JQuery实现表格动态增加行并对新行添加事件
2014/07/30 Javascript
javascript实现的全国省市县无刷新多级关联菜单效果代码
2016/08/01 Javascript
微信小程序 Audio API详解及实例代码
2016/09/30 Javascript
JavaScript 过滤关键字
2017/03/20 Javascript
详解Angular Reactive Form 表单验证
2017/07/06 Javascript
Angular4编程之表单响应功能示例
2017/12/13 Javascript
vue多级复杂列表展开/折叠及全选/分组全选实现
2018/11/05 Javascript
js实现简单分页导航栏效果
2019/06/28 Javascript
微信小程序顶部导航栏可滑动并选中放大
2019/12/05 Javascript
基于vue实现微博三方登录流程解析
2020/11/04 Javascript
Vant+postcss-pxtorem 实现浏览器适配功能
2021/02/05 Javascript
Python删除指定目录下过期文件的2个脚本分享
2014/04/10 Python
Python实现线程池代码分享
2015/06/21 Python
python实现基于SVM手写数字识别功能
2020/05/27 Python
简单的python协同过滤程序实例代码
2018/01/31 Python
基于python的socket实现单机五子棋到双人对战
2020/03/24 Python
Python之pymysql的使用小结
2019/07/01 Python
selenium如何定位span元素的实现
2021/01/13 Python
快时尚眼镜品牌,全国连锁眼镜店:LOHO眼镜生活
2018/10/08 全球购物
写演讲稿所需要注意的4个条件
2014/01/09 职场文书
女方回门宴答谢词
2014/01/14 职场文书
社会调查研究计划书
2014/05/01 职场文书
超市创业计划书
2014/09/15 职场文书
考试作弊检讨书1000字(5篇)
2014/10/19 职场文书
2015出纳试用期工作总结
2014/12/12 职场文书
优质护理服务心得体会
2016/01/22 职场文书
Python实现生活常识解答机器人
2021/06/28 Python