模板字符串

什么是模板字符串？ 

模板字符串：是允许嵌入表达式的字符串（可以使用多行字符串和字符串插值功能）

与一般字符串相比较没有差别，但是便于字符串的连接使用。同时模板字符串中的注入可以进行函数的调用，数组的选取之类的操作，但是普通字符串不具备。

$('#ulList').html(`
    <ul>
      <li>${data.province}</li>
      <li>${data.city}</li>
    </ul>
`);
 
//嵌套模板字符串
const tmpl = addrs => `
  <table>
  ${addrs.map(addr => `
    <tr><td>${addr.first}</td></tr>
    <tr><td>${addr.last}</td></tr>
  `).join('')}
  </table>
`;

模板字符串用法

它与一般字符串不同，会保留空格，换行符和缩进

const str = `第一      行
第二行
	第三行`
console.log(str);

 

多行字符串

源代码中插入的任何新行开始字符都作为模板字符串的内容. 使用一般的字符串时, 为了创建多行的字符串不得不用如下语法:

console.log(`string text line 1
string text line 2`);
// "string text line 1
// string text line 2"

嵌入表达式

模板字符串之间还可以进行嵌套。

var a = 5;
var b = 10;
console.log(`Fifteen is ${a + b} and\nnot ${2 * a + b}.`);
// "Fifteen is 15 and
// not 20."

标签模板字符串

标签模板函数第一个参数是字符串模板的常量数组，后面的每一个参数为表达式的计算结果，函数名称可以任意指定。下面是一个例子：

var a = 5, b = 10;
 
function tag(strings, ...values) {
    console.log(strings[0]);    // "Hello "
    console.log(strings[1]);    // " world"
    console.log(strings[2]);    // ""
    console.log(values[0]);     // 15
    console.log(values[1]);     // 50
 
    return "Anything";
}
 
tag`Hello ${a + b} world ${a * b}`;
// Anything