ES2015入门系列7-模版字符串

说到 模版字符串 (Template strings or Template literals), 我们先来看看在ES5中,我们遇到的问题:

假设我们需要拼接一段html字符串,常规的做法如下:

var text = 'ES5 sucks!';
var html = '\
  <div> \
    <p>' + text + '</p>\
  </div>';
console.log(html);

或者:

var text = 'ES5 sucks!';
var html = [
  '<div>',
    '<p>' + text + '</p>',
  '</div>'
].join('');
console.log(html);

写的很难受对不对?到了ES2015, 有了 模版字符串 后,事情就变得简单了。

模版字符串,就是用 `` 包裹起来的字符串, 如:

let html = `
  <div>
    <p>ES5 sucks!</p>
  </div>
`;
console.log(html);

在其中,我们还可以使用 ${变量名}, 直接引用变量,而不用字符串拼接了,如:

let text = 'ES5 sucks!';
let html = `
  <div>
    <p>${text}</p>
  </div>
`;
console.log(html);

如果不想其中的字符被转译,比如保留换行字符等,可以使用 String.raw, 如:

console.log(`我是\n两行`);
console.log(String.raw`我是\n一行`);

输出:

> 我是
> 两行
> 我是\n一行
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值