深入了解模板字符串
这次将给大家带来模板字符串用法和几大注意要点
用法
模板字符串由一对反引号标识符组成,${}
为取值表达式
let name = "Tony";
let age = 18 ;
name+"今年"+age+"岁" ;
//"Tony今年18岁"
等价于
`${name}今年${age}岁了`;
//"Tony今年18岁"
我们用传统写法表达字符串和变量的拼接写法非常冗余,ES6的模板字符串就可以很好的解决这个问题
要点
- 模板字符串中如需用反引号,需要用\转义
let name = "Tony";
let age = 18;
`\`${name}\`今年${age}岁`;
//"`Tony`今年18岁"
- 如果大括号里面的值不是字符串,则按照一般规则装换为字符(toString方法),特别注意的是,如果大括号里面是对象,则将返回
[object Object]
,如下面代码
let obj = {};
`abc${obj}`;
//"abc[object Object]"
- 大括号里面就是执行JavaScript代码,因此如果大括号内部是字符串,就会将原样输出
let x = 1;
let y = 2;
大括号里面是表达式,计算后输出
`${x} + ${y} = ${x + y}`
// "1 + 2 = 3"
大括号里面是字符串,将原样输出
`${"Hello World"}`
//"Hello World"
- 模版字符串所有的空格和缩进都会被保留在输出之中
let newLis = "<li>1:aaa</li>"
let ul =
`
<ul>
${newLis}
</ul>
`;
/*
<ul>
<li>1:aaa</li>
</ul>
*/
- 模板字符串可嵌套
let name = "Tony";
let age = 18 ;
`${name}今年${`${age}`}岁了`;
//"Tony今年18岁了"
- 标签模板,函数名+模板字符串,其实就是另外一种调用函数的表达
function fn() {
console.log(arguments);
}
let name = "Tony";
let age = 18 ;
fn`${name}今年${age}岁了`;
//{ '0': [ '', '今年', '岁了' ], '1': 'Tony', '2': 18 }
等同于
fn([ '', '今年', '岁了' ], 'Tony', 18);
//{ '0': [ '', '今年', '岁了' ], '1': 'Tony', '2': 18 }
返回的arguments
第一个属性包含了所有的除了变量外的部分,变量在后面逐个显示;注意第一个数组个数总是要比变量多一个,可以把${name}今年${name}岁了
看成一条线,把每个变量${name}
${name}
看成是一个分割点,分割的结果总是分割点多一份;如果变量位于首尾的时候会分割出一个空字符串''
;
总结
- 模板字符串中如需用反引号,需要用\转义
- 模版字符串所有的空格和缩进都会被保留在输出之中
- 字符串里可以嵌套变量,大括号里内部可以放入任意的JavaScript表达式,可以进行运算,以及引用对象属性,函数
- 模板字符串可嵌套
- 使用标签模板,注意
arguments
第一个数包含所有非变量部分,且数量总比变量多一个
ES6总结系列参考自阮一峰大神的《ES6入门教程》