如何使用FTL模板将字符串数组元素逐行显示在HTML页面？

你用${myArray.join("\r\n")}没生效的原因是：HTML在渲染文本时，会忽略普通的换行符（包括\r\n），多个空白字符只会被合并成一个空格，所以看不到换行效果。下面给你几种可行的解决方案：

• 用<br>标签连接数组元素
  直接把数组元素用HTML的换行标签拼接，页面会识别并渲染换行：

  const myArray = ["green","blue","red"];
  document.body.innerHTML = myArray.join('<br>');
  

• 用列表元素渲染
  如果需要结构化的换行展示，用无序列表或有序列表更规范：

  const myArray = ["green","blue","red"];
  const listEl = document.createElement('ul');
  myArray.forEach(color => {
    const itemEl = document.createElement('li');
    itemEl.textContent = color;
    listEl.appendChild(itemEl);
  });
  document.body.appendChild(listEl);
  

• 利用CSS的white-space: pre-wrap属性
  如果你想保留用换行符拼接的方式，可以把文本放到设置了该CSS属性的容器中，它会保留文本中的换行符：

  <div id="color-container" style="white-space: pre-wrap;"></div>
  

  const myArray = ["green","blue","red"];
  document.getElementById('color-container').textContent = myArray.join('\n');
  

内容的提问来源于stack exchange，提问作者raj