有没有一种用JavaScript编写的方法不那么复杂?

当然,不要把所有事情都放在一条线上相反,合理地使用变量和换行符。

const divStrings = new Array(options.length)
  .fill()
  .map((v, i) =>
    `<div class="page"><iframe src="./renders/page-${i + 1}"></iframe></div>`
  )

const frag = document.createRange().createContextualFragment(new String(foo))

const divs = [...frag.querySelectorAll('div')]

const frames = divs.map(_addPageWrappersAndBaseClasses)

除了格式和变量之外,对上面代码的唯一更改是 .map 最后是无关的。我把它改为直接传递被调用的函数。

你可以去掉一两个变量,这样就不需要把它拉出来,但是把所有的东西都打包成一个表达式并没有什么好处。

是的,使用常规的DOM方法会更高效、更简洁。

for(let i = 0; i < options.length; i++) {
    const page = document.createElement("div");
    page.className = "page";
    const frame = document.createElement("iframe");
    frame.src = `./renders/page-${i + 1}`;
    page.appendChild(frame);
    _addPageWrappersAndBaseClasses(page, i);
}

您还应该避免在JavaScript中使用字符串解析HTML。