ES6模板字符串（循环、函数）

相比ES5的拼接字符串，ES6毫无疑问是简单明了，又清晰可维护。原始的字符串拼接真的是把整个人都拼傻，并且在处理的过程中会出现很多小坑，小问题。

$('#ulList').html(`
    <ul>
      <li>浙江</li>
      <li>杭州</li>
    </ul>
`);

上面就是用es6的模板字符串``的写法，用反引号（`）标识。如果想拼接变量的话用${ }，还可以嵌套使用，模板字符串中还可以嵌套另一个模板字符串。

$('#ulList').html(`
    <ul>
      <li>${data.province}</li>
      <li>${data.city}</li>
    </ul>
`);

//嵌套模板字符串
const tmpl = addrs => `
  <table>
  ${addrs.map(addr => `
    <tr><td>${addr.first}</td></tr>
    <tr><td>${addr.last}</td></tr>
  `).join('')}
  </table>
`;

上面的代码就是拼接变量，用${data.province}替换了+ ' data.province ' +

这都很简单，但在项目中的需求有的时候想在字符串拼接里面写入循环啊、函数啊之类的，

首先呢，大括号里支持任何表达式的，可以三目，可以调用函数，同样可以引用对象属性

let x = 1;
let y = 2;

`${x} + ${y} = ${x + y}`
// "1 + 2 = 3"

`${x} + ${y * 2} = ${x + y * 2}`
// "1 + 4 = 5"

let obj = {x: 1, y: 2};
`${obj.x + obj.y}`
// "3"

//调用函数
function fn() {
  return "大连";
}

`I come from ${ fn() }`
//I come from 大连

在模板字符串中怎么写循环呢？ES6声明了一个模板编译的说法，该模板使用<%...%>放置 JavaScript 代码，使用<%= ... %>输出 JavaScript 表达式。上代码

let template = `
<ul>
  <% for(let i=0; i < data.supplies.length; i++) { %>
    <li><%= data.supplies[i] %></li>
  <% } %>
</ul>
`;

函数写法

let script =
`(function parse(data){
  let output = "";

  function echo(html){
    output += html;
  }

  ${ template }

  return output;
})`;

return script;

详解还是要看阮一峰大佬的书，里面有ES6对字符串的详解。我这只是对模板字符串的简单介绍

http://es6.ruanyifeng.com/#docs/string 向大佬学习。

ES6模板字符串（循环、函数）

猜你喜欢