Javascript 从模板字符串呈现空白

如果我有一个带空格的模板字符串，比如

(`${firstName},

Thanks for ordering ${product1}.

Your order has shipped.`);

如何将其呈现为html，包括空格

我尝试过使用innerHTML，但结果是

Hello Somebody, Thanks for ordering something. Your order has shipped.

var firstName=“某人”
var product=“某物”
常量元素=(`
你好${firstName}，
感谢订购${product}。
您的订单已发货。
`);
document.getElementById（'test'）.innerHTML=element；
```
预期：
你好，某人，
谢谢你点东西。
您的订单已发货。
实际结果：
您好，谢谢您点东西。您的订单已发货。

默认情况下，HTML将折叠空白。您可以使用将显示换行符的

标记保留空白或替换换行符，如下所示：

document.getElementById('test').innerHTML = element.replace(/\n/g, '<br>')

document.getElementById（'test'）。innerHTML=element.replace（/\n/g，
）

您可以尝试使用pre-tag而不是div-tag：

<pre id="test"></pre>

既然您使用了babel，为什么不在
常量元素中编写HTML呢

const element = (
<div>
    <h3>Hello ${firstName}<h3>
    <p>Thanks for ordering ${product}</p>
    <p>Your order has shipped.</p>
</div>
);

const元素=(
你好${firstName}
感谢订购${product}

您的订单已发货

);

仅供参考，您需要先包装一个div
可能的副本。我感谢您的建议，但我不想找到我所描述内容的替代方案。我是一个新手，所以我试图理解为什么一本书只把控制台作为代码的输出来教东西，而其目的是学习如何进行单页应用程序编码。我试图使用最初输出到控制台的一个示例在屏幕上进行渲染。
const element = (
<div>
    <h3>Hello ${firstName}<h3>
    <p>Thanks for ordering ${product}</p>
    <p>Your order has shipped.</p>
</div>
);