模板字符串(笔记)

基本语法

1.es6中，用反引号（`）标识。

// 普通字符串
`In JavaScript '\n' is a line-feed.`

// 多行字符串
`In JavaScript this is
 not legal.`

字符串中嵌入变量

1.字符串中嵌入变量 使用${}。

let name = "Bob", time = "today";
`Hello ${name}, how are you ${time}  ?`

2.大括号里面可以放表达式 ，可以调用函数。

let x = 1;
let y = 2;

`${x} + ${y} = ${x + y}`
//----------
function fn() {
  return "Hello World";
}
`foo ${fn()} bar`

3.如果大括号中的值不是字符串，将按照一般的规则转为字符串。比如，大括号中是一个对象，将默认调用对象的toString方法。

4.由于模板字符串的大括号内部，就是执行 JavaScript 代码，因此如果大括号内部是一个字符串，将会原样输出。

`Hello ${'World'}`
// "Hello World

其他

1.如果字符串中要使用反引号，则前面要用反斜杠转义。

let greeting = `\`Yo\` World!`;

2.如果使用模板字符串表示多行字符串，所有的空格和缩进都会被保留在输出之中。

$('#list').html(`
<ul>
  <li>first</li>
  <li>second</li>
</ul>
`);

如果你不想要这个换行，可以使用trim方法消除它。

$('#list').html(`
<ul>
  <li>first</li>
  <li>second</li>
</ul>
`.trim());

3.模板字符串还能嵌套。

const tmpl = addrs => `
  <table>
  ${addrs.map(addr => `
    <tr><td>${addr.first}</td></tr>
    <tr><td>${addr.last}</td></tr>
  `).join('')}
  </table>
`;


const data = [
    { first: '<Jane>', last: 'Bond' },
    { first: 'Lars', last: '<Croft>' },
];

console.log(tmpl(data));