时间戳

首页 > 解决方案 > 从模板字符串呈现空白

javascript - 从模板字符串呈现空白

问题描述

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

(`${firstName},

Thanks for ordering ${product1}.

Your order has shipped.`);

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

我试过使用innerHTML，但结果是

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

<html>
<head>
    <meta name="viewport" content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no"/>
    <meta charset="utf-8">

    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>

<div id="test"></div>
  <script type="text/babel">

    var firstName = "Somebody"
    var product = "something"


    const element = (`
    Hello ${firstName},

    Thanks for ordering ${product}.

   Your order has shipped.
`);

document.getElementById('test').innerHTML = element;    

</script>
</body>
</html>```

Expected:

Hello Somebody, 

Thanks for ordering something. 

Your order has shipped.


Actual results:

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

标签： javascripthtmlwhitespace

解决方案

默认情况下，HTML 会折叠空格。您可以使用css white-space: pre<br>保留空格，也可以使用将呈现换行符的标签替换换行符，如下所示：

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

推荐阅读