JS-模板字符串

模板字符串 【（ES6新增）  存在浏览器兼容性问题。】

         在此之前在使用字符串拼接变量时候使用是 “+” 

                  现在ES6新增 模块字符串后，就可以使用模块字符串来写。可以在字符串中直接使用${变量名}

 

 在此之前声明一个字符串都是用 双引号 “” 或者  单引号 ‘’  ，可在ES6新增模块字符串中却使用是 反引号` ` 声明。

反引号的快捷键是在键盘 ESC下面的这个键  “~” 。

     【下面需要大家注意的是比较容易出错的点】

                【 注意】：1.普通的字符串是不可以进行换行的。

                                    2.而新增的模块字符串是可以，且换行会输出。

 

举例说明！

<script>

    //定义两个字符串
   var userName = "张三";
   var year = "10";
  
//这是用“+”进行拼接后的字符串。

var str = "我是法外狂徒"+userName+",刚被判了"+year+"年";


//这是用 ES6新增后的 模块字符串 进行拼接后的字符串。

var str2 = `我是法外狂徒${userName},刚被判了${year}年`;

//下面来看一下输出来的结果！

我是法外狂徒张三,刚被判了10年

我是法外狂徒张三,刚被判了10年； //输出的最后结果是一模一样的。



再看一下它们进行换行后的结果是什么样的？？？
  
 var str = "我是法外狂徒"+userName+",刚
    被判了"+year+"年";
    console.log(str);

///这是用“+”拼接过后的普通字符串经过换行之后，输出结果报错“Uncaught SyntaxError: Invalid or unexpected token”



 var str2 = `我是法外狂徒${userName},刚被
    // 判了${year}年`;
    console.log(str2);

///这是模块字符串用“${}”换行之后，输出结果为“我是法外狂徒张三,刚被
    判了10年”。

另外就是在普通字符串换行的地方加上双引号在输出就跟模块字符串输出的结果一样了。。

var str = "我是法外狂徒" + userName + ",刚" +
      "被判了" + year + "年";
      console.log(str);     //这就是在换行的地方加过双引号之后的代码；
//下面我们来一起看看输出的结果是什么？？？

 
   我是法外狂徒张三,刚被判了10年  //这就是输出的结果，是不是跟模块字符串换行之后输出的结果一模一样。