zoukankan      html  css  js  c++  java
  • js es6 模板字符

    前言

    es的模板字符,也就是定义了块的概念。

    模板字符的二个条件:

    1.必须在``中,这个`不是单引号而是反单引号,是tab的上面一个。

    2.在#{}中,这个就有点意思了,里面不像后台的块级,在这里不可以去命名,只能是一个输出块,可以理解为一行语句 retrun {此处是要编译的代码}。

    正文

    来感受一下:

    <script>
    	  //调用了map方法,返回一个数组,后调用join将数组内的item用空字符连接起来,然后构成了一个字符串  //对<>进行转义   //对<>进行转义
    	const temp1 = addrs => `
    	  <table>
    	  ${addrs.map(addr=>`<tr><td>
    	  ${zhuanyi(addr.first)}</td><td>
    	  ${zhuanyi(addr.last)}</td></tr>`
    	 ).join('')
    	}
    	</table>`
    	//一个json数组
    	const data = [{
    		first: '<Jame>',
    		last: 'Bond'
    	}, {
    		first: 'Lars',
    		last: '<Croft>'
    	}];
    	// 转义方法
    	function zhuanyi(str) {
    		let newstr = "";
    		for (var i in str) {
    			if (str[i] == "<") {
    				newstr += "&lt;";
    				continue;
    			}
    			else if(str[i] == ">") {
    				newstr += "&gt;";
    				continue;
    			}
    			newstr += str[i];
    		}
    		return newstr;
    	};
    	// 将生成的table加入到tableinsert中
    	$(function () {
    		$('#tableinsert').append($(temp1(data)));
    	});
    </script>
    </head>
    
    <body>
    <div id="tableinsert"></div>
    </body>
    

    上述中我使用了``,在内部我可以随意使用${} 进行字符串的嵌入。

    效果:

  • 相关阅读:
    debounce防抖和throttle节流
    vue 全局路由守卫,系统未登录时自动跳转到登录页面
    vue中使用animate动画库
    nodejs搭建本地静态服务器
    echart4.9 实现map地图
    vue中如何使用echarts
    http状态码返回415问题
    lodash 常用方法整理
    氦图面试题目Boolean search
    Mac 去掉文件属性@
  • 原文地址:https://www.cnblogs.com/aoximin/p/13171559.html
Copyright © 2011-2022 走看看