码迷,mamicode.com
首页 > Web开发 > 详细

js es6 模板字符

时间:2020-06-21 11:45:48      阅读:54      评论:0      收藏:0      [点我收藏+]

标签:字符连接   asc   let   var   编译   代码   语句   lan   div   

前言

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>

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

效果:

技术图片

js es6 模板字符

标签:字符连接   asc   let   var   编译   代码   语句   lan   div   

原文地址:https://www.cnblogs.com/aoximin/p/13171559.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!