es6模板字符串_js循环字符串

全栈程序员-站长 • 2022年8月21日上午8:36 • 未分类 • 阅读 23

大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元售后保障童叟无欺

相比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 向大佬学习。

发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/171822.html原文链接：https://javaforall.net