ES6折腾记- 模板字符串

前言

模板字符串是个好东西，请看我细细道来；

---

模板字符串

模板字符串是ES6引进来的,有点相似咱们平时使用的模板引擎【jade,handlebar这些】，

但功能相对鸡肋些，没法条件循环遍历什么的，下面我来列举下它的优缺点

• 优势:
  • 支持变量
  • 支持多行输入
• 缺点：
  • 没有内建循环语法，条件语句不支持， 只可使用模板套构的方法
  • 不能自动转义特殊的字符串。--- 须要手动转义或者写一个转义函数
  • 不能很好的和国际化库配合（即不会格式化特定语言的数字，日期，文字等）

---

如何使用

注意点：

1. ``反引号来包含内容
2. ${}来识别储存的内容片断【占位符--支持条件表达式】
3. 标签 + 反引号内容会触发高级函数的定义

• tag`` --- 触发模板字符串函数定义
• String.raw`` -- 取得字符串模板内的原始数据【原始数据就是包裹换行符\n这些】

//用法1: 多行字符串输出，容许内部调用模板占位符
`我是卖报的 今天又没卖出报纸 坑啊`

/* "我是卖报的 今天又没卖出报纸 坑啊" */


//----------------------------------------------
//用法2：变量插入，有了这个就不用像ES5以前只能用+来拼接字符串了【据第三方测试，字符串拼接的速度比这个ES6模板字符串的快。。。ES6原本就是语法糖！！！】

var a = 2;
var b =3 ;
var c = a * 9 ;
console.log(`获得的结果值是:${a * b + c % a }*2`)
//获得的结果值是:6*2


//---------------------------------------------
//用法3：模板字符串高级运用[值位置调整，值的二次运算]
//须要先定义一个函数【arg1为字符串内容(arr-嵌套数组)，arg2为变量[arr]】
//函数名+模板字符串执行，，具体以下
function test(strings,...values){
   console.log('strings是：'+strings+'\n');
   console.log('value是：'+values);
   return values[0]+strings + values[values.length-1]
}
var return_value = test`获得的结果值是:${a * b} \n,我分割,\tfasdfjl ${ c % a } *2`
//return_value的结果是：
/* strings是：获得的结果值是:, ,我分割, fasdfjl , *2 value是：6,0 */


String.raw`获得的结果值是:${a * b} \n,我分割,\tfasdfjl ${ c % a } *2`

//值为：
/* "获得的结果值是:6 \n,我分割,\tfasdfjl 0 *2" */

复制代码

• 函数高级形式内，两个传入返回的均为数组；
• 第一个参数值为嵌套数组：eg :[a,b,c,raw obj arr] : 最后一个下标值为字符串的原始数据构成的数组对象；String.raw对象是对全部字符转义一次才输出【已经手动转义的再也不处理】
• 第二个参数是变量构成的数组
• 函数内部能够进行下标操做及其余功能操做，最后的值为return返回的值

---

总结

整体来讲，模板字符串的出现了，让咱们的字符串拼接写的更加优美了；至关简易实用；可是这货并非万能的，有部分unicode编码字符会形成编译报错