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仿PS里的羽化效果代码
Dec 20 Javascript
jQuery实现动画效果circle实例
Aug 06 Javascript
Node.js实现数据推送
Apr 14 Javascript
JQuery Mobile 弹出式登录框的实现方法
May 28 Javascript
JavaScript生成图形验证码
Aug 24 Javascript
把JavaScript代码改成ES6语法不完全指南(分享)
Sep 10 Javascript
关于Google发布的JavaScript代码规范你要知道哪些
Apr 04 Javascript
刷新页面后让控制台的js代码继续执行
Sep 20 Javascript
JavaScript检测是否开启了控制台(F12调试工具)
Oct 02 Javascript
uniapp实现横向滚动选择日期
Oct 21 Javascript
keep-alive保持组件状态的方法
Dec 02 Javascript
html实现随机点名器的示例代码
Apr 02 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
是否存在第一台收音机的说法
2021/03/01 无线电
利用ThinkPHP内置的ThinkAjax实现异步传输技术的实现方法
2011/12/19 PHP
php版淘宝网查询商品接口代码示例
2014/06/17 PHP
PHP实现的oracle分页函数实例
2016/01/25 PHP
TP5.0框架实现无限极回复功能的方法分析
2019/05/04 PHP
js调试工具 Javascript Debug Toolkit 2.0.0版本发布
2008/12/02 Javascript
为原生js Array增加each方法
2012/04/07 Javascript
jQuery插件slick实现响应式移动端幻灯片图片切换特效
2015/04/12 Javascript
JavaScript基于ajax编辑信息用法实例
2015/07/15 Javascript
快速学习JavaScript的6个思维技巧
2015/10/13 Javascript
使用postMesssage()实现iframe跨域页面间的信息传递
2016/03/29 Javascript
jQuery UI结合Ajax创建可定制的Web界面
2016/06/22 Javascript
Bootstrap栅格系统学习笔记
2016/11/25 Javascript
微信小程序 简单DEMO布局,逻辑,样式的练习
2016/11/30 Javascript
Bootstrap table两种分页示例
2016/12/23 Javascript
零基础轻松学JavaScript闭包
2016/12/30 Javascript
原生JavaScript实现Tooltip浮动提示框特效
2017/03/07 Javascript
微信小程序 仿美团分类菜单 swiper分类菜单
2017/04/12 Javascript
常用的 JS 排序算法 整理版
2018/04/05 Javascript
JavaScript实现的简单Tab点击切换功能示例
2018/07/06 Javascript
vue获取元素宽、高、距离左边距离,右,上距离等还有XY坐标轴的方法
2018/09/05 Javascript
python单链表实现代码实例
2013/11/21 Python
浅谈编码,解码,乱码的问题
2016/12/30 Python
Python三种遍历文件目录的方法实例代码
2018/01/19 Python
python程序控制NAO机器人行走
2019/04/29 Python
关于pytorch中网络loss传播和参数更新的理解
2019/08/20 Python
详解基于python的多张不同宽高图片拼接成大图
2019/09/26 Python
天游软件面试
2013/11/23 面试题
女大学生毕业找工作的自我评价
2013/10/03 职场文书
采购内勤岗位职责
2013/12/10 职场文书
小学生班会演讲稿
2014/01/09 职场文书
学期自我评价
2014/01/27 职场文书
考试没考好检讨书
2014/01/31 职场文书
公司保密承诺书
2014/03/27 职场文书
QQ空间主人寄语大全
2014/04/12 职场文书
安娜卡列尼娜观后感
2015/06/11 职场文书