js es6 模板字符

Posted 2020-12-11 你永远想象不到，一个光鲜亮丽的Application，有多么

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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>

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

效果:

以上是关于js es6 模板字符的主要内容，如果未能解决你的问题，请参考以下文章