模版字符串的使用
字符串拼接
var name = '粽子';
var lang = 'ES6';
console.log(`这是${name}的${lang}教程！`);
// 这是粽子的 ES6 教程！
多行字符串
<div id="ricepudding"></div>
<script type="text/javascript">
let lang = 'ES6';
document.getElementById('ricepudding').innerHTML = `<h1>粽子 ${lang} Wiki</h1>
<p>这里是粽子Wiki，未经许可不能转载</p>
<div>Wiki主要内容</div>`;
</script>
逻辑运算
var a = 1;
var b = 2;
// ES5
console.log('a + b 的和是: ' + (a + b)); // a + b 的和是: 3
// ES6
console.log(`a + b 的和是: ${a + b}`); // a + b 的和是: 3
var age = 16;
console.log(`小明是${age > 18 ? '成年人' : '未成年人'}`) // 小明是未成年人
带标签的模版字符串
带标签的模板字符串可以把模版字符串的内容作为参数传到函数中，使用方式和函数的调用略有不同；
fn${expression} 函数 fn 会接收后面表达式作为参数，第一个参数是表达式中所有字符串组成的数组，第二个以后的参数是表达式中的变量的值，和变量是一一对应的；
const highlight = (strings, ...values) => {
console.log(strings); // [ "Hello, I'm ", " and I'm a ", '' ]
console.log(values); // [ 'Alex', 'Developer' ]
};
const name = "Alex";
const title = "Developer";
const html = highlight`Hello, I'm ${name} and I'm a ${title}`;
小结
可以对字符串进行拼接和多行字符串的处理；
模板字符串中可以包含表达式，也可以进行逻辑运算；
带标签的模板字符串可以把模板字符串的内容当作参数传递到函数中，进行复杂的逻辑；
打赏作者
您的打赏是我前进的动力
微信
支付宝
ES6+ 解构赋值
上一篇
评论
