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

2024年3月25日 92次阅读 来源: chekun

说到 模版字符串 (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一行
    原文作者：chekun
    原文地址: https://segmentfault.com/a/1190000009992636
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞