Javascript的模板常量(Template literal)
ES6中规定了两种常量:模板常量和 标记的模板常量(tagged template literal)。这两种常量很相似,但是它们有如下区分:
- Web模板 (data): 带有空格的HTML能被填入
- 模板常量Template literals (code): 多行字符加上插入值
- 标记的模板常量Tagged template literals (code): 函数调用
模板常量是字符串常量,能够跨多行,包含插值表达式:
const name = '张三';
console.log(`你好 ${name}! `);
我们再看看模板常量结合箭头函数和数组的应用:
const tmpl = addrs => ` <table> ${addrs.map(addr => ` <tr><td>${addr.first}</td></tr> <tr><td>${addr.last}</td></tr> `).join('')} </table>
`;
上面tmpl是一个箭头函数,addrs是一个数组,它将数组addrs映射成一个字符串,这是一个模板字符串,调用如下:
const data = [ { first: '<Jane>', last: 'Bond' }, { first: 'Lars', last: '<Croft>' }, ];
console.log(tmpl(data));
输出结果如下:
// <table> // // <tr><td><Jane></td></tr> // <tr><td>Bond</td></tr> // // <tr><td>Lars</td></tr> // <tr><td><Croft></td></tr> // // </table>