模板字符串
在传统的拼接字符串中,使用的是‘+’进行拼接:
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
欢迎你的到来 ~ ~ ❤❤❤