描述
es6中的模板字符串可以代替es5的字符串拼接
模板字符串使用反引号 (`) 来代替普通字符串中的用双引号和单引号。
用法
let message = `Hello World`;
console.log(message);//Hello World
特点
在模板字符串中,空格、缩进、换行都会被保留:
let a = `
<ul>
<li>1</li>
<li>2</li>
</ul>
`;
console.log(a);
如果需要打印出引号,可以使用反斜杠转义:
let message = `Hello \` World`;
console.log(message);//Hello \` World
嵌套变量
模板字符串可以嵌入变量,只需要把变量名写在${} 之中。除了变量名意外,其他的Javascript表达式都可以嵌入
let x = 1, y = 2;
let message = `<ul><li>${x}</li><li>${x + y}</li></ul>`;
console.log(message); // <ul><li>1</li><li>3</li></ul>
模板字符串支持嵌套:
let arr = [{value: 1}, {value: 2}];
let message = `
<ul>
${arr.map((item) => {
return `
<li>${item.value}</li>
`
})}
</ul>
`;
console.log(message);
// <ul>
<li>1</li>
,
<li>2</li>
</ul>