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 += "<";
continue;
}
else if(str[i] == ">") {
newstr += ">";
continue;
}
newstr += str[i];
}
return newstr;
};
// 将生成的table加入到tableinsert中
$(function () {
$('#tableinsert').append($(temp1(data)));
});
</script>
</head>
<body>
<div id="tableinsert"></div>
</body>
上述中我使用了``,在内部我可以随意使用${} 进行字符串的嵌入。
效果: