谈ES6模板语法的隐藏操作

周大胖子

1. 
   
2. 
   
3. import React from "react";
   
4. 
   
5. const mtyi = '星火相传';
   
6. const mtyi2 = '地大物博';
   
7. 
   
8. 
   
9. class TemJs extends React.Component{
   
10.     constructor(){
    
11.         super();
    
12.         this.state={
    
13.             num:123
    
14.         }
    
15.         this.tmp();
    
16.     }
    
17. 
    
18.     render(){
    
19.         return (
    
20.             <section>
    
21.                 <p> 补充一个ES6的语法 </p>
    
22.             </section>
    
23.         );
    
24.     }
    
25. 
    
26.     tmp(){
    
27.         console.log(`常规ES6字符串拼接语法${mtyi}我爱我家`)
    
28. 
    
29.         // 下方这个方法表明 es6 拼接完的模板字符串是可执行函数， 打印  出来的是 一个数组： 结果是 字符串的 非替代字段拆分 ，组成的数组
    
30.         //  在ES6中 可以使用模板字符串 调用函数
    
31. 
    
32.         this.a `常规ES6字符串拼接语法${mtyi}我爱我家${mtyi2}的，人生在世弄扁舟`;
    
33. 
    
34.         this.b('你','我','他');
    
35. 
    
36.         this.b `常规ES6字符串拼接语法${mtyi}我爱我家${mtyi2}的，人生在世弄扁舟`;
    
37.     }
    
38. 
    
39.     tmp2(){
    
40.         // 解析
    
41. 
    
42.     }
    
43.    
    
44.     a(arr){
    
45.         console.log(arr)
    
46.     }
    
47. 
    
48.     b(...brr){
    
49.         console.log(brr) // 解析结果为 多个元素的数组，第一个元素 非替代字段拆分成的数组， 第二个元素开始 后面都是替代字段 各 为一个元素
    
50.     }
    
51. 
    
52. }
    
53. 
    
54. 
    
55. 
    
56. export default TemJs;
    
57. 
    

复制代码