模板文字内的循环？答案

【问题标题】：For Loop inside Template Literals?模板文字内的循环？
【发布时间】：2020-05-26 22:32:16
【问题描述】：

这是一种在模板文字中循环的方法吗？显然，这可以通过像这样映射一个数组来完成：

array = ["a", "b", "c"]
console.log(`foo ${array.map(i => i).join(" ")} bar`)
///foo a b c bar

但是如果我们需要在特定时间循环某些东西怎么办？像这样：

`foo ${for (let i = 0; i <= 10; i++) {Somthing}} bar`

【问题讨论】：

模板文字允许嵌入表达式，而不是语句。考虑改为分享您要解决的问题，因为目前这似乎是XY Problem。
什么是Something？您可以将任何循环转换为 s/t，例如数组或生成器。

标签： javascript loops for-loop template-literals

【解决方案1】：

你可以在那里使用 IIFE：

`foo ${(function fun() {
  // Do your loop here
  // Return the result as a string
})()} bar`

我建议不要这样做，只需创建普通函数，调用它，将返回值分配给一个变量，然后在模板文字占位符内使用该变量。

【讨论】：

谢谢，完成了这项工作：foo ${(function fun() { string ="" for(let i = 0; i <10 ; i++){ d+= i } return string })()} bar //"foo 0123456789 bar" 然而，这似乎有点奇怪，我应该听从你的建议。
您能否详细说明为什么您会反对它？

【解决方案2】：

在ES6中可以使用reducer来实现

const anArray = [
  {
    "name": "pulha",
    "as": "puli"
  },
  {
    "name": "puli",
    "as": "moka"
  },
    {
    "name": "moka",
    "as": "starbucks"
  },
  {
    "name": "starbucks",
    "as": "sweet"
  },
    {
    "name": "sweet",
    "as": "krispey"
  },
  {
    "name": "krispey",
    "as": "free"
  }
];

$('#an-example-showing-template').append(`
  ${anArray.reduce((updated, latest) => updated.concat(`<li>${latest.name} alias ${latest.as}</li>`), '')}
`)

#an-example-showing-template > li {
  list-style-type: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="an-example-showing-template"></ul>

【讨论】：

谢谢~这个解决方案适用于我的代码。值得使用。