ES6之字符串的扩展（上）

模板字符串

在传统的拼接字符串中，使用的是‘+’进行拼接：

var a =1, b=2;
var str = "a的值是" + a + "，b的值是" + b;
console.log(str);  // a的值是1，b的值是2

可以看出用+进行拼接字符串比较繁琐，尤其是当字符串特别长的时候+就会显得冗余。于是在ES6中就有了模板字符串，它是用反引号`进行拼接的（键盘上tab键上面的那个键子）。

var a =1, b=2;
var str = `a的值是${a}，b的值是${b}`;
console.log(str);

变量的值放在${ }中，里边除了可以是变量，也可以是表达式。

var res = `the sum of a and b is ${a+b}`;
console.log(res);  // the sum of a and b is 3

表达式也包括函数的调用：

function sum (a=1, b=2){
  return a+b;
}
var str = `the result is ${sum()}`;
console.log(str);

需要注意的是，在模板字符串中所有出现的空格、换行和缩进都会保留在输出中：
var str = `a的值是${a}， b的值是${b}`;
上边输出的str也是含有换行的str。

标签模板

标签模板是在模板字符串前加上一个用来处理它的函数名称，我们先来看下边的代码：

var yy = 2017, mm = 4, dd = 21;
tagTemplate`Today is ${yy}-${mm}-${dd}.`
function tagTemplate(arr,...values){
  console.log(arr);  // [ 'Today is ', '-', '-', '.' ]
  console.log(values); // [ 2017, 4, 21 ]
}

参数里的...values后边会讲到，这里可以把...values和arr理解为arguments。arguments[0]就是arr，是一个数租，里边的元素是模板字符串中的非变量内容。values，存放的是模板字符串中的变量值，这样，我们知道了他们存放的位置就可以随意的处理和操纵模板字符串了。

最后，跟大家分享一下我的个人博客地址：http://javascript404.com
欢迎你的到来 ~ ~ ❤❤❤