ES6之模板字符串

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第3天，点击查看活动详情   

前言

es6 引入新的声明字符串的方式: 模板字符串（``）

1、简单声明

与双引号""、单引号''一致，模板字符串的同样有自己的标识符号：

   let str = `我是字符串`;
   console.log(str, typeof str); // 输出：我是字符串 string

要实现转行或空格等特殊行为，需要用对应的特殊字符进行转义

   let str = `我也是\n一个字符串`;
   console.log(str); 

输出：

2、内容中可以直接出现换行符

浏览器可以识别模板字符串的任何特殊符号（换行，空格，缩进）

   let str = `
       <ul>
          <li>深</li>
          <li>神</li>
          <li>身</li>
       </ul>
   `.trim();
   console.log(str); 

输出：

ps: trim() 去除换行

3、输出变量的拼接

   let lovest = "尾箱"
   // es5 
   let outEs5 = lovest + '是我对信号的延续';
   console.log(outEs5); // 输出：尾箱是我对信号的延续
   // es6
   let outEs6 = `${lovest}是我对信号的延续`
   console.log(outEs6); // 输出：尾箱是我对信号的延续
   
   console.log(outEs5 === outEs6); // 输出：true

4、解析字符串中的表达式

   let str_ex  = `${1 + 2}`;
   console.log(str_ex); // 输出：3

5、解析方法

当内容为语句时，浏览器会解析语句并执行，若该函数没有return返回值，默认返回undefined，反之返回return的值

   function fn(type) {
      if (type) {
         console.log("没有返回值，默认underfined")
      } else {
         return '返回一个返回值'
      }
   };
   const str_lan = `${fn(true)}`; // 调用并输出：没有返回值，默认underfined
   console.log(str_lan); // 输出：undefined

   const str_out = `${fn(false)}`;  
   console.log(str_out); // 输出：返回一个返回值

6、模板标签

模板标签是一个非常重要的能力，模板字符串可以紧跟在一个函数名后面，该函数将被调用来处理这个模板字符串。

格式：`字符串 $ {变量}`， 例如：`姓名${陈双尾}`

   function fun(param1, param2, param3) {
      console.log(param1); // 输出：['大师兄', '二师兄', '。']
      console.log(param2); // 输出：孙悟空
      console.log(param3); // 输出：猪八戒
   };
   let name1 = "孙悟空";
   let name2 = "猪八戒";
   let tagStr = fun `大师兄${name1}二师弟${name2}。`;

7、模板字符串嵌套渲染dom

   const teml = addrs => `
   <table>
      ${addrs.map(res => `
         <tr><td>${res.first}</td></tr> 
         <tr><td>${res.last}</td></tr> 
   `).join('')}
   </table>
   `
   const data = [
      { first: '<Jane>', last: 'Bond'},
      { first: 'Lars', last: '<Croft>'}
   ];
   console.log(teml(data)); 
   

输出:

ps：join() 是为了去除逗号