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>

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

效果:

posted @ 2020-06-21 10:17  敖毛毛  阅读(287)  评论(0编辑  收藏  举报